WIP of attribute view on click

src/public/app/widgets/note_attributes.js

@@ -7,6 +7,8 @@ import utils from "../services/utils.js";
 import ws from "../services/ws.js";
 import SpacedUpdate from "../services/spaced_update.js";
 import attributesParser from "../services/attribute_parser.js";
+import linkService from "../services/link.js";
+import treeService from "../services/tree.js";
 
 const mentionSetup = {
     feeds: [
@@ -72,10 +74,41 @@ const mentionSetup = {
 
 const TPL = `
 <div class="note-attributes">
+<style>
+.note-attributes-editor p {
+    color: var(--muted-text-color);
+    margin-top: 5px !important;
+    margin-bottom: 5px !important;
+}
+
+.attr-extras {
+    display: block;
+    background-color: var(--accented-background-color);
+    border: 1px solid var(--main-border-color);
+    border-radius: 4px;
+    z-index: 1000;
+    padding: 10px;
+    position: absolute;
+    max-width: 400px;
+    max-height: 500px;
+    overflow: auto;
+}
+</style>
+
+<div class="attr-extras" style="display: none;">
+    <div class="attr-extras-title"></div>
+    
+    <div class="attr-extras-list"></div>
+    
+    <div class="attr-extras-more-notes"></div>
+</div>
+
 <div class="note-attributes-editor"></div>
 </div>
 `;
 
+const DISPLAYED_NOTES = 10;
+
 export default class NoteAttributesWidget extends TabAwareWidget {
     constructor() {
         super();
@@ -90,6 +123,10 @@ export default class NoteAttributesWidget extends TabAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.$editor = this.$widget.find('.note-attributes-editor');
+        this.$attrExtras = this.$widget.find('.attr-extras');
+        this.$attrExtrasTitle = this.$widget.find('.attr-extras-title');
+        this.$attrExtrasList = this.$widget.find('.attr-extras-list');
+        this.$attrExtrasMoreNotes = this.$widget.find('.attr-extras-more-notes');
         this.initialized = this.initEditor();
 
         this.$editor.keypress(async e => {
@@ -114,18 +151,85 @@ export default class NoteAttributesWidget extends TabAwareWidget {
         // display of $widget in both branches.
         this.$widget.show();
 
-        this.$editor.on("click", () => {
+        this.$editor.on("click", async e => {
             const pos = this.textEditor.model.document.selection.getFirstPosition();
 
             if (pos && pos.textNode && pos.textNode.data) {
-                const attr = pos.textNode.data;
-                const index = pos.offset - pos.textNode.startOffset;
+                const attrText = pos.textNode.data;
+                const clickIndex = pos.offset - pos.textNode.startOffset;
 
-                const attrs = attributesParser.lexAndParse(attr, true);
+                const parsedAttrs = attributesParser.lexAndParse(attrText, true);
 
-                console.log(attrs);
+                let matchedAttr = null;
+                let matchedPart = null;
 
-                console.log(attr.substr(0, index) + '|' + attr.substr(index));
+                for (const attr of parsedAttrs) {
+                    if (clickIndex >= attr.nameStartIndex && clickIndex <= attr.nameEndIndex) {
+                        matchedAttr = attr;
+                        matchedPart = 'name';
+                        break;
+                    }
+
+                    if (clickIndex >= attr.valueStartIndex && clickIndex <= attr.valueEndIndex) {
+                        matchedAttr = attr;
+                        matchedPart = 'value';
+                        break;
+                    }
+                }
+
+                if (!matchedAttr) {
+                    console.log(`Not found attribute for index ${clickIndex}, attr: ${JSON.stringify(parsedAttrs)}, text: ${attrText}`);
+
+                    return;
+                }
+
+                let noteIds = await server.post('attributes/notes-with-attribute', {
+                    type: matchedAttr.type,
+                    name: matchedAttr.name,
+                    value: matchedPart === 'value' ? matchedAttr.value : undefined
+                });
+
+                noteIds = noteIds.filter(noteId => noteId !== this.noteId);
+
+                if (noteIds.length === 0) {
+                    this.$attrExtrasTitle.text(
+                        `There are no other notes with ${matchedAttr.type} name "${matchedAttr.name}"`
+                        // not displaying value since it can be long
+                        + (matchedPart === 'value' ? " and matching value" : ""));
+                }
+                else {
+                    this.$attrExtrasTitle.text(
+                        `Notes with ${matchedAttr.type} name "${matchedAttr.name}"`
+                        // not displaying value since it can be long
+                        + (matchedPart === 'value' ? " and matching value" : "")
+                        + ":"
+                    );
+                }
+
+                this.$attrExtrasList.empty();
+
+                const displayedNoteIds = noteIds.length <= DISPLAYED_NOTES ? noteIds : noteIds.slice(0, DISPLAYED_NOTES);
+                const displayedNotes = await treeCache.getNotes(displayedNoteIds);
+console.log(displayedNoteIds, displayedNotes);
+                for (const note of displayedNotes) {
+                    const notePath = treeService.getSomeNotePath(note);
+                    const $noteLink = await linkService.createNoteLink(notePath, {showNotePath: true});
+
+                    this.$attrExtrasList.append(
+                        $("<li>").append($noteLink)
+                    );
+                }
+
+                if (noteIds.length > DISPLAYED_NOTES) {
+                    this.$attrExtrasMoreNotes.show().text(`... and ${noteIds.length - DISPLAYED_NOTES} more.`);
+                }
+                else {
+                    this.$attrExtrasMoreNotes.hide();
+                }
+
+                this.$attrExtras.css("left", e.pageX - this.$attrExtras.width() / 2);
+                this.$attrExtras.css("top", e.pageY + 20);
+                this.$attrExtras.show();
             }
         });