separate cloning dialog

src/public/javascripts/dialogs/add_link.js

@@ -6,7 +6,7 @@ import utils from "../services/utils.js";
 
 const $dialog = $("#add-link-dialog");
 const $form = $("#add-link-form");
-const $autoComplete = $("#note-autocomplete");
+const $autoComplete = $("#add-link-note-autocomplete");
 const $linkTitle = $("#link-title");
 const $addLinkTitleFormGroup = $("#add-link-title-form-group");
 

src/public/javascripts/dialogs/clone_to.js

@@ -0,0 +1,55 @@
+import noteAutocompleteService from "../services/note_autocomplete.js";
+import utils from "../services/utils.js";
+import cloningService from "../services/cloning.js";
+import treeUtils from "../services/tree_utils.js";
+import noteDetailService from "../services/note_detail.js";
+import toastService from "../services/toast.js";
+import treeCache from "../services/tree_cache.js";
+
+const $dialog = $("#clone-to-dialog");
+const $form = $("#clone-to-form");
+const $noteAutoComplete = $("#clone-to-note-autocomplete");
+const $clonePrefix = $("#clone-prefix");
+
+let clonedNoteId;
+
+export async function showDialog(noteId) {
+    clonedNoteId = noteId || noteDetailService.getActiveTabNoteId();
+
+    if (!clonedNoteId) {
+        return;
+    }
+
+    utils.closeActiveDialog();
+
+    glob.activeDialog = $dialog;
+
+    $dialog.modal();
+
+    $noteAutoComplete.val('').focus();
+
+    noteAutocompleteService.initNoteAutocomplete($noteAutoComplete);
+    noteAutocompleteService.showRecentNotes($noteAutoComplete);
+}
+
+$form.submit(() => {
+    const notePath = $noteAutoComplete.getSelectedPath();
+
+    if (notePath) {
+        $dialog.modal('hide');
+
+        const targetNoteId = treeUtils.getNoteIdFromNotePath(notePath);
+
+        cloningService.cloneNoteTo(clonedNoteId, targetNoteId, $clonePrefix.val()).then(async () => {
+            const clonedNote = await treeCache.getNote(clonedNoteId);
+            const targetNote = await treeCache.getNote(targetNoteId);
+
+            toastService.showMessage(`Note "${clonedNote.title}" has been cloned into ${targetNote.title}`);
+        });
+    }
+    else {
+        console.error("No path to clone to.");
+    }
+
+    return false;
+});

src/public/javascripts/services/entrypoints.js

@@ -16,6 +16,7 @@ const HELP = "../dialogs/help.js";
 const NOTE_INFO = "../dialogs/note_info.js";
 const ABOUT = "../dialogs/about.js";
 const LINK_MAP = "../dialogs/link_map.js";
+const CLONE_TO = "../dialogs/clone_to.js";
 
 function registerEntrypoints() {
     // hot keys are active also inside inputs and content editables
@@ -185,6 +186,7 @@ function registerEntrypoints() {
         return false;
     });
 
+    utils.bindGlobalShortcut('ctrl+e', () => import(CLONE_TO).then(d => d.showDialog()));
 }
 
 export default {

src/public/javascripts/services/note_autocomplete.js

@@ -57,7 +57,7 @@ function initNoteAutocomplete($el, options) {
             .prop("title", "Show recent notes");
 
     const $goToSelectedNoteButton = $("<a>")
-        .addClass("input-group-text go-to-selected-note-button bx bx-right-arrow")
+        .addClass("input-group-text go-to-selected-note-button bx bx-arrow-to-right")
         .attr("data-action", "note");
 
     const $sideButtons = $("<div>")

src/public/stylesheets/style.css

@@ -487,6 +487,10 @@ pre:not(.CodeMirror-line) {
     cursor: pointer;
 }
 
+.show-recent-notes-button, .input-clearer-button, .go-to-selected-note-button {
+    padding-top: 8px;
+}
+
 .show-recent-notes-button {
     cursor: pointer;
     font-size: 1.3em;

src/views/desktop.ejs

@@ -175,6 +175,7 @@
     <% include dialogs/help.ejs %>
     <% include dialogs/note_info.ejs %>
     <% include dialogs/link_map.ejs %>
+    <% include dialogs/clone_to.ejs %>
 </div>
 
 <script type="text/javascript">

src/views/dialogs/add_link.ejs

@@ -13,10 +13,10 @@
             <form id="add-link-form">
                 <div class="modal-body">
                     <div class="form-group">
-                        <label for="note-autocomplete">Note</label>
+                        <label for="add-link-note-autocomplete">Note</label>
 
                         <div class="input-group">
-                            <input id="note-autocomplete" class="form-control" placeholder="search for note by its name">
+                            <input id="add-link-note-autocomplete" class="form-control" placeholder="search for note by its name">
                         </div>
                     </div>
 
@@ -25,7 +25,7 @@
                         <input id="link-title" class="form-control" style="width: 100%;">
                     </div>
                 </div>
-                <div class="modal-footer" style="display: flex; justify-content: space-between;">
+                <div class="modal-footer">
                     <button type="submit" class="btn btn-primary">Add note link <kbd>enter</kbd></button>
                 </div>
             </form>

src/views/dialogs/clone_to.ejs

@@ -0,0 +1,34 @@
+<div id="clone-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">Clone note to ...</h5>
+
+                <button type="button" class="help-button" title="Help on links" data-help-page="Cloning-notes">?</button>
+
+                <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="clone-to-form">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="clone-to-note-autocomplete">Target parent note</label>
+
+                        <div class="input-group">
+                            <input id="clone-to-note-autocomplete" class="form-control" placeholder="search for note by its name">
+                        </div>
+                    </div>
+
+                    <div class="form-group" title="Cloned note will be shown in note tree with given prefix">
+                        <label for="clone-prefix">Prefix (optional)</label>
+                        <input id="clone-prefix" class="form-control" style="width: 100%;">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">Clone to selected note <kbd>enter</kbd></button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>