From 74acb08f7b21ddbaf9834751a9540002c951ae1b Mon Sep 17 00:00:00 2001
From: azivner <adam.zivner@gmail.com>
Date: Wed, 14 Nov 2018 11:17:20 +0100
Subject: [PATCH] "open" note put into note autocomplete input, also fixes #222

---
 src/public/javascripts/services/attributes.js | 15 ---------
 src/public/javascripts/services/link.js       | 18 ++---------
 .../javascripts/services/note_autocomplete.js | 31 +++++++++++++++++--
 src/public/javascripts/services/tree.js       |  8 +++--
 src/public/stylesheets/style.css              | 21 ++++++++++---
 5 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/public/javascripts/services/attributes.js b/src/public/javascripts/services/attributes.js
index 3e606e292..3f9c6628b 100644
--- a/src/public/javascripts/services/attributes.js
+++ b/src/public/javascripts/services/attributes.js
@@ -205,21 +205,6 @@ async function createPromotedAttributeRow(definitionAttr, valueAttr) {
         });
 
         $input.setSelectedPath(valueAttr.value);
-
-        // ideally we'd use link instead of button which would allow tooltip preview, but
-        // we can't guarantee updating the link in the a element
-        const $openButton = $("<button>").addClass("btn btn-sm").text("Open").click(() => {
-            const notePath = $input.getSelectedPath();
-
-            if (notePath) {
-                treeService.activateNote(notePath);
-            }
-            else {
-                console.log("Empty note path, nothing to open.");
-            }
-        });
-
-        $actionCell.append($openButton);
     }
     else {
         messagingService.logError("Unknown attribute type=" + valueAttr.type);
diff --git a/src/public/javascripts/services/link.js b/src/public/javascripts/services/link.js
index 0b03d1cd7..96150bb6f 100644
--- a/src/public/javascripts/services/link.js
+++ b/src/public/javascripts/services/link.js
@@ -51,20 +51,6 @@ function getNotePathFromLink($link) {
     return url ? getNotePathFromUrl(url) : null;
 }
 
-function openNotePath(notePath) {
-    treeService.activateNote(notePath);
-
-    // this is quite ugly hack, but it seems like we can't close the tooltip otherwise
-    $("[role='tooltip']").remove();
-
-    if (glob.activeDialog) {
-        try {
-            glob.activeDialog.modal('hide');
-        } catch (e) {
-        }
-    }
-}
-
 function goToLink(e) {
     e.preventDefault();
 
@@ -73,7 +59,7 @@ function goToLink(e) {
     const notePath = getNotePathFromLink($link);
 
     if (notePath) {
-        openNotePath(notePath);
+        treeService.activateNote(notePath);
     }
     else {
         const address = $link.attr('href');
@@ -127,7 +113,7 @@ $(document).on('click', 'span.ck-button__label', e => {
     const notePath = getNotePathFromUrl(url);
 
     if (notePath) {
-        openNotePath(notePath);
+        treeService.activateNote(notePath);
 
         e.preventDefault();
     }
diff --git a/src/public/javascripts/services/note_autocomplete.js b/src/public/javascripts/services/note_autocomplete.js
index 62c47d2ae..c1e926f92 100644
--- a/src/public/javascripts/services/note_autocomplete.js
+++ b/src/public/javascripts/services/note_autocomplete.js
@@ -1,5 +1,6 @@
 import server from "./server.js";
 import noteDetailService from "./note_detail.js";
+import treeService from './tree.js';
 
 const SELECTED_PATH_KEY = "selected-path";
 
@@ -19,16 +20,20 @@ async function autocompleteSource(term, cb) {
 }
 
 function clearText($el) {
+    $el.setSelectedPath("");
     $el.autocomplete("val", "").change();
 }
 
 function showRecentNotes($el) {
+    $el.setSelectedPath("");
     $el.autocomplete("val", "");
     $el.autocomplete("open");
 }
 
 function initNoteAutocomplete($el) {
-    if (!$el.hasClass("aa-input")) {
+    if (!$el.hasClass("note-autocomplete-input")) {
+        $el.addClass("note-autocomplete-input");
+
         const $clearTextButton = $("<span>")
                 .addClass("input-group-text input-clearer-button jam jam-close")
                 .prop("title", "Clear text field");
@@ -37,15 +42,28 @@ function initNoteAutocomplete($el) {
                 .addClass("input-group-text show-recent-notes-button jam jam-clock")
                 .prop("title", "Show recent notes");
 
+        const $goToSelectedNoteButton = $("<span>")
+            .addClass("input-group-text go-to-selected-note-button jam jam-arrow-right")
+            .prop("title", "Go to selected note");
+
         $el.after($("<div>")
             .addClass("input-group-append")
             .append($clearTextButton)
-            .append($showRecentNotesButton));
+            .append($showRecentNotesButton)
+            .append($goToSelectedNoteButton));
 
         $clearTextButton.click(() => clearText($el));
 
         $showRecentNotesButton.click(() => showRecentNotes($el));
 
+        $goToSelectedNoteButton.click(() => {
+            if ($el.hasClass("disabled")) {
+                return;
+            }
+
+            treeService.activateNote($el.getSelectedPath());
+        });
+
         $el.autocomplete({
             appendTo: document.querySelector('body'),
             hint: false,
@@ -85,13 +103,22 @@ $.fn.getSelectedPath = function() {
 };
 
 $.fn.setSelectedPath = function(path) {
+    path = path || "";
+
     $(this).data(SELECTED_PATH_KEY, path);
+
+    $(this)
+        .closest(".input-group")
+        .find(".go-to-selected-note-button")
+        .toggleClass("disabled", !path.trim());
 };
 
 ko.bindingHandlers.noteAutocomplete = {
     init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
         initNoteAutocomplete($(element));
 
+        $(element).setSelectedPath(bindingContext.$data.selectedPath);
+
         $(element).on('autocomplete:selected', function(event, suggestion, dataset) {
             bindingContext.$data.selectedPath = $(element).val().trim() ? suggestion.path : '';
         });
diff --git a/src/public/javascripts/services/tree.js b/src/public/javascripts/services/tree.js
index 2a506fec1..3294434e4 100644
--- a/src/public/javascripts/services/tree.js
+++ b/src/public/javascripts/services/tree.js
@@ -111,6 +111,10 @@ async function expandToNote(notePath, expandOpts) {
 async function activateNote(notePath, newNote) {
     utils.assertArguments(notePath);
 
+    if (glob.activeDialog) {
+        glob.activeDialog.modal('hide');
+    }
+
     const node = await expandToNote(notePath);
 
     if (newNote) {
@@ -165,10 +169,10 @@ async function getRunPath(notePath) {
             }
 
             if (!parents.some(p => p.noteId === parentNoteId)) {
-                console.log(utils.now(), "Did not find parent " + parentNoteId + " for child " + childNoteId);
+                console.debug(utils.now(), "Did not find parent " + parentNoteId + " for child " + childNoteId);
 
                 if (parents.length > 0) {
-                    console.log(utils.now(), "Available parents:", parents);
+                    console.debug(utils.now(), "Available parents:", parents);
 
                     const someNotePath = await getSomeNotePath(parents[0]);
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 64184cd71..8938c8853 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -455,8 +455,8 @@ html.theme-dark body {
 .show-recent-notes-button {
     cursor: pointer;
     font-size: 1.3em;
-    padding-left: 7px;
-    padding-right: 7px;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .input-clearer-button {
@@ -464,10 +464,23 @@ html.theme-dark body {
     font-size: 1.3em;
     background: inherit !important;
     padding-left: 5px;
-    padding-right: 7px;
+    padding-right: 5px;
 }
 
-.promoted-attribute-input.aa-input {
+.go-to-selected-note-button {
+    cursor: pointer;
+    font-size: 1.3em;
+    padding-left: 4px;
+    padding-right: 3px;
+}
+
+.go-to-selected-note-button.disabled {
+    cursor: inherit;
+    color: #ccc;
+}
+
+.note-autocomplete-input {
+    /* this is for seamless integration of "input clearer" button */
     border-right: 0;
 }