promoted relation attributes now work correctly, refactoring of note autocomplete code

src/public/javascripts/dialogs/attributes.js

@@ -3,6 +3,7 @@ import server from '../services/server.js';
 import infoService from "../services/info.js";
 import treeUtils from "../services/tree_utils.js";
 import linkService from "../services/link.js";
+import noteAutocompleteService from "../services/note_autocomplete.js";
 
 const $dialog = $("#attributes-dialog");
 const $saveAttributesButton = $("#save-attributes-button");
@@ -306,49 +307,6 @@ $dialog.on('focus', '.label-value', async function (e) {
     $(this).autocomplete("search", $(this).val());
 });
 
-async function initNoteAutocomplete($el) {
-    if (!$el.hasClass("ui-autocomplete-input")) {
-        await $el.autocomplete({
-            source: async function (request, response) {
-                const result = await server.get('autocomplete?query=' + encodeURIComponent(request.term));
-
-                if (result.length > 0) {
-                    response(result.map(row => {
-                        return {
-                            label: row.label,
-                            value: row.label + ' (' + row.value + ')'
-                        }
-                    }));
-                }
-                else {
-                    response([{
-                        label: "No results",
-                        value: "No results"
-                    }]);
-                }
-            },
-            minLength: 0,
-            select: function (event, ui) {
-                if (ui.item.value === 'No results') {
-                    return false;
-                }
-            }
-        });
-    }
-}
-
-$dialog.on('focus', '.relation-target-note-id', async function () {
-    await initNoteAutocomplete($(this));
-});
-
-$dialog.on('click', '.relations-show-recent-notes', async function () {
-    const $autocomplete = $(this).parent().find('.relation-target-note-id');
-
-    await initNoteAutocomplete($autocomplete);
-
-    $autocomplete.autocomplete("search", "");
-});
-
 export default {
     showDialog
 };

src/public/javascripts/services/note_autocomplete.js

@@ -0,0 +1,54 @@
+import server from "./server.js";
+
+async function initNoteAutocomplete($el) {
+    if (!$el.hasClass("ui-autocomplete-input")) {
+        const $showRecentNotesButton = $("<span>")
+            .addClass("input-group-addon show-recent-notes-button")
+            .prop("title", "Show recent notes");
+
+        $el.after($showRecentNotesButton);
+
+        $showRecentNotesButton.click(() => $el.autocomplete("search", ""));
+
+        await $el.autocomplete({
+            appendTo: $el.parent().parent(),
+            source: async function (request, response) {
+                const result = await server.get('autocomplete?query=' + encodeURIComponent(request.term));
+
+                if (result.length > 0) {
+                    response(result.map(row => {
+                        return {
+                            label: row.label,
+                            value: row.label + ' (' + row.value + ')'
+                        }
+                    }));
+                }
+                else {
+                    response([{
+                        label: "No results",
+                        value: "No results"
+                    }]);
+                }
+            },
+            minLength: 0,
+            change: function (event, ui) {
+                $el.trigger("change");
+            },
+            select: function (event, ui) {
+                if (ui.item.value === 'No results') {
+                    return false;
+                }
+            }
+        });
+    }
+}
+
+ko.bindingHandlers.noteAutocomplete = {
+    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
+        initNoteAutocomplete($(element));
+    }
+};
+
+export default {
+    initNoteAutocomplete
+}

src/public/javascripts/services/note_detail.js

@@ -16,6 +16,7 @@ import noteDetailFile from './note_detail_file.js';
 import noteDetailSearch from './note_detail_search.js';
 import noteDetailRender from './note_detail_render.js';
 import bundleService from "./bundle.js";
+import noteAutocompleteService from "./note_autocomplete.js";
 
 const $noteTitle = $("#note-title");
 
@@ -250,7 +251,7 @@ async function loadAttributes() {
             .addClass("form-control")
             .addClass("promoted-attribute-input");
 
-        const $inputCell = $("<td>").append($input);
+        const $inputCell = $("<td>").append($("<div>").addClass("input-group").append($input));
 
         const $actionCell = $("<td>");
         const $multiplicityCell = $("<td>");
@@ -295,6 +296,17 @@ async function loadAttributes() {
                 messagingService.logError("Unknown labelType=" + definitionAttr.labelType);
             }
         }
+        else if (valueAttr.type === 'relation') {
+            if (valueAttr.value) {
+                $input.val((await treeUtils.getNoteTitle(valueAttr.value) + " (" + valueAttr.value + ")"));
+            }
+
+            await noteAutocompleteService.initNoteAutocomplete($input);
+        }
+        else {
+            messagingService.logError("Unknown attribute type=" + valueAttr.type);
+            return;
+        }
 
         if (definition.multiplicityType === "multivalue") {
             const addButton = $("<span>")
@@ -455,6 +467,11 @@ $promotedAttributesContainer.on('change', '.promoted-attribute-input', async eve
     if ($attr.prop("type") === "checkbox") {
         value = $attr.is(':checked') ? "true" : "false";
     }
+    else if ($attr.prop("attribute-type") === "relation") {
+        if ($attr.val()) {
+            value = treeUtils.getNoteIdFromNotePath(linkService.getNotePathFromLabel($attr.val()));
+        }
+    }
     else {
         value = $attr.val();
     }

src/public/javascripts/services/utils.js

@@ -46,7 +46,7 @@ function isElectron() {
 function assertArguments() {
     for (const i in arguments) {
         if (!arguments[i]) {
-            throw new Error(`Argument idx#${i} should not be falsy: ${arguments[i]}`);
+            console.trace(`Argument idx#${i} should not be falsy: ${arguments[i]}`);
         }
     }
 }

src/public/stylesheets/style.css

@@ -437,4 +437,9 @@ html.theme-dark body {
 
 .pointer {
     cursor: pointer;
+}
+
+.show-recent-notes-button {
+    background: url('/images/icons/clock-16.png') no-repeat center;
+    cursor: pointer;
 }

src/views/index.ejs

@@ -302,8 +302,6 @@
 
             <div class="input-group">
                 <input id="note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
-
-                <span class="input-group-addon" id="add-link-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
             </div>
         </div>
 
@@ -326,8 +324,6 @@
         <label for="jump-to-note-autocomplete">Note</label>
         <div class="input-group">
           <input id="jump-to-note-autocomplete" class="form-control" placeholder="search for note by its name" style="width: 100%;">
-
-          <span class="input-group-addon" id="jump-to-note-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
         </div>
       </div>
 
@@ -602,9 +598,7 @@
                   <div class="relation-value input-group" data-bind="visible: type == 'relation'" style="width: 300px;">
                     <input class="form-control relation-target-note-id"
                            placeholder="search for note by its name"
-                           data-bind="value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
+                           data-bind="noteAutocomplete, value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }">
-
-                    <span class="input-group-addon relations-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
                   </div>
 
                   <div data-bind="visible: type == 'label-definition'">