From 423037b9d67a54f47374160055f616eb434e202f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 28 Feb 2025 17:58:51 +0200
Subject: [PATCH] chore(client/ts): port search_options

---
 .../search_options/{ancestor.js => ancestor.ts}     | 12 ++++++------
 .../widgets/search_options/{limit.js => limit.ts}   | 13 ++++++++-----
 .../search_options/{order_by.js => order_by.ts}     | 11 ++++++-----
 .../{search_script.js => search_script.ts}          | 12 ++++++------
 4 files changed, 26 insertions(+), 22 deletions(-)
 rename src/public/app/widgets/search_options/{ancestor.js => ancestor.ts} (96%)
 rename src/public/app/widgets/search_options/{limit.js => limit.ts} (86%)
 rename src/public/app/widgets/search_options/{order_by.js => order_by.ts} (93%)
 rename src/public/app/widgets/search_options/{search_script.js => search_script.ts} (94%)

diff --git a/src/public/app/widgets/search_options/ancestor.js b/src/public/app/widgets/search_options/ancestor.ts
similarity index 96%
rename from src/public/app/widgets/search_options/ancestor.js
rename to src/public/app/widgets/search_options/ancestor.ts
index 76450cd3f..f4de446bf 100644
--- a/src/public/app/widgets/search_options/ancestor.js
+++ b/src/public/app/widgets/search_options/ancestor.ts
@@ -6,13 +6,13 @@ const TPL = `
 <tr>
     <td colspan="2">
         <div style="display: flex; align-items: center;">
-            <div style="margin-right: 10px">${t("ancestor.label")}:</div> 
+            <div style="margin-right: 10px">${t("ancestor.label")}:</div>
             <div class="input-group" style="flex-shrink: 2">
                 <input class="ancestor form-control" placeholder="${t("ancestor.placeholder")}">
             </div>
-            
+
             <div style="margin-left: 10px; margin-right: 10px">${t("ancestor.depth_label")}:</div>
-            
+
             <select name="depth" class="form-select d-inline ancestor-depth" style="flex-shrink: 3">
                 <option value="">${t("ancestor.depth_doesnt_matter")}</option>
                 <option value="eq1">${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})</option>
@@ -58,7 +58,7 @@ export default class Ancestor extends AbstractSearchOption {
         return "relation";
     }
 
-    static async create(noteId) {
+    static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root");
     }
 
@@ -77,7 +77,7 @@ export default class Ancestor extends AbstractSearchOption {
         });
 
         $ancestorDepth.on("change", async () => {
-            const ancestorDepth = $ancestorDepth.val();
+            const ancestorDepth = String($ancestorDepth.val());
 
             if (ancestorDepth) {
                 await this.setAttribute("label", "ancestorDepth", ancestorDepth);
@@ -88,7 +88,7 @@ export default class Ancestor extends AbstractSearchOption {
 
         const ancestorNoteId = this.note.getRelationValue("ancestor");
 
-        if (ancestorNoteId !== "root") {
+        if (ancestorNoteId && ancestorNoteId !== "root") {
             $ancestor.setNote(ancestorNoteId);
         }
 
diff --git a/src/public/app/widgets/search_options/limit.js b/src/public/app/widgets/search_options/limit.ts
similarity index 86%
rename from src/public/app/widgets/search_options/limit.js
rename to src/public/app/widgets/search_options/limit.ts
index cc162cc64..ffd210d4c 100644
--- a/src/public/app/widgets/search_options/limit.js
+++ b/src/public/app/widgets/search_options/limit.ts
@@ -15,14 +15,17 @@ const TPL = `
             <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>
         </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 get optionName() {
         return "limit";
     }
@@ -30,7 +33,7 @@ export default class Limit extends AbstractSearchOption {
         return "label";
     }
 
-    static async create(noteId) {
+    static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "limit", "10");
     }
 
@@ -40,13 +43,13 @@ export default class Limit extends AbstractSearchOption {
         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"));
+        this.$limit.val(this.note.getLabelValue("limit") ?? "");
 
         return $option;
     }
 
     async update() {
-        const limit = this.$limit.val();
+        const limit = String(this.$limit.val());
 
         await this.setAttribute("label", "limit", limit);
     }
diff --git a/src/public/app/widgets/search_options/order_by.js b/src/public/app/widgets/search_options/order_by.ts
similarity index 93%
rename from src/public/app/widgets/search_options/order_by.js
rename to src/public/app/widgets/search_options/order_by.ts
index 3a27854c8..28c8b10f3 100644
--- a/src/public/app/widgets/search_options/order_by.js
+++ b/src/public/app/widgets/search_options/order_by.ts
@@ -24,7 +24,7 @@ const TPL = `
             <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>
@@ -36,6 +36,7 @@ const TPL = `
 </tr>`;
 
 export default class OrderBy extends AbstractSearchOption {
+
     static get optionName() {
         return "orderBy";
     }
@@ -43,7 +44,7 @@ export default class OrderBy extends AbstractSearchOption {
         return "label";
     }
 
-    static async create(noteId) {
+    static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "label", "orderBy", "relevancy");
         await AbstractSearchOption.setAttribute(noteId, "label", "orderDirection", "asc");
     }
@@ -53,15 +54,15 @@ export default class OrderBy extends AbstractSearchOption {
 
         const $orderBy = $option.find("select[name=orderBy]");
         $orderBy.on("change", async () => {
-            const orderBy = $orderBy.val();
+            const orderBy = String($orderBy.val());
 
             await this.setAttribute("label", "orderBy", orderBy);
         });
-        $orderBy.val(this.note.getLabelValue("orderBy"));
+        $orderBy.val(this.note.getLabelValue("orderBy") ?? "");
 
         const $orderDirection = $option.find("select[name=orderDirection]");
         $orderDirection.on("change", async () => {
-            const orderDirection = $orderDirection.val();
+            const orderDirection = String($orderDirection.val());
 
             await this.setAttribute("label", "orderDirection", orderDirection);
         });
diff --git a/src/public/app/widgets/search_options/search_script.js b/src/public/app/widgets/search_options/search_script.ts
similarity index 94%
rename from src/public/app/widgets/search_options/search_script.js
rename to src/public/app/widgets/search_options/search_script.ts
index ef9b73017..add0885a7 100644
--- a/src/public/app/widgets/search_options/search_script.js
+++ b/src/public/app/widgets/search_options/search_script.ts
@@ -17,17 +17,17 @@ const TPL = `
           <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">
             <p>${t("search_script.description1")}</p>
-            
+
             <p>${t("search_script.description2")}</p>
-            
+
             <p>${t("search_script.example_title")}</p>
-            
+
             <pre>${t("search_script.example_code")}</pre>
 
             ${t("search_script.note")}
           </div>
         </div>
-        
+
         <span class="bx bx-x icon-action search-option-del"></span>
     </td>
 </tr>`;
@@ -40,7 +40,7 @@ export default class SearchScript extends AbstractSearchOption {
         return "relation";
     }
 
-    static async create(noteId) {
+    static async create(noteId: string) {
         await AbstractSearchOption.setAttribute(noteId, "relation", "searchScript", "root");
     }
 
@@ -59,7 +59,7 @@ export default class SearchScript extends AbstractSearchOption {
 
         const searchScriptNoteId = this.note.getRelationValue("searchScript");
 
-        if (searchScriptNoteId !== "root") {
+        if (searchScriptNoteId && searchScriptNoteId !== "root") {
             $searchScript.setNote(searchScriptNoteId);
         }