From 697eee27063ed4a5642baed2ea048b356251119a Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Fri, 27 Jul 2018 11:28:24 +0200
Subject: [PATCH] #126, autocomplete + can save relations

---
 src/public/javascripts/dialogs/relations.js | 84 +++++++++++++--------
 src/views/index.ejs                         | 15 +++-
 2 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/src/public/javascripts/dialogs/relations.js b/src/public/javascripts/dialogs/relations.js
index 5455bf731..afc9c7811 100644
--- a/src/public/javascripts/dialogs/relations.js
+++ b/src/public/javascripts/dialogs/relations.js
@@ -1,6 +1,9 @@
 import noteDetailService from '../services/note_detail.js';
 import server from '../services/server.js';
 import infoService from "../services/info.js";
+import treeService from "../services/tree.js";
+import linkService from "../services/link.js";
+import treeUtils from "../services/tree_utils.js";
 
 const $dialog = $("#relations-dialog");
 const $saveRelationsButton = $("#save-relations-button");
@@ -97,6 +100,11 @@ function RelationsModel() {
 
         infoService.showMessage("Relations have been saved.");
 
+        // FIXME FIXME FIXME FIXME FIXME
+        // FIXME FIXME FIXME FIXME FIXME
+        // FIXME FIXME FIXME FIXME FIXME
+        // FIXME FIXME FIXME FIXME FIXME
+        // FIXME FIXME FIXME FIXME FIXME
         noteDetailService.loadRelationList();
     };
 
@@ -104,11 +112,11 @@ function RelationsModel() {
         const relations = self.relations().filter(attr => attr().isDeleted === 0);
         const last = relations.length === 0 ? null : relations[relations.length - 1]();
 
-        if (!last || last.name.trim() !== "" || last.value !== "") {
+        if (!last || last.name.trim() !== "" || last.targetNoteId !== "") {
             self.relations.push(ko.observable({
                 relationId: '',
                 name: '',
-                value: '',
+                targetNoteId: '',
                 isDeleted: 0,
                 position: 0
             }));
@@ -144,7 +152,7 @@ function RelationsModel() {
     this.isEmptyName = function(index) {
         const cur = self.relations()[index]();
 
-        return cur.name.trim() === "" && (cur.relationId !== "" || cur.value !== "");
+        return cur.name.trim() === "" && (cur.relationId !== "" || cur.targetNoteId !== "");
     };
 
     this.getTargetRelation = function(target) {
@@ -175,36 +183,6 @@ $(document).on('focus', '.relation-name', function (e) {
             // shouldn't be required and autocomplete should just accept array of strings, but that fails
             // because we have overriden filter() function in autocomplete.js
             source: relationNames.map(relation => {
-                return {
-                    relation: relation,
-                    value: relation
-                }
-            }),
-            minLength: 0
-        });
-    }
-
-    $(this).autocomplete("search", $(this).val());
-});
-
-$(document).on('focus', '.relation-value', async function (e) {
-    if (!$(this).hasClass("ui-autocomplete-input")) {
-        const relationName = $(this).parent().parent().find('.relation-name').val();
-
-        if (relationName.trim() === "") {
-            return;
-        }
-
-        const relationValues = await server.get('relations/values/' + encodeURIComponent(relationName));
-
-        if (relationValues.length === 0) {
-            return;
-        }
-
-        $(this).autocomplete({
-            // shouldn't be required and autocomplete should just accept array of strings, but that fails
-            // because we have overriden filter() function in autocomplete.js
-            source: relationValues.map(relation => {
                 return {
                     label: relation,
                     value: relation
@@ -217,6 +195,46 @@ $(document).on('focus', '.relation-value', async function (e) {
     $(this).autocomplete("search", $(this).val());
 });
 
+$(document).on('focus', '.relation-target-note-id', async function (e) {
+    if (!$(this).hasClass("ui-autocomplete-input")) {
+        await $(this).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;
+                }
+            },
+        });
+    }
+
+    $(this).autocomplete("search", $(this).val());
+});
+
+$(document).on('click', '.relations-show-recent-notes', function () {
+    alert("HI!");
+    alert($(this).parent().find('.relation-target-note-id').length);
+
+    $(this).parent().find('.relation-target-note-id').autocomplete("search", "");
+});
+
 export default {
     showDialog
 };
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index f4285df07..0c4fa2208 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -571,12 +571,12 @@
               <td data-bind="text: labelId" style="width: 150px;"></td>
               <td>
                 <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
-                <input type="text" class="label-name" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.labelChanged }"/>
+                <input type="text" class="label-name form-control" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.labelChanged }"/>
                 <div style="color: yellowgreen" data-bind="if: $parent.isNotUnique($index())"><span class="glyphicon glyphicon-info-sign"></span> Duplicate label.</div>
                 <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Label name can't be empty.</div>
               </td>
               <td>
-                <input type="text" class="label-value" data-bind="value: value, valueUpdate: 'blur', event: { blur: $parent.labelChanged }" style="width: 300px"/>
+                <input type="text" class="label-value form-control" data-bind="value: value, valueUpdate: 'blur', event: { blur: $parent.labelChanged }" style="width: 300px"/>
               </td>
               <td title="Delete" style="padding: 13px;">
                 <span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteLabel"></span>
@@ -615,12 +615,19 @@
               <td data-bind="text: relationId" style="width: 150px;"></td>
               <td>
                 <!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
-                <input type="text" class="relation-name" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.relationChanged }"/>
+                <input type="text" class="relation-name form-control" data-bind="value: name, valueUpdate: 'blur',  event: { blur: $parent.relationChanged }"/>
                 <div style="color: yellowgreen" data-bind="if: $parent.isNotUnique($index())"><span class="glyphicon glyphicon-info-sign"></span> Duplicate relation.</div>
                 <div style="color: red" data-bind="if: $parent.isEmptyName($index())">Relation name can't be empty.</div>
               </td>
               <td>
-                <input type="text" class="relation-value" data-bind="value: value, valueUpdate: 'blur', event: { blur: $parent.relationChanged }" style="width: 300px"/>
+                <div class="input-group">
+                  <input id="jump-to-note-autocomplete" class="form-control relation-target-note-id"
+                         placeholder="search for note by its name"
+                         data-bind="value: targetNoteId, valueUpdate: 'blur', event: { blur: $parent.relationChanged }"
+                         style="width: 300px;">
+
+                  <span class="input-group-addon" class="relations-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
+                </div>
               </td>
               <td title="Delete" style="padding: 13px;">
                 <span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteRelation"></span>