converted move to dialog to new pattern

src/public/app/dialogs/move_to.js

@@ -1,58 +0,0 @@
-import noteAutocompleteService from "../services/note_autocomplete.js";
-import utils from "../services/utils.js";
-import toastService from "../services/toast.js";
-import froca from "../services/froca.js";
-import branchService from "../services/branches.js";
-import treeService from "../services/tree.js";
-
-const $dialog = $("#move-to-dialog");
-const $form = $("#move-to-form");
-const $noteAutoComplete = $("#move-to-note-autocomplete");
-const $noteList = $("#move-to-note-list");
-
-let movedBranchIds;
-
-export async function showDialog(branchIds) {
-    movedBranchIds = branchIds;
-
-    utils.openDialog($dialog);
-
-    $noteAutoComplete.val('').trigger('focus');
-
-    $noteList.empty();
-
-    for (const branchId of movedBranchIds) {
-        const branch = froca.getBranch(branchId);
-        const note = await froca.getNote(branch.noteId);
-
-        $noteList.append($("<li>").text(note.title));
-    }
-
-    noteAutocompleteService.initNoteAutocomplete($noteAutoComplete);
-    noteAutocompleteService.showRecentNotes($noteAutoComplete);
-}
-
-async function moveNotesTo(parentBranchId) {
-    await branchService.moveToParentNote(movedBranchIds, parentBranchId);
-
-    const parentBranch = froca.getBranch(parentBranchId);
-    const parentNote = await parentBranch.getNote();
-
-    toastService.showMessage(`Selected notes have been moved into ${parentNote.title}`);
-}
-
-$form.on('submit', () => {
-    const notePath = $noteAutoComplete.getSelectedNotePath();
-
-    if (notePath) {
-        $dialog.modal('hide');
-
-        const {noteId, parentNoteId} = treeService.getNoteIdAndParentIdFromNotePath(notePath);
-        froca.getBranchId(parentNoteId, noteId).then(branchId => moveNotesTo(branchId));
-    }
-    else {
-        logError("No path to move to.");
-    }
-
-    return false;
-});

src/public/app/layouts/desktop_layout.js

@@ -64,6 +64,7 @@ import NoteTypeChooserDialog from "../widgets/dialogs/note_type_chooser.js";
 import JumpToNoteDialog from "../widgets/dialogs/jump_to_note.js";
 import AddLinkDialog from "../widgets/dialogs/add_link.js";
 import CloneToDialog from "../widgets/dialogs/clone_to.js";
+import MoveToDialog from "../widgets/dialogs/move_to.js";
 
 export default class DesktopLayout {
     constructor(customWidgets) {
@@ -202,6 +203,7 @@ export default class DesktopLayout {
             .child(new NoteTypeChooserDialog())
             .child(new JumpToNoteDialog())
             .child(new AddLinkDialog())
-            .child(new CloneToDialog());
+            .child(new CloneToDialog())
+            .child(new MoveToDialog());
     }
 }

src/public/app/services/root_command_executor.js

@@ -23,11 +23,6 @@ export default class RootCommandExecutor extends Component {
         appContext.triggerEvent("readOnlyTemporarilyDisabled", { noteContext });
     }
 
-    async moveBranchIdsToCommand({branchIds}) {
-        const d = await import("../dialogs/move_to.js");
-        d.showDialog(branchIds);
-    }
-
     showOptionsCommand({openTab}) {
         import("../dialogs/options.js").then(d => d.showDialog(openTab));
     }

src/public/app/widgets/dialogs/move_to.js

@@ -0,0 +1,102 @@
+import noteAutocompleteService from "../../services/note_autocomplete.js";
+import utils from "../../services/utils.js";
+import toastService from "../../services/toast.js";
+import froca from "../../services/froca.js";
+import branchService from "../../services/branches.js";
+import treeService from "../../services/tree.js";
+import BasicWidget from "../basic_widget.js";
+
+const TPL = `
+<div class="move-to-dialog modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Move notes to ...</h5>
+                
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form class="move-to-form">
+                <div class="modal-body">
+                    <h5>Notes to move</h5>
+
+                    <ul class="move-to-note-list" style="max-height: 200px; overflow: auto;"></ul>
+
+                    <div class="form-group">
+                        <label style="width: 100%">
+                            Target parent note
+                            <div class="input-group">
+                                <input class="move-to-note-autocomplete form-control" placeholder="search for note by its name">
+                            </div>
+                        </label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">Move to selected note <kbd>enter</kbd></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>`;
+
+export default class MoveToDialog extends BasicWidget {
+    constructor() {
+        super();
+
+        this.movedBranchIds = null;
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$dialog = this.$widget.find(".move-to-dialog");
+        this.$form = this.$widget.find(".move-to-form");
+        this.$noteAutoComplete = this.$widget.find(".move-to-note-autocomplete");
+        this.$noteList = this.$widget.find(".move-to-note-list");
+
+        this.$form.on('submit', () => {
+            const notePath = this.$noteAutoComplete.getSelectedNotePath();
+
+            if (notePath) {
+                this.$widget.modal('hide');
+
+                const {noteId, parentNoteId} = treeService.getNoteIdAndParentIdFromNotePath(notePath);
+                froca.getBranchId(parentNoteId, noteId).then(branchId => this.moveNotesTo(branchId));
+            }
+            else {
+                logError("No path to move to.");
+            }
+
+            return false;
+        });
+    }
+
+    async moveBranchIdsToEvent({branchIds}) {
+        this.movedBranchIds = branchIds;
+
+        utils.openDialog(this.$widget);
+
+        this.$noteAutoComplete.val('').trigger('focus');
+
+        this.$noteList.empty();
+
+        for (const branchId of this.movedBranchIds) {
+            const branch = froca.getBranch(branchId);
+            const note = await froca.getNote(branch.noteId);
+
+            this.$noteList.append($("<li>").text(note.title));
+        }
+
+        noteAutocompleteService.initNoteAutocomplete(this.$noteAutoComplete);
+        noteAutocompleteService.showRecentNotes(this.$noteAutoComplete);
+    }
+
+    async moveNotesTo(parentBranchId) {
+        await branchService.moveToParentNote(this.movedBranchIds, parentBranchId);
+
+        const parentBranch = froca.getBranch(parentBranchId);
+        const parentNote = await parentBranch.getNote();
+
+        toastService.showMessage(`Selected notes have been moved into ${parentNote.title}`);
+    }
+}

src/views/desktop.ejs

@@ -26,7 +26,6 @@
 <%- include('dialogs/info.ejs') %>
 <%- include('dialogs/prompt.ejs') %>
 <%- include('dialogs/confirm.ejs') %>
-<%- include('dialogs/move_to.ejs') %>
 <%- include('dialogs/delete_notes.ejs') %>
 
 <script type="text/javascript">

src/views/dialogs/move_to.ejs

@@ -1,31 +0,0 @@
-<div id="move-to-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title mr-auto">Move notes to ...</h5>
-                
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-left: 0 !important;">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <form id="move-to-form">
-                <div class="modal-body">
-                    <h5>Notes to move</h5>
-
-                    <ul id="move-to-note-list" style="max-height: 200px; overflow: auto;"></ul>
-
-                    <div class="form-group">
-                        <label for="move-to-note-autocomplete">Target parent note</label>
-
-                        <div class="input-group">
-                            <input id="move-to-note-autocomplete" class="form-control" placeholder="search for note by its name">
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary">Move to selected note <kbd>enter</kbd></button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>