add promoted attributes widget to the mobile version, closes #4314

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": {

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()

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,6 +152,8 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
             if (definition.labelType === 'text') {
                 $input.prop("type", "text");
 
+                // 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) {
@@ -176,6 +183,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                         $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,6 +235,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                 $input.val(await treeService.getNoteTitle(valueAttr.value));
             }
 
+            if (utils.isDesktop()) {
                 // no need to wait for this
                 noteAutocompleteService.initNoteAutocomplete($input, {allowCreatingNotes: true});
 
@@ -235,9 +244,13 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                 });
 
                 $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;
         }