chore(client/ts): port book_properties

src/public/app/widgets/ribbon_widgets/book_properties.ts

@@ -1,6 +1,8 @@
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import attributeService from "../../services/attributes.js";
 import { t } from "../../services/i18n.js";
+import type FNote from "../../entities/fnote.js";
+import type { EventData } from "../../components/app_context.js";
 
 const TPL = `
 <div class="book-properties-widget">
@@ -9,7 +11,7 @@ const TPL = `
             padding: 12px 12px 6px 12px;
             display: flex;
         }
-        
+
         .book-properties-widget > * {
             margin-right: 15px;
         }
@@ -17,19 +19,19 @@ const TPL = `
 
     <div style="display: flex; align-items: baseline">
         <span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
-        
+
         <select class="view-type-select form-select form-select-sm">
             <option value="grid">${t("book_properties.grid")}</option>
             <option value="list">${t("book_properties.list")}</option>
         </select>
     </div>
-    
+
     <button type="button"
             class="collapse-all-button btn btn-sm"
             title="${t("book_properties.collapse_all_notes")}">
-    
+
         <span class="bx bx-layer-minus"></span>
-        
+
         ${t("book_properties.collapse")}
     </button>
 
@@ -37,13 +39,18 @@ const TPL = `
             class="expand-children-button btn btn-sm"
             title="${t("book_properties.expand_all_children")}">
         <span class="bx bx-move-vertical"></span>
-        
+
         ${t("book_properties.expand")}
     </button>
 </div>
 `;
 
 export default class BookPropertiesWidget extends NoteContextAwareWidget {
+
+    private $viewTypeSelect!: JQuery<HTMLElement>;
+    private $expandChildrenButton!: JQuery<HTMLElement>;
+    private $collapseAllButton!: JQuery<HTMLElement>;
+
     get name() {
         return "bookProperties";
     }
@@ -70,11 +77,15 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
         this.contentSized();
 
         this.$viewTypeSelect = this.$widget.find(".view-type-select");
-        this.$viewTypeSelect.on("change", () => this.toggleViewType(this.$viewTypeSelect.val()));
+        this.$viewTypeSelect.on("change", () => this.toggleViewType(String(this.$viewTypeSelect.val())));
 
         this.$expandChildrenButton = this.$widget.find(".expand-children-button");
         this.$expandChildrenButton.on("click", async () => {
-            if (!this.note.isLabelTruthy("expanded")) {
+            if (!this.noteId || !this.note) {
+                return;
+            }
+
+            if (!this.note?.isLabelTruthy("expanded")) {
                 await attributeService.addLabel(this.noteId, "expanded");
             }
 
@@ -83,6 +94,10 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
 
         this.$collapseAllButton = this.$widget.find(".collapse-all-button");
         this.$collapseAllButton.on("click", async () => {
+            if (!this.noteId || !this.note) {
+                return;
+            }
+
             // owned is important - we shouldn't remove inherited expanded labels
             for (const expandedAttr of this.note.getOwnedLabels("expanded")) {
                 await attributeService.removeAttributeById(this.noteId, expandedAttr.attributeId);
@@ -92,7 +107,11 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
         });
     }
 
-    async refreshWithNote(note) {
+    async refreshWithNote(note: FNote) {
+        if (!this.note) {
+            return;
+        }
+
         const viewType = this.note.getLabelValue("viewType") || "grid";
 
         this.$viewTypeSelect.val(viewType);
@@ -101,7 +120,11 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
         this.$collapseAllButton.toggle(viewType === "list");
     }
 
-    async toggleViewType(type) {
+    async toggleViewType(type: string) {
+        if (!this.noteId) {
+            return;
+        }
+
         if (type !== "list" && type !== "grid") {
             throw new Error(t("book_properties.invalid_view_type", { type }));
         }
@@ -109,7 +132,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
         await attributeService.setLabel(this.noteId, "viewType", type);
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId && attr.name === "viewType")) {
             this.refresh();
         }