delete notes dialog provides checkbox to switch between delete all clones and normal delete

src/public/app/dialogs/delete_notes.js

@@ -13,20 +13,16 @@ const $noNoteToDeleteWrapper = $("#no-note-to-delete-wrapper");
 const $deleteNotesListWrapper = $("#delete-notes-list-wrapper");
 const $brokenRelationsListWrapper = $("#broken-relations-wrapper");
 const $brokenRelationsCount = $("#broke-relations-count");
-
+const $deleteAllClones = $("#delete-all-clones");
-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
 
 let branchIds = null;
 let resolve = null;
 
-export async function showDialog(branchIdsToDelete) {
+async function renderDeletePreview() {
-    branchIds = branchIdsToDelete;
+    const response = await server.post('delete-notes-preview', {
-
+        branchIdsToDelete: branchIds,
-    $originallyFocused = $(':focus');
+        deleteAllClones: isDeleteAllClonesChecked()
-
+    });
-    const response = await server.post('delete-notes-preview', {branchIdsToDelete});
 
     $deleteNotesList.empty();
     $brokenRelationsList.empty();
@@ -58,14 +54,20 @@ export async function showDialog(branchIdsToDelete) {
                 .append(await linkService.createNoteLink(attr.noteId))
         );
     }
+}
+
+export async function showDialog(branchIdsToDelete) {
+    branchIds = branchIdsToDelete;
+
+    await renderDeletePreview();
 
     utils.openDialog($dialog);
 
     return new Promise((res, rej) => resolve = res);
 }
 
-export function isDeleteNoteChecked() {
+export function isDeleteAllClonesChecked() {
-    return $("#" + DELETE_NOTE_BUTTON_ID + ":checked").length > 0;
+    return $deleteAllClones.is(":checked");
 }
 
 $dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
@@ -81,6 +83,8 @@ $okButton.on('click', () => {
 
     resolve({
         proceed: true,
-        deleteClones: false
+        deleteAllClones: isDeleteAllClonesChecked()
     });
 });
+
+$deleteAllClones.on('click', () => renderDeletePreview());

src/public/app/services/branches.js

@@ -75,7 +75,7 @@ async function deleteNotes(branchIdsToDelete) {
     }
 
     const deleteNotesDialog = await import("../dialogs/delete_notes.js");
-    const {proceed, deleteClones} = await deleteNotesDialog.showDialog(branchIdsToDelete);
+    const {proceed, deleteAllClones} = await deleteNotesDialog.showDialog(branchIdsToDelete);
 
     if (!proceed) {
         return false;
@@ -93,7 +93,7 @@ async function deleteNotes(branchIdsToDelete) {
 
         const branch = treeCache.getBranch(branchIdToDelete);
 
-        if (deleteClones) {
+        if (deleteAllClones) {
             await server.remove(`notes/${branch.noteId}` + query);
         }
         else {

src/routes/api/notes.js

@@ -222,7 +222,7 @@ function eraseDeletedNotesNow() {
 }
 
 function getDeleteNotesPreview(req) {
-    const {branchIdsToDelete} = req.body;
+    const {branchIdsToDelete, deleteAllClones} = req.body;
 
     const noteIdsToBeDeleted = new Set();
     const branchCountToDelete = {}; // noteId => count (integer)
@@ -233,7 +233,7 @@ function getDeleteNotesPreview(req) {
 
         const note = branch.getNote();
 
-        if (note.getBranches().length <= branchCountToDelete[branch.branchId]) {
+        if (deleteAllClones || note.getBranches().length <= branchCountToDelete[branch.branchId]) {
             noteIdsToBeDeleted.add(note.noteId);
 
             for (const childBranch of note.getChildBranches()) {

src/views/dialogs/delete_notes.ejs

@@ -2,17 +2,25 @@
     <div class="modal-dialog modal-dialog-scrollable modal-xl" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title mr-auto">Delete notes</h5>
+                <h4 class="modal-title mr-auto">Delete notes preview</h4>
 
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <div id="delete-notes-list-wrapper">
+                <div class="checkbox">
-                    <h5>Following notes will be deleted (<span id="deleted-notes-count"></span>)</h5>
+                    <label>
+                        <input id="delete-all-clones" value="1" type="checkbox">
 
-                    <ul id="delete-notes-list" style="max-height: 300px; overflow: auto;"></ul>
+                        delete also all clones
+                    </label>
+                </div>
+
+                <div id="delete-notes-list-wrapper">
+                    <h4>Following notes will be deleted (<span id="deleted-notes-count"></span>)</h4>
+
+                    <ul id="delete-notes-list" style="max-height: 200px; overflow: auto;"></ul>
                 </div>
 
                 <div id="no-note-to-delete-wrapper" class="alert alert-info">
@@ -21,9 +29,9 @@
 
                 <div id="broken-relations-wrapper">
                     <div class="alert alert-danger">
-                        <h5>Following relations will be broken and deleted (<span id="broke-relations-count"></span>)</h5>
+                        <h4>Following relations will be broken and deleted (<span id="broke-relations-count"></span>)</h4>
 
-                        <ul id="broken-relations-list" style="max-height: 300px; overflow: auto;"></ul>
+                        <ul id="broken-relations-list" style="max-height: 200px; overflow: auto;"></ul>
                     </div>
                 </div>
             </div>