Merge pull request #1462 from TriliumNext/port_dialogs

Port dialogs to ts

src/public/app/components/app_context.ts

@@ -173,9 +173,9 @@ export type CommandMappings = {
         callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
     };
     executeWithTextEditor: CommandData &
-        ExecuteCommandData<TextEditor> & {
-            callback?: GetTextEditorCallback;
-        };
+    ExecuteCommandData<TextEditor> & {
+        callback?: GetTextEditorCallback;
+    };
     executeWithCodeEditor: CommandData & ExecuteCommandData<CodeMirrorInstance>;
     /**
      * Called upon when attempting to retrieve the content element of a {@link NoteContext}.
@@ -364,6 +364,12 @@ type EventMappings = {
         textTypeWidget: EditableTextTypeWidget;
         text: string;
     };
+    openBulkActionsDialog: {
+        selectedOrActiveNoteIds: string[];
+    };
+    cloneNoteIdsTo: {
+        noteIds: string[];
+    };
 };
 
 export type EventListener<T extends EventNames> = {

src/public/app/components/main_tree_executors.ts

@@ -1,4 +1,4 @@
-import appContext from "./app_context.js";
+import appContext, { type EventData } from "./app_context.js";
 import noteCreateService from "../services/note_create.js";
 import treeService from "../services/tree.js";
 import hoistedNoteService from "../services/hoisted_note.js";
@@ -14,23 +14,19 @@ export default class MainTreeExecutors extends Component {
         return appContext.noteTreeWidget;
     }
 
-    async cloneNotesToCommand() {
+    async cloneNotesToCommand({ selectedOrActiveNoteIds }: EventData<"cloneNotesTo">) {
         if (!this.tree) {
             return;
         }
 
-        const selectedOrActiveNoteIds = this.tree.getSelectedOrActiveNodes().map((node) => node.data.noteId);
-
         this.triggerCommand("cloneNoteIdsTo", { noteIds: selectedOrActiveNoteIds });
     }
 
-    async moveNotesToCommand() {
+    async moveNotesToCommand({ selectedOrActiveBranchIds }: EventData<"moveNotesTo">) {
         if (!this.tree) {
             return;
         }
 
-        const selectedOrActiveBranchIds = this.tree.getSelectedOrActiveNodes().map((node) => node.data.branchId);
-
         this.triggerCommand("moveBranchIdsTo", { branchIds: selectedOrActiveBranchIds });
     }
 

src/public/app/widgets/dialogs/branch_prefix.ts

@@ -8,8 +8,6 @@ import appContext from "../../components/app_context.js";
 import { t } from "../../services/i18n.js";
 import { Modal } from "bootstrap";
 
-let branchId;
-
 const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
         <form class="branch-prefix-form">
@@ -25,7 +23,7 @@ const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1"
 
                         <div class="input-group">
                             <input class="branch-prefix-input form-control">
-                            <div class="branch-prefix-note-title input-group-text"></div>                            
+                            <div class="branch-prefix-note-title input-group-text"></div>
                         </div>
                     </div>
                 </div>
@@ -38,61 +36,70 @@ const TPL = `<div class="branch-prefix-dialog modal fade mx-auto" tabindex="-1"
 </div>`;
 
 export default class BranchPrefixDialog extends BasicWidget {
+    private modal!: Modal;
+    private $form!: JQuery<HTMLElement>;
+    private $treePrefixInput!: JQuery<HTMLElement>;
+    private $noteTitle!: JQuery<HTMLElement>;
+    private branchId: string | null = null;
+
     doRender() {
         this.$widget = $(TPL);
-        this.modal = Modal.getOrCreateInstance(this.$widget);
+        this.modal = Modal.getOrCreateInstance(this.$widget[0]);
         this.$form = this.$widget.find(".branch-prefix-form");
         this.$treePrefixInput = this.$widget.find(".branch-prefix-input");
         this.$noteTitle = this.$widget.find(".branch-prefix-note-title");
 
         this.$form.on("submit", () => {
             this.savePrefix();
-
             return false;
         });
 
         this.$widget.on("shown.bs.modal", () => this.$treePrefixInput.trigger("focus"));
     }
 
-    async refresh(notePath) {
+    async refresh(notePath: string) {
         const { noteId, parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(notePath);
 
         if (!noteId || !parentNoteId) {
             return;
         }
 
-        branchId = await froca.getBranchId(parentNoteId, noteId);
-        const branch = froca.getBranch(branchId);
+        const newBranchId = await froca.getBranchId(parentNoteId, noteId);
+        if (!newBranchId) {
+            return;
+        }
+        this.branchId = newBranchId;
 
+        const branch = froca.getBranch(this.branchId);
         if (!branch || branch.noteId === "root") {
             return;
         }
 
         const parentNote = await froca.getNote(branch.parentNoteId);
-
-        if (parentNote.type === "search") {
+        if (!parentNote || parentNote.type === "search") {
             return;
         }
 
-        this.$treePrefixInput.val(branch.prefix);
+        this.$treePrefixInput.val(branch.prefix || "");
 
         const noteTitle = await treeService.getNoteTitle(noteId);
-
         this.$noteTitle.text(` - ${noteTitle}`);
     }
 
     async editBranchPrefixEvent() {
         const notePath = appContext.tabManager.getActiveContextNotePath();
+        if (!notePath) {
+            return;
+        }
 
         await this.refresh(notePath);
-
         utils.openDialog(this.$widget);
     }
 
     async savePrefix() {
         const prefix = this.$treePrefixInput.val();
 
-        await server.put(`branches/${branchId}/set-prefix`, { prefix: prefix });
+        await server.put(`branches/${this.branchId}/set-prefix`, { prefix: prefix });
 
         this.modal.hide();
 

src/public/app/widgets/dialogs/bulk_actions.ts

@@ -5,6 +5,8 @@ import utils from "../../services/utils.js";
 import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 import { t } from "../../services/i18n.js";
+import type { EventData } from "../../components/app_context.js";
+
 
 const TPL = `
 <div class="bulk-actions-dialog modal mx-auto" tabindex="-1" role="dialog">
@@ -67,6 +69,13 @@ const TPL = `
 </div>`;
 
 export default class BulkActionsDialog extends BasicWidget {
+    private $includeDescendants!: JQuery<HTMLElement>;
+    private $affectedNoteCount!: JQuery<HTMLElement>;
+    private $availableActionList!: JQuery<HTMLElement>;
+    private $existingActionList!: JQuery<HTMLElement>;
+    private $executeButton!: JQuery<HTMLElement>;
+    private selectedOrActiveNoteIds: string[] | null = null;
+
     doRender() {
         this.$widget = $(TPL);
         this.$includeDescendants = this.$widget.find(".include-descendants");
@@ -79,9 +88,11 @@ export default class BulkActionsDialog extends BasicWidget {
 
         this.$widget.on("click", "[data-action-add]", async (event) => {
             const actionName = $(event.target).attr("data-action-add");
+            if (!actionName) {
+                return;
+            }
 
             await bulkActionService.addAction("_bulkAction", actionName);
-
             await this.refresh();
         });
 
@@ -93,7 +104,6 @@ export default class BulkActionsDialog extends BasicWidget {
             });
 
             toastService.showMessage(t("bulk_actions.bulk_actions_executed"), 3000);
-
             utils.closeActiveDialog();
         });
     }
@@ -101,21 +111,28 @@ export default class BulkActionsDialog extends BasicWidget {
     async refresh() {
         this.renderAvailableActions();
 
+        if (!this.selectedOrActiveNoteIds) {
+            return;
+        }
+
         const { affectedNoteCount } = await server.post("bulk-action/affected-notes", {
             noteIds: this.selectedOrActiveNoteIds,
             includeDescendants: this.$includeDescendants.is(":checked")
-        });
+        }) as { affectedNoteCount: number };
 
         this.$affectedNoteCount.text(affectedNoteCount);
 
         const bulkActionNote = await froca.getNote("_bulkAction");
+        if (!bulkActionNote) {
+            return;
+        }
 
         const actions = bulkActionService.parseActions(bulkActionNote);
 
         this.$existingActionList.empty();
 
         if (actions.length > 0) {
-            this.$existingActionList.append(...actions.map((action) => action.render()));
+            this.$existingActionList.append(...actions.map((action) => action.render()).filter((action) => action !== null));
         } else {
             this.$existingActionList.append($("<p>").text(t("bulk_actions.none_yet")));
         }
@@ -138,7 +155,7 @@ export default class BulkActionsDialog extends BasicWidget {
         }
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         // only refreshing deleted attrs, otherwise components update themselves
         if (loadResults.getAttributeRows().find((row) => row.type === "label" && row.name === "action" && row.noteId === "_bulkAction" && row.isDeleted)) {
             // this may be triggered from e.g., sync without open widget, then no need to refresh the widget
@@ -148,12 +165,11 @@ export default class BulkActionsDialog extends BasicWidget {
         }
     }
 
-    async openBulkActionsDialogEvent({ selectedOrActiveNoteIds }) {
+    async openBulkActionsDialogEvent({ selectedOrActiveNoteIds }: EventData<"openBulkActionsDialog">) {
         this.selectedOrActiveNoteIds = selectedOrActiveNoteIds;
         this.$includeDescendants.prop("checked", false);
 
         await this.refresh();
-
         utils.openDialog(this.$widget);
     }
 }

src/public/app/widgets/dialogs/clone_to.ts

@@ -7,6 +7,8 @@ import branchService from "../../services/branches.js";
 import appContext from "../../components/app_context.js";
 import BasicWidget from "../basic_widget.js";
 import { t } from "../../services/i18n.js";
+import type { EventData } from "../../components/app_context.js";
+
 
 const TPL = `
 <div class="clone-to-dialog modal mx-auto" tabindex="-1" role="dialog">
@@ -48,10 +50,14 @@ const TPL = `
 </div>`;
 
 export default class CloneToDialog extends BasicWidget {
+    private $form!: JQuery<HTMLElement>;
+    private $noteAutoComplete!: JQuery<HTMLElement>;
+    private $clonePrefix!: JQuery<HTMLElement>;
+    private $noteList!: JQuery<HTMLElement>;
+    private clonedNoteIds: string[] | null = null;
+
     constructor() {
         super();
-
-        this.clonedNoteIds = null;
     }
 
     doRender() {
@@ -66,7 +72,6 @@ export default class CloneToDialog extends BasicWidget {
 
             if (notePath) {
                 this.$widget.modal("hide");
-
                 this.cloneNotesTo(notePath);
             } else {
                 logError(t("clone_to.no_path_to_clone_to"));
@@ -76,9 +81,9 @@ export default class CloneToDialog extends BasicWidget {
         });
     }
 
-    async cloneNoteIdsToEvent({ noteIds }) {
+    async cloneNoteIdsToEvent({ noteIds }: EventData<"cloneNoteIdsTo">) {
         if (!noteIds || noteIds.length === 0) {
-            noteIds = [appContext.tabManager.getActiveContextNoteId()];
+            noteIds = [appContext.tabManager.getActiveContextNoteId() ?? ""];
         }
 
         this.clonedNoteIds = [];
@@ -90,14 +95,14 @@ export default class CloneToDialog extends BasicWidget {
         }
 
         utils.openDialog(this.$widget);
-
         this.$noteAutoComplete.val("").trigger("focus");
-
         this.$noteList.empty();
 
         for (const noteId of this.clonedNoteIds) {
             const note = await froca.getNote(noteId);
-
+            if (!note) {
+                continue;
+            }
             this.$noteList.append($("<li>").text(note.title));
         }
 
@@ -105,15 +110,29 @@ export default class CloneToDialog extends BasicWidget {
         noteAutocompleteService.showRecentNotes(this.$noteAutoComplete);
     }
 
-    async cloneNotesTo(notePath) {
+    async cloneNotesTo(notePath: string) {
         const { noteId, parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(notePath);
+        if (!noteId || !parentNoteId) {
+            return;
+        }
+
         const targetBranchId = await froca.getBranchId(parentNoteId, noteId);
+        if (!targetBranchId || !this.clonedNoteIds) {
+            return;
+        }
 
         for (const cloneNoteId of this.clonedNoteIds) {
-            await branchService.cloneNoteToBranch(cloneNoteId, targetBranchId, this.$clonePrefix.val());
+            await branchService.cloneNoteToBranch(cloneNoteId, targetBranchId, this.$clonePrefix.val() as string);
 
             const clonedNote = await froca.getNote(cloneNoteId);
-            const targetNote = await froca.getBranch(targetBranchId).getNote();
+            const targetBranch = froca.getBranch(targetBranchId);
+            if (!clonedNote || !targetBranch) {
+                continue;
+            }
+            const targetNote = await targetBranch.getNote();
+            if (!targetNote) {
+                continue;
+            }
 
             toastService.showMessage(t("clone_to.note_cloned", { clonedTitle: clonedNote.title, targetTitle: targetNote.title }));
         }