chore(react/ribbon): port limit

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -20,6 +20,7 @@ import tree from "../../services/tree";
 import NoteAutocomplete from "../react/NoteAutocomplete";
 import FormSelect from "../react/FormSelect";
 import Icon from "../react/Icon";
+import FormTextBox from "../react/FormTextBox";
 
 interface SearchOption {
   attributeName: string;
@@ -39,6 +40,7 @@ interface SearchOptionProps {
   attributeName: string;
   attributeType: "label" | "relation";
   additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
+  defaultValue?: string;
   error?: { message: string };
 }
 
@@ -95,9 +97,11 @@ const SEARCH_OPTIONS: SearchOption[] = [
   {
     attributeName: "limit",
     attributeType: "label",
+    defaultValue: "10",
     icon: "bx bx-stop",
     label: t("search_definition.limit"),
-    tooltip: t("search_definition.limit_description")
+    tooltip: t("search_definition.limit_description"),
+    component: LimitOption
   },
   {
     attributeName: "debug",
@@ -179,14 +183,15 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
               </td>
             </tr>
             <tbody className="search-options">
-              {searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete }) => {
+              {searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete, defaultValue }) => {
                 return component?.({
                   attributeName,
                   attributeType,
                   note,
                   refreshResults,
                   error,
-                  additionalAttributesToDelete
+                  additionalAttributesToDelete,
+                  defaultValue
                 });
               })}
             </tbody>
@@ -482,4 +487,20 @@ function OrderByOption({ note, ...restProps }: SearchOptionProps) {
       ]}
     />
   </SearchOption>
+}
+
+function LimitOption({ note, defaultValue, ...restProps }: SearchOptionProps) {
+  const [ limit, setLimit ] = useNoteLabel(note, "limit");
+
+  return <SearchOption
+    titleIcon="bx bx-stop"
+    title={t("limit.limit")}
+    help={t("limit.take_first_x_results")}
+    note={note} {...restProps}
+  >
+    <FormTextBox
+      type="number" min="1" step="1"
+      currentValue={limit ?? defaultValue} onChange={setLimit}
+    />
+  </SearchOption>
 }

apps/client/src/widgets/search_options/limit.ts

@@ -1,49 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="limit">
-    <td class="title-column">
-        <span class="bx bx-stop"></span>
-        ${t("limit.limit")}
-    </td>
-    <td>
-        <input name="limit" class="form-control" type="number" min="1" step="1" />
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                ${t("limit.take_first_x_results")}
-            </div>
-        </div>
-
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class Limit extends AbstractSearchOption {
-
-    private $limit!: JQuery<HTMLElement>;
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "limit", "10");
-    }
-
-    doRender() {
-        const $option = $(TPL);
-
-        this.$limit = $option.find("input[name=limit]");
-        this.$limit.on("change", () => this.update());
-        this.$limit.on("input", () => this.update());
-        this.$limit.val(this.note.getLabelValue("limit") ?? "");
-
-        return $option;
-    }
-
-    async update() {
-        const limit = String(this.$limit.val());
-
-        await this.setAttribute("label", "limit", limit);
-    }
-}