recent notes and insert link now include whole note path

src/templates/app.html

@@ -97,7 +97,7 @@
         </select>
     </div>
 
-    <div id="insertLinkDialog" title="Recent notes" style="display: none;">
+    <div id="insertLinkDialog" title="Insert link" style="display: none;">
       <form id="insertLinkForm">
         <div class="form-group">
           <label for="noteAutocomplete">Link to note</label>
@@ -109,7 +109,7 @@
           <input id="linkTitle" style="width: 100%;">
         </div>
 
-        <button id="addLinkButton" type="submit" class="btn btn-sm">Add link</button>
+        <button id="addLinkButton" class="btn btn-sm">Add link</button>
       </form>
     </div>
 

static/js/init.js

@@ -29,7 +29,8 @@ $(document).bind('keydown', 'alt+h', function() {
 
 $(document).bind('keydown', 'alt+q', function() {
     $("#recentNotesDialog").dialog({
-        modal: true
+        modal: true,
+        width: 500
     });
 
     let recentNotesSelectBox = $('#recentNotesSelectBox');
@@ -40,7 +41,7 @@ $(document).bind('keydown', 'alt+q', function() {
     let recNotes = recentNotes.filter(note => note !== globalNote.detail.note_id);
 
     $.each(recNotes, function(key, valueNoteId) {
-        let noteTitle = globalNoteNames[valueNoteId];
+        let noteTitle = getFullName(valueNoteId);
 
         if (!noteTitle) {
             return;
@@ -62,7 +63,7 @@ $(document).bind('keydown', 'alt+q', function() {
 function setActiveNoteBasedOnRecentNotes() {
     let noteId = $("#recentNotesSelectBox option:selected").val();
 
-    $("#tree").fancytree('getNodeByKey', noteId).setActive();
+    getNodeByKey(noteId).setActive();
 
     $("#recentNotesDialog").dialog('close');
 }
@@ -90,12 +91,22 @@ $(document).on('click', 'div.popover-content a', function(e) {
     if (noteIdMatch !== null) {
         const noteId = noteIdMatch[1];
 
-        $("#tree").fancytree('getNodeByKey', noteId).setActive();
+        getNodeByKey(noteId).setActive();
 
         e.preventDefault();
     }
 });
 
+function getNodeIdFromLabel(label) {
+    const noteIdMatch = / \(([A-Za-z0-9]{22})\)/.exec(label);
+
+    if (noteIdMatch !== null) {
+        return noteIdMatch[1];
+    }
+
+    return null;
+}
+
 $(document).bind('keydown', 'alt+l', function() {
     var range = $('#noteDetail').summernote('createRange');
     console.log("range:", range);
@@ -107,43 +118,52 @@ $(document).bind('keydown', 'alt+l', function() {
     noteDetail.summernote('editor.saveRange');
 
     $("#insertLinkDialog").dialog({
-        modal: true
+        modal: true,
+        width: 500
     });
 
     let autocompleteItems = [];
 
     for (let noteId in globalNoteNames) {
+        let fullName = getFullName(noteId);
+
         autocompleteItems.push({
-            value: globalNoteNames[noteId] + " (" + noteId + ")",
+            value: fullName + " (" + noteId + ")",
-            label: globalNoteNames[noteId]
+            label: fullName
         });
     }
 
+    function setDefaultLinkTitle() {
+        const val = $("#noteAutocomplete").val();
+        const noteId = getNodeIdFromLabel(val);
+
+        if (noteId) {
+            const note = getNodeByKey(noteId);
+            let noteTitle = note.title;
+
+            if (noteTitle.endsWith(" (clone)")) {
+                noteTitle = noteTitle.substr(0, noteTitle.length - 8);
+            }
+
+            $("#linkTitle").val(noteTitle);
+        }
+    }
+
     $("#noteAutocomplete").autocomplete({
         source: autocompleteItems,
         minLength: 0,
-        change: function() {
+        change: setDefaultLinkTitle,
-            let val = $("#noteAutocomplete").val();
+        focus: setDefaultLinkTitle
-
-            val = val.replace(/ \([A-Za-z0-9]{22}\)/, "");
-
-            $("#linkTitle").val(val);
-        },
-        focus: function(event, ui) {
-            $("#linkTitle").val(ui.item.label);
-        }
     });
 });
 
 $("#insertLinkForm").submit(function addLink() {
     let val = $("#noteAutocomplete").val();
 
-    const noteIdMatch = / \(([A-Za-z0-9]{22})\)/.exec(val);
+    const noteId = getNodeIdFromLabel(val);
 
-    if (noteIdMatch !== null) {
+    if (noteId) {
-        const noteId = noteIdMatch[1];
         const linkTitle = $("#linkTitle").val();
-
         const noteDetail = $('#noteDetail');
 
         $("#insertLinkDialog").dialog("close");

static/js/note.js

@@ -38,7 +38,7 @@ function saveNoteIfChanged(callback) {
 
     let title = $('#noteTitle').val();
 
-    $("#tree").fancytree('getNodeByKey', note.detail.note_id).setTitle(title);
+    getNodeByKey(note.detail.note_id).setTitle(title);
 
     note.detail.note_title = title;
 

static/js/tree.js

@@ -104,6 +104,28 @@ const keybindings = {
 
 const globalNoteNames = {};
 
+let globalTree;
+
+function getNodeByKey(noteId) {
+    return globalTree.fancytree('getNodeByKey', noteId);
+}
+
+function getFullName(noteId) {
+    let note = getNodeByKey(noteId);
+    const path = [];
+
+    while (note) {
+        path.push(note.title);
+
+        note = note.getParent();
+    }
+
+    // remove "root" element
+    path.pop();
+
+    return path.reverse().join(" > ");
+}
+
 $(function(){
     $.get(baseUrl + 'tree').then(resp => {
         const notes = resp.notes;
@@ -145,7 +167,8 @@ $(function(){
             });
         }
 
-        $("#tree").fancytree({
+        globalTree = $("#tree");
+        globalTree.fancytree({
             autoScroll: true,
             extensions: ["hotkeys", "filter"],
             source: notes,