From 137703ada471ec8a476f15a90e8cb0f0504d1c66 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 8 Oct 2023 22:58:31 +0300
Subject: [PATCH] add promoted attributes widget to the mobile version, closes
 #4314

---
 package-lock.json                             |  4 +-
 src/public/app/layouts/mobile_layout.js       |  2 +
 .../ribbon_widgets/promoted_attributes.js     | 85 +++++++++++--------
 3 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c7bdc8799..4c1320590 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "trilium",
-  "version": "0.61.8-beta",
+  "version": "0.61.9-beta",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "trilium",
-      "version": "0.61.8-beta",
+      "version": "0.61.9-beta",
       "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {
diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index 746507619..20a2037de 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -22,6 +22,7 @@ import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
+import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
 
 const MOBILE_CSS = `
 <style>
@@ -154,6 +155,7 @@ export default class MobileLayout {
                         .child(new HideFloatingButtonsButton())
                     )
                     .child(new MermaidWidget())
+                    .child(new PromotedAttributesWidget())
                     .child(
                         new ScrollingContainer()
                             .filling()
diff --git a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
index 6ab75d0b1..b3299844a 100644
--- a/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
+++ b/src/public/app/widgets/ribbon_widgets/promoted_attributes.js
@@ -5,6 +5,7 @@ import noteAutocompleteService from "../../services/note_autocomplete.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import attributeService from "../../services/attributes.js";
 import options from "../../services/options.js";
+import utils from "../../services/utils.js";
 
 const TPL = `
 <div>
@@ -37,9 +38,13 @@ const TPL = `
     </style>
     
     <div class="promoted-attributes-container"></div>
-</div>
-`;
+</div>`;
 
+/**
+ * This widget is quite special because it's used in the desktop ribbon, but in mobile outside of ribbon.
+ * This works without many issues (apart from autocomplete), but it should be kept in mind when changing things
+ * and testing.
+ */
 export default class PromotedAttributesWidget extends NoteContextAwareWidget {
     get name() {
         return "promotedAttributes";
@@ -147,34 +152,37 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
             if (definition.labelType === 'text') {
                 $input.prop("type", "text");
 
-                // no need to await for this, can be done asynchronously
-                server.get(`attribute-values/${encodeURIComponent(valueAttr.name)}`).then(attributeValues => {
-                    if (attributeValues.length === 0) {
-                        return;
-                    }
-
-                    attributeValues = attributeValues.map(attribute => ({value: attribute}));
-
-                    $input.autocomplete({
-                        appendTo: document.querySelector('body'),
-                        hint: false,
-                        autoselect: false,
-                        openOnFocus: true,
-                        minLength: 0,
-                        tabAutocomplete: false
-                    }, [{
-                        displayKey: 'value',
-                        source: function (term, cb) {
-                            term = term.toLowerCase();
-
-                            const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
-
-                            cb(filtered);
+                // autocomplete for label values is just nice to have, mobile can keep labels editable without autocomplete
+                if (utils.isDesktop()) {
+                    // no need to await for this, can be done asynchronously
+                    server.get(`attribute-values/${encodeURIComponent(valueAttr.name)}`).then(attributeValues => {
+                        if (attributeValues.length === 0) {
+                            return;
                         }
-                    }]);
 
-                    $input.on('autocomplete:selected', e => this.promotedAttributeChanged(e));
-                });
+                        attributeValues = attributeValues.map(attribute => ({value: attribute}));
+
+                        $input.autocomplete({
+                            appendTo: document.querySelector('body'),
+                            hint: false,
+                            autoselect: false,
+                            openOnFocus: true,
+                            minLength: 0,
+                            tabAutocomplete: false
+                        }, [{
+                            displayKey: 'value',
+                            source: function (term, cb) {
+                                term = term.toLowerCase();
+
+                                const filtered = attributeValues.filter(attr => attr.value.toLowerCase().includes(term));
+
+                                cb(filtered);
+                            }
+                        }]);
+
+                        $input.on('autocomplete:selected', e => this.promotedAttributeChanged(e));
+                    });
+                }
             }
             else if (definition.labelType === 'number') {
                 $input.prop("type", "number");
@@ -219,7 +227,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                     .append($openButton));
             }
             else {
-                ws.logError(`Unknown labelType=${definitionAttr.labelType}`);
+                ws.logError(`Unknown labelType '${definitionAttr.labelType}'`);
             }
         }
         else if (valueAttr.type === 'relation') {
@@ -227,17 +235,22 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                 $input.val(await treeService.getNoteTitle(valueAttr.value));
             }
 
-            // no need to wait for this
-            noteAutocompleteService.initNoteAutocomplete($input, {allowCreatingNotes: true});
+            if (utils.isDesktop()) {
+                // no need to wait for this
+                noteAutocompleteService.initNoteAutocomplete($input, {allowCreatingNotes: true});
 
-            $input.on('autocomplete:noteselected', (event, suggestion, dataset) => {
-                this.promotedAttributeChanged(event);
-            });
+                $input.on('autocomplete:noteselected', (event, suggestion, dataset) => {
+                    this.promotedAttributeChanged(event);
+                });
 
-            $input.setSelectedNotePath(valueAttr.value);
+                $input.setSelectedNotePath(valueAttr.value);
+            } else {
+                // we can't provide user a way to edit the relation so make it read only
+                $input.attr("readonly", "readonly");
+            }
         }
         else {
-            ws.logError(`Unknown attribute type=${valueAttr.type}`);
+            ws.logError(`Unknown attribute type '${valueAttr.type}'`);
             return;
         }