From 6f167a51fe101c2164be01e1de7ba3bfb24ac663 Mon Sep 17 00:00:00 2001
From: jimtng <2554958+jimtng@users.noreply.github.com>
Date: Sat, 10 Feb 2024 08:10:49 +1000
Subject: [PATCH] Model picker popup: Add "Show name" and "Show tags" options
 (#2320)

This makes it easier to find items e.g. when building rules

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
---
 .../src/components/model/model-picker-popup.vue   | 15 +++++++++++++++
 .../web/src/components/model/model-treeview.vue   |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue b/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
index 5e6b45887f..16233cb420 100644
--- a/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
@@ -34,12 +34,17 @@
         <div class="padding-right text-align-right">
           <f7-checkbox :checked="includeNonSemantic" @change="toggleNonSemantic" />
           <label @click="toggleNonSemantic" class="advanced-label">Show non-semantic</label>
+          <f7-checkbox style="margin-left: 5px" :checked="includeItemName" @change="toggleItemName" />
+          <label @click="toggleItemName" class="advanced-label">Show name</label>
+          <f7-checkbox style="margin-left: 5px" :checked="includeItemTags" @change="toggleItemTags" />
+          <label @click="toggleItemTags" class="advanced-label">Show tags</label>
         </div>
         <span />
         <!-- <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up"></f7-link> -->
       </f7-toolbar>
       <f7-block strong class="no-padding" v-if="ready">
         <model-treeview class="model-picker-treeview" :root-nodes="rootNodes"
+                        :includeItemName="includeItemName" :includeItemTags="includeItemTags"
                         :selected-item="selectedItem" @selected="selectItem" @checked="checkItem" />
       </f7-block>
       <f7-block v-else-if="!ready" class="text-align-center">
@@ -79,6 +84,8 @@ export default {
       loading: false,
       initSearchbar: false,
       includeNonSemantic: false,
+      includeItemName: false,
+      includeItemTags: false,
       expanded: false,
       items: [],
       links: [],
@@ -287,6 +294,14 @@ export default {
       this.includeNonSemantic = !this.includeNonSemantic
       this.load()
     },
+    toggleItemName () {
+      this.includeItemName = !this.includeItemName
+      this.load()
+    },
+    toggleItemTags () {
+      this.includeItemTags = !this.includeItemTags
+      this.load()
+    },
     toggleExpanded () {
       this.expanded = !this.expanded
 
diff --git a/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue b/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
index 8ff3da7cda..61b28f3a97 100644
--- a/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
@@ -2,6 +2,7 @@
   <f7-treeview class="model-treeview">
     <model-treeview-item v-for="node in rootNodes"
                          :key="node.item.name" :model="node"
+                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
                          @selected="nodeSelected" :selected="selectedItem"
                          @checked="(item, check) => $emit('checked', item, check)" />
   </f7-treeview>
@@ -21,7 +22,7 @@
 
 <script>
 export default {
-  props: ['rootNodes', 'selectedItem'],
+  props: ['rootNodes', 'selectedItem', 'includeItemName', 'includeItemTags'],
   methods: {
     nodeSelected (node) {
       this.$emit('selected', node)