delete notes dialog WIP

src/public/app/dialogs/delete_notes.js

@@ -1,29 +1,30 @@
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 import linkService from "../services/link.js";
+import utils from "../services/utils.js";
 
 const $dialog = $("#delete-notes-dialog");
-const $confirmContent = $("#delete-notes-dialog-content");
 const $okButton = $("#delete-notes-dialog-ok-button");
 const $cancelButton = $("#delete-notes-dialog-cancel-button");
-const $custom = $("#delete-notes-dialog-custom");
 const $deleteNotesList = $("#delete-notes-list");
 const $brokenRelationsList = $("#broken-relations-list");
 const $deletedNotesCount = $("#deleted-notes-count");
 const $noNoteToDeleteWrapper = $("#no-note-to-delete-wrapper");
 const $deleteNotesListWrapper = $("#delete-notes-list-wrapper");
 const $brokenRelationsListWrapper = $("#broken-relations-wrapper");
+const $brokenRelationsCount = $("#broke-relations-count");
 
 const DELETE_NOTE_BUTTON_ID = "delete-notes-dialog-delete-note";
 
 let $originallyFocused; // element focused before the dialog was opened so we can return to it afterwards
 
-export async function showDialog(branchIdsToDelete) {
-    $originallyFocused = $(':focus');
+let branchIds = null;
+let resolve = null;
 
-    $custom.hide();
+export async function showDialog(branchIdsToDelete) {
+    branchIds = branchIdsToDelete;
 
-    glob.activeDialog = $dialog;
+    $originallyFocused = $(':focus');
 
     const response = await server.post('delete-notes-preview', {branchIdsToDelete});
 
@@ -44,6 +45,7 @@ export async function showDialog(branchIdsToDelete) {
     $deletedNotesCount.text(response.noteIdsToBeDeleted.length);
 
     $brokenRelationsListWrapper.toggle(response.brokenRelations.length > 0);
+    $brokenRelationsCount.text(response.brokenRelations.length);
 
     await treeCache.getNotes(response.brokenRelations.map(br => br.noteId));
 
@@ -57,9 +59,9 @@ export async function showDialog(branchIdsToDelete) {
         );
     }
 
-    $dialog.modal();
+    utils.openDialog($dialog);
 
-    return new Promise((res, rej) => { resolve = res; });
+    return new Promise((res, rej) => resolve = res);
 }
 
 export function isDeleteNoteChecked() {
@@ -68,23 +70,17 @@ export function isDeleteNoteChecked() {
 
 $dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
 
-$dialog.on("hidden.bs.modal", () => {
-    if (resolve) {
-        resolve(false);
-    }
+$cancelButton.on('click', () => {
+    utils.closeActiveDialog();
 
-    if ($originallyFocused) {
-        $originallyFocused.trigger('focus');
-        $originallyFocused = null;
-    }
+    resolve({proceed: false});
 });
 
-function doResolve(ret) {
-    resolve(ret);
-    resolve = null;
-
-    $dialog.modal("hide");
-}
+$okButton.on('click', () => {
+    utils.closeActiveDialog();
 
-$cancelButton.on('click', () => doResolve(false));
-$okButton.on('click', () => doResolve(true));
+    resolve({
+        proceed: true,
+        deleteClones: false
+    });
+});

src/public/app/services/branches.js

@@ -75,31 +75,12 @@ async function deleteNotes(branchIdsToDelete) {
     }
 
     const deleteNotesDialog = await import("../dialogs/delete_notes.js");
-    deleteNotesDialog.showDialog(branchIdsToDelete);
+    const {proceed, deleteClones} = await deleteNotesDialog.showDialog(branchIdsToDelete);
 
-    const $deleteClonesCheckbox = $('<div class="form-check">')
-        .append($('<input type="checkbox" class="form-check-input" id="delete-clones-checkbox">'))
-        .append($('<label for="delete-clones-checkbox">')
-                    .text("Also delete all note clones")
-                    .attr("title", "all clones of selected notes will be deleted and as such the whole note will be deleted."));
-
-    const $nodeTitles = $("<ul>");
-
-    for (const branchId of branchIdsToDelete) {
-        const note = await treeCache.getBranch(branchId).getNote();
-
-        $nodeTitles.append($("<li>").text(note.title));
+    if (!proceed) {
+        return false;
     }
 
-    const $confirmText = $("<div>")
-        .append($("<p>").text('This will delete the following notes and their sub-notes: '))
-        .append($nodeTitles)
-        .append($deleteClonesCheckbox);
-
-    return false;
-
-    const deleteClones = $deleteClonesCheckbox.find("input").is(":checked");
-
     const taskId = utils.randomString(10);
 
     let counter = 0;

src/routes/api/notes.js

@@ -256,7 +256,7 @@ function getDeleteNotesPreview(req) {
 
     let brokenRelations = [];
 
-    if (noteIdsToBeDeleted.length > 0) {
+    if (noteIdsToBeDeleted.size > 0) {
         sql.fillParamList(noteIdsToBeDeleted);
 
         brokenRelations = sql.getRows(`

src/views/dialogs/delete_notes.ejs

@@ -12,19 +12,19 @@
                 <div id="delete-notes-list-wrapper">
                     <h5>Following notes will be deleted (<span id="deleted-notes-count"></span>)</h5>
 
-                    <ul id="delete-notes-list" style="max-height: 400px; overflow: auto;"></ul>
+                    <ul id="delete-notes-list" style="max-height: 300px; overflow: auto;"></ul>
                 </div>
 
-                <div id="no-note-to-delete-wrapper">
-                    <strong>No note will be deleted (only clones).</strong>
+                <div id="no-note-to-delete-wrapper" class="alert alert-info">
+                    No note will be deleted (only clones).
                 </div>
 
                 <div id="broken-relations-wrapper">
-                    <h5>Broken relations</h5>
+                    <div class="alert alert-danger">
+                        <h5>Following relations will be broken and deleted (<span id="broke-relations-count"></span>)</h5>
 
-                    Below can be seen relations which will be broken after notes mentioned above are deleted.
-
-                    <ul id="broken-relations-list" style="max-height: 400px; overflow: auto;"></ul>
+                        <ul id="broken-relations-list" style="max-height: 300px; overflow: auto;"></ul>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">