From 19a07c699cc71c0cb8670099ccdad8c0b3e1b5ed Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Wed, 14 Nov 2018 19:03:55 +0100
Subject: [PATCH] added BS dialog for confirm

---
 src/public/javascripts/dialogs/confirm.js     | 38 +++++++++++++++++++
 .../services/note_detail_relation_map.js      |  9 +++--
 src/views/dialogs/confirm.ejs                 | 23 +++++++++++
 src/views/dialogs/info.ejs                    |  2 +-
 src/views/index.ejs                           |  1 +
 5 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/public/javascripts/dialogs/confirm.js
 create mode 100644 src/views/dialogs/confirm.ejs

diff --git a/src/public/javascripts/dialogs/confirm.js b/src/public/javascripts/dialogs/confirm.js
new file mode 100644
index 000000000..cadf3cf37
--- /dev/null
+++ b/src/public/javascripts/dialogs/confirm.js
@@ -0,0 +1,38 @@
+const $dialog = $("#confirm-dialog");
+const $confirmContent = $("#confirm-dialog-content");
+const $okButton = $("#confirm-dialog-ok-button");
+const $cancelButton = $("#confirm-dialog-cancel-button");
+
+let resolve;
+
+function confirm(message) {
+    glob.activeDialog = $dialog;
+
+    $confirmContent.text(message);
+
+    $dialog.modal();
+
+    return new Promise((res, rej) => { resolve = res; });
+}
+
+$dialog.on('shown.bs.modal', () => $okButton.trigger("focus"));
+
+$dialog.on("hidden.bs.modal", () => {
+    if (resolve) {
+        resolve(false);
+    }
+});
+
+function doResolve(ret) {
+    resolve(ret);
+    resolve = null;
+
+    $dialog.modal("hide");
+}
+
+$cancelButton.click(() => doResolve(false));
+$okButton.click(() => doResolve(true));
+
+export default {
+    confirm
+}
\ No newline at end of file
diff --git a/src/public/javascripts/services/note_detail_relation_map.js b/src/public/javascripts/services/note_detail_relation_map.js
index 457e67340..bbda50139 100644
--- a/src/public/javascripts/services/note_detail_relation_map.js
+++ b/src/public/javascripts/services/note_detail_relation_map.js
@@ -8,6 +8,7 @@ import infoService from "./info.js";
 import attributeAutocompleteService from "./attribute_autocomplete.js";
 import promptDialog from "../dialogs/prompt.js";
 import infoDialog from "../dialogs/info.js";
+import confirmDialog from "../dialogs/confirm.js";
 
 const $component = $("#note-detail-relation-map");
 const $relationMapContainer = $("#relation-map-container");
@@ -293,7 +294,7 @@ function connectionContextMenuHandler(connection, event) {
 
     contextMenuWidget.initContextMenu(event, contextMenuItems, async (event, cmd) => {
         if (cmd === 'remove') {
-            if (!confirm("Are you sure you want to remove the relation?")) {
+            if (!await confirmDialog.confirm("Are you sure you want to remove the relation?")) {
                 return;
             }
 
@@ -381,14 +382,14 @@ $relationMapContainer.on("contextmenu", ".note-box", e => {
 
 async function noteContextMenuHandler(event, cmd) {
     const $noteBox = $(event.originalTarget).closest(".note-box");
-    const noteId = $noteBox.prop("id");
+    const noteId = idToNoteId($noteBox.prop("id"));
 
     if (cmd === "remove") {
-        if (!confirm("Are you sure you want to remove the note from this diagram?")) {
+        if (!await confirmDialog.confirm("Are you sure you want to remove the note from this diagram?")) {
             return;
         }
 
-        jsPlumbInstance.remove(noteId);
+        jsPlumbInstance.remove(noteIdToId(noteId));
 
         mapData.notes = mapData.notes.filter(note => note.noteId !== noteId);
 
diff --git a/src/views/dialogs/confirm.ejs b/src/views/dialogs/confirm.ejs
new file mode 100644
index 000000000..f3fa733b8
--- /dev/null
+++ b/src/views/dialogs/confirm.ejs
@@ -0,0 +1,23 @@
+<div id="confirm-dialog" class="modal mx-auto" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title mr-auto">Confirmation</h5>
+
+                <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="confirm-dialog-content"></div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-default btn-sm" id="confirm-dialog-cancel-button">Cancel</button>
+
+                &nbsp;
+
+                <button class="btn btn-primary btn-sm" id="confirm-dialog-ok-button">OK</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/views/dialogs/info.ejs b/src/views/dialogs/info.ejs
index 64bfa6696..47f3172f4 100644
--- a/src/views/dialogs/info.ejs
+++ b/src/views/dialogs/info.ejs
@@ -12,7 +12,7 @@
                 <div id="info-dialog-content"></div>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-primary btn-sm" id="info-dialog-ok-button">OK <kbd>enter</kbd></button>
+                <button class="btn btn-primary btn-sm" id="info-dialog-ok-button">OK</button>
             </div>
         </div>
     </div>
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 49383918e..4bfb68650 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -184,6 +184,7 @@
       <% include dialogs/sql_console.ejs %>
       <% include dialogs/info.ejs %>
       <% include dialogs/prompt.ejs %>
+      <% include dialogs/confirm.ejs %>
     </div>
 
     <script type="text/javascript">