Semantic model: Add options to display and search Item names and tags

bundles/org.openhab.ui/web/src/components/model/treeview-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <f7-treeview-item selectable :label="(model.item.created === false) ? '(New Item)' : (model.item.label || model.item.name)"
+  <f7-treeview-item selectable :label="(model.item.created === false) ? '(New Item)' : (model.item.label ? (includeItemName ? model.item.label + ' (' + model.item.name + ')' : model.item.label) : model.item.name)"
                     :icon-ios="icon('ios')" :icon-aurora="icon('aurora')" :icon-md="icon('md')"
                     :textColor="iconColor" :color="(model.item.created !== false) ? 'blue' :'orange'"
                     :selected="selected && selected.item.name === model.item.name"
@@ -12,18 +12,32 @@
                          :model="node"
                          @selected="(event) => $emit('selected', event)"
                          :selected="selected"
+                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
                          @checked="(item, check) => $emit('checked', item, check)" />
     <div slot="label" class="semantic-class">
       {{ className() }}
+      <template v-if="includeItemTags">
+        <div class="semantic-class chip" v-for="tag in getNonSemanticTags(model.item)" :key="tag" style="height: 16px; margin-left: 4px">
+          <div class="chip-media bg-color-blue" style="height: 16px; width: 16px">
+            <f7-icon slot="media" ios="f7:tag_fill" md="material:label" aurora="f7:tag_fill" style="font-size: 8px; height: 16px; line-height: 16px" />
+          </div>
+          <div class="chip-label" style="height: 16px; line-height: 16px">
+            {{ tag }}
+          </div>
+        </div>
+      </template>
     </div>
     <f7-checkbox slot="content-start" v-if="model.checkable"
                  :checked="model.checked === true" :disabled="model.disabled" @change="check" />
   </f7-treeview-item>
 </template>
 
 <script>
+import ItemMixin from '@/components/item/item-mixin'
+
 export default {
-  props: ['model', 'selected'],
+  mixins: [ItemMixin],
+  props: ['model', 'selected', 'includeItemName', 'includeItemTags'],
   computed: {
     children () {
       return [this.model.children.locations,

bundles/org.openhab.ui/web/src/pages/settings/model/model.vue

@@ -12,16 +12,41 @@
           :disable-button="!$theme.aurora" />
       </f7-subnavbar>
     </f7-navbar>
-    <f7-toolbar bottom class="toolbar-details">
+
+    <!-- Toolbar -->
+    <f7-toolbar bottom class="toolbar-details" v-if="$f7.width >= 500">
       <f7-link :disabled="selectedItem != null" class="left" @click="selectedItem = null">
         Clear
       </f7-link>
       <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>
+      <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
+    </f7-toolbar>
+    <f7-toolbar bottom class="toolbar-details" v-else style="height: 50px">
+      <f7-link :disabled="selectedItem != null" class="left" @click="selectedItem = null">
+        Clear
+      </f7-link>
+      <div class="padding-left padding-right text-align-center" style="font-size: 12px">
+        <div>
+          <f7-checkbox :checked="includeNonSemantic" @change="toggleNonSemantic" />
+          <label @click="toggleNonSemantic" class="advanced-label">Show non-semantic</label>
+        </div>
+        <div>
+          <f7-checkbox :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>
       </div>
       <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
     </f7-toolbar>
+
     <f7-block v-if="!ready" class="text-align-center">
       <f7-preloader />
       <div>Loading...</div>
@@ -35,6 +60,7 @@
             <f7-treeview>
               <model-treeview-item v-for="node in [rootLocations, rootEquipment, rootPoints, rootGroups, rootItems].flat()"
                                    :key="node.item.name" :model="node"
+                                   :includeItemName="includeItemName" :includeItemTags="includeItemTags"
                                    @selected="selectItem" :selected="selectedItem" />
             </f7-treeview>
           </f7-block>
@@ -213,6 +239,8 @@ export default {
       ready: false,
       loading: false,
       includeNonSemantic: false,
+      includeItemName: false,
+      includeItemTags: false,
       items: [],
       links: [],
       locations: [],
@@ -435,6 +463,14 @@ export default {
       this.includeNonSemantic = !this.includeNonSemantic
       this.load()
     },
+    toggleItemName () {
+      this.includeItemName = !this.includeItemName
+      this.load()
+    },
+    toggleItemTags () {
+      this.includeItemTags = !this.includeItemTags
+      this.load()
+    },
     addSemanticItem (semanticType) {
       this.newItem = {
         type: (semanticType === 'Point') ? 'Switch' : 'Group',