tag list in "status bar", closes #28

src/public/javascripts/dialogs/attributes.js

@@ -53,6 +53,8 @@ const attributesDialog = (function() {
             addLastEmptyRow();
 
             showMessage("Attributes have been saved.");
+
+            noteEditor.loadAttributeList();
         };
 
         function addLastEmptyRow() {

src/public/javascripts/note_editor.js

@@ -9,6 +9,8 @@ const noteEditor = (function() {
     const unprotectButton = $("#unprotect-button");
     const noteDetailWrapperEl = $("#note-detail-wrapper");
     const noteIdDisplayEl = $("#note-id-display");
+    const attributeListEl = $("#attribute-list");
+    const attributeListInnerEl = $("#attribute-list-inner");
 
     let editor = null;
     let codeEditor = null;
@@ -187,6 +189,27 @@ const noteEditor = (function() {
 
         // after loading new note make sure editor is scrolled to the top
         noteDetailWrapperEl.scrollTop(0);
+
+        loadAttributeList();
+    }
+
+    async function loadAttributeList() {
+        const noteId = getCurrentNoteId();
+
+        const attributes = await server.get('notes/' + noteId + '/attributes');
+
+        attributeListInnerEl.html('');
+
+        if (attributes.length > 0) {
+            for (const attr of attributes) {
+                attributeListInnerEl.append(formatAttribute(attr) + " ");
+            }
+
+            attributeListEl.show();
+        }
+        else {
+            attributeListEl.hide();
+        }
     }
 
     async function loadNote(noteId) {
@@ -290,6 +313,7 @@ const noteEditor = (function() {
         newNoteCreated,
         getEditor,
         focus,
-        executeCurrentNote
+        executeCurrentNote,
+        loadAttributeList
     };
 })();

src/public/javascripts/utils.js

@@ -118,4 +118,18 @@ async function stopWatch(what, func) {
 function executeScript(script) {
     // last \r\n is necessary if script contains line comment on its last line
     eval("(async function() {" + script + "\r\n})()");
+}
+
+function formatValueWithWhitespace(val) {
+    return /\s/.test(val) ? '"' + val + '"' : val;
+}
+
+function formatAttribute(attr) {
+    let str = "@" + formatValueWithWhitespace(attr.name);
+
+    if (attr.value !== "") {
+        str += "=" + formatValueWithWhitespace(attr.value);
+    }
+
+    return str;
 }

src/public/stylesheets/style.css

@@ -6,7 +6,8 @@
     grid-template-areas: "header header"
                          "tree-actions title"
                          "tree note-content"
-                         "parent-list note-content";
+                         "parent-list note-content"
+                         "parent-list attribute-list";
     grid-template-columns: 2fr 5fr;
     grid-template-rows: auto
                         auto
@@ -238,7 +239,7 @@ div.ui-tooltip {
 #note-id-display {
     position: absolute;
     right: 10px;
-    bottom: 5px;
+    bottom: 8px;
     z-index: 1000;
     color: lightgrey;
 }
@@ -249,4 +250,16 @@ div.ui-tooltip {
     overflow-x: hidden;
 }
 
-.cm-matchhighlight {background-color: #eeeeee}
+.cm-matchhighlight {background-color: #eeeeee}
+
+#attribute-list {
+    grid-area: attribute-list;
+    color: #777777;
+    border-top: 1px solid #eee;
+    padding: 5px; display: none;
+}
+
+#attribute-list button {
+    padding: 2px;
+    margin-right: 10px;
+}

src/routes/api/attributes.js

@@ -63,7 +63,7 @@ router.get('/attributes/names', auth.checkApiAuth, wrap(async (req, res, next) =
 router.get('/attributes/values/:attributeName', auth.checkApiAuth, wrap(async (req, res, next) => {
     const attributeName = req.params.attributeName;
 
-    const values = await sql.getColumn("SELECT DISTINCT value FROM attributes WHERE name = ? ORDER BY value", [attributeName]);
+    const values = await sql.getColumn("SELECT DISTINCT value FROM attributes WHERE name = ? AND value != '' ORDER BY value", [attributeName]);
 
     res.send(values);
 }));

src/views/index.ejs

@@ -143,6 +143,12 @@
 
         <div id="note-detail-render"></div>
       </div>
+
+      <div id="attribute-list">
+        <button class="btn-default btn-sm" onclick="attributesDialog.showDialog();">Attributes:</button>
+
+        <span id="attribute-list-inner"></span>
+      </div>
     </div>
 
     <div id="recent-notes-dialog" title="Recent notes" style="display: none;">