From 73f20d01e4ede6a1ce878636e51013d70c2c9095 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 24 Aug 2025 18:29:47 +0300
Subject: [PATCH] chore(react/ribbon): port order by

---
 apps/client/src/widgets/react/FormSelect.tsx  | 13 ++--
 .../widgets/ribbon/SearchDefinitionTab.tsx    | 60 ++++++++++++++--
 .../src/widgets/search_options/order_by.ts    | 72 -------------------
 3 files changed, 60 insertions(+), 85 deletions(-)
 delete mode 100644 apps/client/src/widgets/search_options/order_by.ts

diff --git a/apps/client/src/widgets/react/FormSelect.tsx b/apps/client/src/widgets/react/FormSelect.tsx
index 639cd5bde..5b38a4c92 100644
--- a/apps/client/src/widgets/react/FormSelect.tsx
+++ b/apps/client/src/widgets/react/FormSelect.tsx
@@ -23,14 +23,15 @@ interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
     name?: string;
     onChange: OnChangeListener;
     style?: CSSProperties;
+    className?: string;
 }
 
 /**
  * Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
  */
-export default function FormSelect<T>({ name, id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
+export default function FormSelect<T>({ name, id, onChange, style, className, ...restProps }: FormSelectProps<T, T>) {
     return (
-        <FormSelectBody name={name} id={id} onChange={onChange} style={style}>
+        <FormSelectBody name={name} id={id} onChange={onChange} style={style} className={className}>
             <FormSelectGroup {...restProps} />
         </FormSelectBody>
     );
@@ -39,9 +40,9 @@ export default function FormSelect<T>({ name, id, onChange, style, ...restProps
 /**
  * Similar to {@link FormSelect}, but the top-level elements are actually groups.
  */
-export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T> | T>) {
+export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titleProperty, currentValue, onChange, ...restProps }: FormSelectProps<T, FormSelectGroup<T> | T>) {
     return (
-        <FormSelectBody name={name} id={id} onChange={onChange}>
+        <FormSelectBody name={name} id={id} onChange={onChange} {...restProps}>
             {values.map((item) => {
                 if (!item) return <></>;
                 if (typeof item === "object" && "items" in item) {
@@ -60,13 +61,13 @@ export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titlePr
     )
 }
 
-function FormSelectBody({ id, name, children, onChange, style }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
+function FormSelectBody({ id, name, children, onChange, style, className }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties, className?: string }) {
     return (
         <select
             id={id}
-            class="form-select"
             onChange={e => onChange((e.target as HTMLInputElement).value)}
             style={style}
+            className={`form-select ${className ?? ""}`}
         >
             {children}
         </select>
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
index dffd1b024..0e00bad07 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -29,6 +29,7 @@ interface SearchOption {
   tooltip?: string;
   // TODO: Make mandatory once all components are ported.
   component?: (props: SearchOptionProps) => VNode;
+  defaultValue?: string;
   additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
 }
 
@@ -52,6 +53,7 @@ const SEARCH_OPTIONS: SearchOption[] = [
   {
     attributeName: "searchScript",
     attributeType: "relation",
+    defaultValue: "root",
     icon: "bx bx-code",
     label: t("search_definition.search_script"),
     component: SearchScriptOption
@@ -59,9 +61,10 @@ const SEARCH_OPTIONS: SearchOption[] = [
   {
     attributeName: "ancestor",
     attributeType: "relation",
+    defaultValue: "root",
     icon: "bx bx-filter-alt",
     label: t("search_definition.ancestor"),
-    component: AncestorOption,
+    component: AncestorOption,    
     additionalAttributesToDelete: [ { type: "label", name: "ancestorDepth" } ]
   },
   {
@@ -83,8 +86,11 @@ const SEARCH_OPTIONS: SearchOption[] = [
   {
     attributeName: "orderBy",
     attributeType: "label",
+    defaultValue: "relevancy",
     icon: "bx bx-arrow-from-top",
-    label: t("search_definition.order_by")
+    label: t("search_definition.order_by"),
+    component: OrderByOption,
+    additionalAttributesToDelete: [ { type: "label", name: "orderDirection" } ]
   },
   {
     attributeName: "limit",
@@ -162,15 +168,12 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
             <tr>
               <td className="title-column">{t("search_definition.add_search_option")}</td>
               <td colSpan={2} className="add-search-option">
-                {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType }) => (
+                {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }) => (
                   <Button
                     icon={icon}
                     text={label}
                     title={tooltip}
-                    onClick={() => {
-                      const defaultValue = (attributeType === "relation" ? "root" : "");
-                      attributes.setAttribute(note, attributeType, attributeName, defaultValue);
-                    }}
+                    onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
                   />
                 ))}
               </td>
@@ -436,4 +439,47 @@ function IncludeArchivedNotesOption({ ...restProps }: SearchOptionProps) {
     titleIcon="bx bx-archive" title={t("include_archived_notes.include_archived_notes")}
     {...restProps}
   />
+}
+
+function OrderByOption({ note, ...restProps }: SearchOptionProps) {
+  const [ orderBy, setOrderBy ] = useNoteLabel(note, "orderBy");
+  const [ orderDirection, setOrderDirection ] = useNoteLabel(note, "orderDirection");
+
+  return <SearchOption
+    titleIcon="bx bx-arrow-from-top"
+    title={t("order_by.order_by")}
+    note={note} {...restProps}
+  >
+    <FormSelect
+      className="w-auto d-inline"
+      currentValue={orderBy ?? "relevancy"} onChange={setOrderBy}
+      keyProperty="value" titleProperty="title"
+      values={[
+        { value: "relevancy", title: t("order_by.relevancy") },
+        { value: "title", title: t("order_by.title") },
+        { value: "dateCreated", title: t("order_by.date_created") },
+        { value: "dateModified", title: t("order_by.date_modified") },
+        { value: "contentSize", title: t("order_by.content_size") },
+        { value: "contentAndAttachmentsSize", title: t("order_by.content_and_attachments_size") },
+        { value: "contentAndAttachmentsAndRevisionsSize", title: t("order_by.content_and_attachments_and_revisions_size") },
+        { value: "revisionCount", title: t("order_by.revision_count") },
+        { value: "childrenCount", title: t("order_by.children_count") },
+        { value: "parentCount", title: t("order_by.parent_count") },
+        { value: "ownedLabelCount", title: t("order_by.owned_label_count") },
+        { value: "ownedRelationCount", title: t("order_by.owned_relation_count") },
+        { value: "targetRelationCount", title: t("order_by.target_relation_count") },
+        { value: "random", title: t("order_by.random") }
+      ]}
+    />
+    {" "}
+    <FormSelect
+      className="w-auto d-inline"
+      currentValue={orderDirection ?? "asc"} onChange={setOrderDirection}
+      keyProperty="value" titleProperty="title"
+      values={[
+        { value: "asc", title: t("order_by.asc") },
+        { value: "desc", title: t("order_by.desc") }
+      ]}
+    />
+  </SearchOption>
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/search_options/order_by.ts b/apps/client/src/widgets/search_options/order_by.ts
deleted file mode 100644
index 1c6ddd46d..000000000
--- a/apps/client/src/widgets/search_options/order_by.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="orderBy">
-    <td class="title-column">
-        <span class="bx bx-arrow-from-top"></span>
-        ${t("order_by.order_by")}
-    </td>
-    <td>
-        <select name="orderBy" class="form-control w-auto d-inline">
-            <option value="relevancy">${t("order_by.relevancy")}</option>
-            <option value="title">${t("order_by.title")}</option>
-            <option value="dateCreated">${t("order_by.date_created")}</option>
-            <option value="dateModified">${t("order_by.date_modified")}</option>
-            <option value="contentSize">${t("order_by.content_size")}</option>
-            <option value="contentAndAttachmentsSize">${t("order_by.content_and_attachments_size")}</option>
-            <option value="contentAndAttachmentsAndRevisionsSize">${t("order_by.content_and_attachments_and_revisions_size")}</option>
-            <option value="revisionCount">${t("order_by.revision_count")}</option>
-            <option value="childrenCount">${t("order_by.children_count")}</option>
-            <option value="parentCount">${t("order_by.parent_count")}</option>
-            <option value="ownedLabelCount">${t("order_by.owned_label_count")}</option>
-            <option value="ownedRelationCount">${t("order_by.owned_relation_count")}</option>
-            <option value="targetRelationCount">${t("order_by.target_relation_count")}</option>
-            <option value="random">${t("order_by.random")}</option>
-        </select>
-
-        <select name="orderDirection" class="form-control w-auto d-inline">
-            <option value="asc">${t("order_by.asc")}</option>
-            <option value="desc">${t("order_by.desc")}</option>
-        </select>
-    </td>
-    <td class="button-column">
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class OrderBy extends AbstractSearchOption {
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "orderBy", "relevancy");
-        await AbstractSearchOption.setAttribute(noteId, "label", "orderDirection", "asc");
-    }
-
-    doRender() {
-        const $option = $(TPL);
-
-        const $orderBy = $option.find("select[name=orderBy]");
-        $orderBy.on("change", async () => {
-            const orderBy = String($orderBy.val());
-
-            await this.setAttribute("label", "orderBy", orderBy);
-        });
-        $orderBy.val(this.note.getLabelValue("orderBy") ?? "");
-
-        const $orderDirection = $option.find("select[name=orderDirection]");
-        $orderDirection.on("change", async () => {
-            const orderDirection = String($orderDirection.val());
-
-            await this.setAttribute("label", "orderDirection", orderDirection);
-        });
-        $orderDirection.val(this.note.getLabelValue("orderDirection") || "asc");
-
-        return $option;
-    }
-
-    async deleteOption() {
-        await this.deleteAttribute("label", "orderDirection");
-
-        await super.deleteOption();
-    }
-}