allow also deleting note when removing note from note relation

src/public/javascripts/dialogs/confirm.js

@@ -2,10 +2,15 @@ const $dialog = $("#confirm-dialog");
 const $confirmContent = $("#confirm-dialog-content");
 const $okButton = $("#confirm-dialog-ok-button");
 const $cancelButton = $("#confirm-dialog-cancel-button");
+const $custom = $("#confirm-dialog-custom");
+
+const DELETE_NOTE_BUTTON_ID = "confirm-dialog-delete-note";
 
 let resolve;
 
 function confirm(message) {
+    $custom.hide();
+
     glob.activeDialog = $dialog;
 
     $confirmContent.text(message);
@@ -15,6 +20,35 @@ function confirm(message) {
     return new Promise((res, rej) => { resolve = res; });
 }
 
+function confirmDeleteNoteBoxWithNote(title) {
+    glob.activeDialog = $dialog;
+
+    $confirmContent.text(`Are you sure you want to remove the note "${title}" from relation map?`);
+
+    $custom.empty()
+        .append("<br/>")
+        .append($("<div>").addClass("form-check")
+            .append($("<input>")
+                .attr("id", DELETE_NOTE_BUTTON_ID)
+                .attr("type", "checkbox")
+                .addClass("form-check-input"))
+            .append($("<label>")
+                .attr("for", DELETE_NOTE_BUTTON_ID)
+                .addClass("form-check-label")
+                .attr("style", "text-decoration: underline dotted black")
+                .attr("title", "If you don't check this, note will be only removed from relation map, but will stay as a note.")
+                .html("Also delete note")));
+    $custom.show();
+
+    $dialog.modal();
+
+    return new Promise((res, rej) => { resolve = res; });
+}
+
+function isDeleteNoteChecked() {
+    return $("#" + DELETE_NOTE_BUTTON_ID + ":checked").length > 0;
+}
+
 $dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
 
 $dialog.on("hidden.bs.modal", () => {
@@ -34,5 +68,7 @@ $cancelButton.click(() => doResolve(false));
 $okButton.click(() => doResolve(true));
 
 export default {
-    confirm
+    confirm,
+    confirmDeleteNoteBoxWithNote,
+    isDeleteNoteChecked
 }

src/public/javascripts/services/drag_and_drop.js

@@ -13,7 +13,7 @@ const dragAndDropSetup = {
         const selectedNodes = treeService.getSelectedNodes().map(node => {
             return {
                 noteId: node.data.noteId,
-                title: node.data.title
+                title: node.title
             }
         });
 

src/public/javascripts/services/note_detail_relation_map.js

@@ -382,15 +382,23 @@ $relationMapContainer.on("contextmenu", ".note-box", e => {
 
 async function noteContextMenuHandler(event, cmd) {
     const $noteBox = $(event.originalTarget).closest(".note-box");
+    const $title = $noteBox.find(".title a");
     const noteId = idToNoteId($noteBox.prop("id"));
 
     if (cmd === "remove") {
-        if (!await confirmDialog.confirm("Are you sure you want to remove the note from this diagram?")) {
+        if (!await confirmDialog.confirmDeleteNoteBoxWithNote($title.text())) {
             return;
         }
 
         jsPlumbInstance.remove(noteIdToId(noteId));
 
+        if (confirmDialog.isDeleteNoteChecked()) {
+            await server.remove("notes/" + noteId);
+
+            // to force it to disappear from the tree
+            treeService.reload();
+        }
+
         mapData.notes = mapData.notes.filter(note => note.noteId !== noteId);
 
         relations = relations.filter(relation => relation.sourceNoteId !== noteId && relation.targetNoteId !== noteId);
@@ -398,8 +406,10 @@ async function noteContextMenuHandler(event, cmd) {
         saveData();
     }
     else if (cmd === "edit-title") {
-        const $title = $noteBox.find(".title a");
-        const title = await promptDialog.ask({ message: "Enter new note title:", defaultValue: $title.text() });
+        const title = await promptDialog.ask({
+            message: "Enter new note title:",
+            defaultValue: $title.text()
+        });
 
         if (!title) {
             return;
@@ -471,7 +481,7 @@ async function refresh() {
 let clipboard = null;
 
 $createChildNote.click(async () => {
-    const title = await promptDialog.ask("Enter title of new note", "new note");
+    const title = await promptDialog.ask({ message: "Enter title of new note",  defaultValue: "new note" });
 
     if (!title.trim()) {
         return;
@@ -528,7 +538,7 @@ async function dropNoteOntoRelationMapHandler(ev) {
             continue;
         }
 
-        mapData.notes.push({id: note.noteId, x, y});
+        mapData.notes.push({noteId: note.noteId, x, y});
 
         if (x - startX > 1000) {
             x = startX;

src/routes/api/notes.js

@@ -66,6 +66,16 @@ async function updateNote(req) {
     await noteService.updateNote(noteId, note);
 }
 
+async function deleteNote(req) {
+    const noteId = req.params.noteId;
+
+    const note = await repository.getNote(noteId);
+
+    for (const branch of await note.getBranches()) {
+        await noteService.deleteNote(branch);
+    }
+}
+
 async function sortNotes(req) {
     const noteId = req.params.noteId;
 
@@ -165,6 +175,7 @@ async function changeTitle(req) {
 module.exports = {
     getNote,
     updateNote,
+    deleteNote,
     createNote,
     sortNotes,
     protectSubtree,

src/routes/routes.js

@@ -115,6 +115,7 @@ function register(app) {
 
     apiRoute(GET, '/api/notes/:noteId', notesApiRoute.getNote);
     apiRoute(PUT, '/api/notes/:noteId', notesApiRoute.updateNote);
+    apiRoute(DELETE, '/api/notes/:noteId', notesApiRoute.deleteNote);
     apiRoute(POST, '/api/notes/:parentNoteId/children', notesApiRoute.createNote);
     apiRoute(GET, '/api/notes/:parentNoteId/children', notesApiRoute.getChildren);
     apiRoute(PUT, '/api/notes/:noteId/sort', notesApiRoute.sortNotes);

src/views/dialogs/confirm.ejs

@@ -10,6 +10,8 @@
             </div>
             <div class="modal-body">
                 <div id="confirm-dialog-content"></div>
+
+                <div id="confirm-dialog-custom"></div>
             </div>
             <div class="modal-footer">
                 <button class="btn btn-default btn-sm" id="confirm-dialog-cancel-button">Cancel</button>