feat(client/ts): port editability_select

src/public/app/widgets/editability_select.ts

@@ -1,6 +1,10 @@
 import attributeService from "../services/attributes.js";
 import NoteContextAwareWidget from "./note_context_aware_widget.js";
 import { t } from "../services/i18n.js";
+import type FNote from "../entities/fnote.js";
+import type { EventData } from "../components/app_context.js";
+
+type Editability = "auto" | "readOnly" | "autoReadOnlyDisabled";
 
 const TPL = `
 <div class="dropdown editability-select-widget">
@@ -44,9 +48,15 @@ const TPL = `
 `;
 
 export default class EditabilitySelectWidget extends NoteContextAwareWidget {
+
+    private dropdown!: bootstrap.Dropdown;
+    private $editabilityActiveDesc!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
 
+        // TODO: Remove once bootstrap is added to webpack.
+        //@ts-ignore
         this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
 
         this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc");
@@ -56,24 +66,28 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
 
             const editability = $(e.target).closest("[data-editability]").attr("data-editability");
 
+            if (!this.note || !this.noteId) {
+                return;
+            }
+
             for (const ownedAttr of this.note.getOwnedLabels()) {
                 if (["readOnly", "autoReadOnlyDisabled"].includes(ownedAttr.name)) {
                     await attributeService.removeAttributeById(this.noteId, ownedAttr.attributeId);
                 }
             }
 
-            if (editability !== "auto") {
+            if (editability && editability !== "auto") {
                 await attributeService.addLabel(this.noteId, editability);
             }
         });
     }
 
-    async refreshWithNote(note) {
+    async refreshWithNote(note: FNote) {
-        let editability = "auto";
+        let editability: Editability = "auto";
 
-        if (this.note.isLabelTruthy("readOnly")) {
+        if (this.note?.isLabelTruthy("readOnly")) {
             editability = "readOnly";
-        } else if (this.note.isLabelTruthy("autoReadOnlyDisabled")) {
+        } else if (this.note?.isLabelTruthy("autoReadOnlyDisabled")) {
             editability = "autoReadOnlyDisabled";
         }
 
@@ -89,7 +103,7 @@ export default class EditabilitySelectWidget extends NoteContextAwareWidget {
         this.$editabilityActiveDesc.text(labels[editability]);
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId)) {
             this.refresh();
         }