#126, relation list in note detail and fixes in saving

src/public/javascripts/dialogs/add_link.js

@@ -79,7 +79,7 @@ async function showDialog() {
                 return;
             }
 
-            const notePath = linkService.getNodePathFromLabel(ui.item.value);
+            const notePath = linkService.getNotePathFromLabel(ui.item.value);
 
             if (!notePath) {
                 return;
@@ -99,7 +99,7 @@ async function showDialog() {
         // this is called when user goes through autocomplete list with keyboard
         // at this point the item isn't selected yet so we use supplied ui.item to see WHERE the cursor is
         focus: async (event, ui) => {
-            const notePath = linkService.getNodePathFromLabel(ui.item.value);
+            const notePath = linkService.getNotePathFromLabel(ui.item.value);
             const noteId = treeUtils.getNoteIdFromNotePath(notePath);
 
             await setDefaultLinkTitle(noteId);
@@ -114,7 +114,7 @@ async function showDialog() {
 $form.submit(() => {
     const value = $autoComplete.val();
 
-    const notePath = linkService.getNodePathFromLabel(value);
+    const notePath = linkService.getNotePathFromLabel(value);
     const noteId = treeUtils.getNoteIdFromNotePath(notePath);
 
     if (notePath) {

src/public/javascripts/dialogs/relations.js

@@ -1,6 +1,8 @@
 import noteDetailService from '../services/note_detail.js';
 import server from '../services/server.js';
 import infoService from "../services/info.js";
+import linkService from "../services/link.js";
+import treeUtils from "../services/tree_utils.js";
 
 const $dialog = $("#relations-dialog");
 const $saveRelationsButton = $("#save-relations-button");
@@ -26,12 +28,20 @@ function RelationsModel() {
         });
     };
 
+    async function showRelations(relations) {
+        for (const relation of relations) {
+            relation.targetNoteId = await treeUtils.getNoteTitle(relation.targetNoteId) + " (" + relation.targetNoteId + ")";
+        }
+
+        self.relations(relations.map(ko.observable));
+    }
+
     this.loadRelations = async function() {
         const noteId = noteDetailService.getCurrentNoteId();
 
         const relations = await server.get('notes/' + noteId + '/relations');
 
-        self.relations(relations.map(ko.observable));
+        await showRelations(relations);
 
         addLastEmptyRow();
 
@@ -89,19 +99,18 @@ function RelationsModel() {
             .map(relation => relation())
             .filter(relation => relation.relationId !== "" || relation.name !== "");
 
+        relationsToSave.forEach(relation => relation.targetNoteId = treeUtils.getNoteIdFromNotePath(linkService.getNotePathFromLabel(relation.targetNoteId)));
+
+        console.log(relationsToSave);
+
         const relations = await server.put('notes/' + noteId + '/relations', relationsToSave);
 
-        self.relations(relations.map(ko.observable));
+        await showRelations(relations);
 
         addLastEmptyRow();
 
         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();
     };
 
@@ -218,7 +227,7 @@ async function initAutocomplete($el) {
                 if (ui.item.value === 'No results') {
                     return false;
                 }
-            },
+            }
         });
     }
 }

src/public/javascripts/services/link.js

@@ -13,7 +13,7 @@ function getNotePathFromLink(url) {
     }
 }
 
-function getNodePathFromLabel(label) {
+function getNotePathFromLabel(label) {
     const notePathMatch = / \(([A-Za-z0-9/]+)\)/.exec(label);
 
     if (notePathMatch !== null) {
@@ -97,7 +97,7 @@ $(document).on('click', 'div.popover-content a, div.ui-tooltip-content a', goToL
 $(document).on('dblclick', '#note-detail-text a', goToLink);
 
 export default {
-    getNodePathFromLabel,
+    getNotePathFromLabel,
     getNotePathFromLink,
     createNoteLink,
     addLinkToEditor,

src/public/javascripts/services/note_detail.js

@@ -7,6 +7,7 @@ import utils from './utils.js';
 import server from './server.js';
 import messagingService from "./messaging.js";
 import infoService from "./info.js";
+import linkService from "./link.js";
 import treeCache from "./tree_cache.js";
 import NoteFull from "../entities/note_full.js";
 import noteDetailCode from './note_detail_code.js';
@@ -26,6 +27,8 @@ const $noteDetailComponentWrapper = $("#note-detail-component-wrapper");
 const $noteIdDisplay = $("#note-id-display");
 const $labelList = $("#label-list");
 const $labelListInner = $("#label-list-inner");
+const $relationList = $("#relation-list");
+const $relationListInner = $("#relation-list-inner");
 const $childrenOverview = $("#children-overview");
 
 let currentNote = null;
@@ -180,6 +183,8 @@ async function loadNoteDetail(noteId) {
 
     const labels = await loadLabelList();
 
+    loadRelationList(); // no need to wait
+
     const hideChildrenOverview = labels.some(label => label.name === 'hideChildrenOverview');
     await showChildrenOverview(hideChildrenOverview);
 }
@@ -230,6 +235,29 @@ async function loadLabelList() {
     return labels;
 }
 
+async function loadRelationList() {
+    const noteId = getCurrentNoteId();
+
+    const relations = await server.get('notes/' + noteId + '/relations');
+
+    $relationListInner.html('');
+
+    if (relations.length > 0) {
+        for (const relation of relations) {
+            $relationListInner.append(relation.name + " = ");
+            $relationListInner.append(await linkService.createNoteLink(relation.targetNoteId));
+            $relationListInner.append(" ");
+        }
+
+        $relationList.show();
+    }
+    else {
+        $relationList.hide();
+    }
+
+    return relations;
+}
+
 async function loadNote(noteId) {
     const row = await server.get('notes/' + noteId);
 
@@ -279,6 +307,7 @@ export default {
     newNoteCreated,
     focus,
     loadLabelList,
+    loadRelationList,
     saveNote,
     saveNoteIfChanged,
     noteChanged

src/public/javascripts/services/tooltip.js

@@ -4,9 +4,13 @@ import linkService from "./link.js";
 
 function setupTooltip() {
     $(document).tooltip({
-        items: "#note-detail-text a",
+        items: "#note-detail-wrapper a",
         content: function (callback) {
-            const notePath = linkService.getNotePathFromLink($(this).attr("href"));
+            let notePath = linkService.getNotePathFromLink($(this).attr("href"));
+
+            if (!notePath) {
+                notePath = $(this).attr("note-path");
+            }
 
             if (notePath !== null) {
                 const noteId = treeUtils.getNoteIdFromNotePath(notePath);

src/public/stylesheets/style.css

@@ -308,13 +308,13 @@ div.ui-tooltip {
 
 .cm-matchhighlight {background-color: #eeeeee}
 
-#label-list {
+#label-list, #relation-list {
     color: #777777;
-    border-top: 1px solid #eee;
+    padding: 5px;
-    padding: 5px; display: none;
+    display: none;
 }
 
-#label-list button {
+#label-list button, #relation-list button {
     padding: 2px;
     margin-right: 5px;
 }

src/routes/api/relations.js

@@ -18,7 +18,7 @@ async function updateNoteRelations(req) {
     for (const relation of relations) {
         let relationEntity;
 
-        if (relation.labelId) {
+        if (relation.relationId) {
             relationEntity = await repository.getRelation(relation.relationId);
         }
         else {

src/views/index.ejs

@@ -254,10 +254,18 @@
 
         <div id="children-overview"></div>
 
-        <div id="label-list">
+        <div id="labels-and-relations">
-          <button class="btn btn-sm show-labels-button">Labels:</button>
+          <span id="label-list">
+            <button class="btn btn-sm show-labels-button">Labels:</button>
 
-          <span id="label-list-inner"></span>
+            <span id="label-list-inner"></span>
+          </span>
+
+          <span id="relation-list">
+            <button class="btn btn-sm show-relations-button">Relations:</button>
+
+            <span id="relation-list-inner"></span>
+          </span>
         </div>
       </div>
     </div>
@@ -578,7 +586,7 @@
               <td>
                 <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;">
+              <td title="Delete" style="padding: 13px; cursor: pointer;">
                 <span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteLabel"></span>
               </td>
             </tr>
@@ -629,7 +637,7 @@
                   <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>
               </td>
-              <td title="Delete" style="padding: 13px;">
+              <td title="Delete" style="padding: 13px; cursor: pointer;">
                 <span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteRelation"></span>
               </td>
             </tr>