feat: allows for searching by tag (note: requires #149)

src/App.vue

@@ -40,6 +40,7 @@
         <SearchInput
           class="navbar-item is-inline-block-mobile"
           @input="filterServices"
+          :value="filter"
           @search-focus="showMenu = true"
           @search-open="navigateToFirstService"
           @search-cancel="filterServices"
@@ -68,6 +69,7 @@
                 v-for="item in group.items"
                 :key="item.name"
                 v-bind:item="item"
+                @filter="filterTag"
                 :class="['column', `is-${12 / config.columns}`]"
               />
             </template>
@@ -90,6 +92,7 @@
               <Service
                 v-for="item in group.items"
                 v-bind:item="item"
+                @filter="filterTag"
                 :key="item.url"
               />
             </div>
@@ -210,6 +213,35 @@ export default {
         console.warning("fail to open service");
       }
     },
+    filterTag: function (filter) {
+      this.showMenu = true;
+      this.$nextTick(() => {
+        document.getElementById("searchBox").focus();
+      });
+      this.filter = filter;
+
+      if (!filter) {
+        this.services = this.config.services;
+        return;
+      }
+
+      const searchResultItems = [];
+      for (const group of this.config.services) {
+        for (const item of group.items) {
+          if (this.matchesFilter(item)) {
+            searchResultItems.push(item);
+          }
+        }
+      }
+
+      this.services = [
+        {
+          name: filter,
+          icon: "fas fa-search",
+          items: searchResultItems,
+        },
+      ];
+    },
     filterServices: function (filter) {
       this.filter = filter;
 

src/components/SearchInput.vue

@@ -2,6 +2,7 @@
   <div class="search-bar">
     <label for="search" class="search-label"></label>
     <input
+      id="searchBox"
       type="text"
       ref="search"
       :value="value"

src/components/Service.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-bind:is="component" :item="item"></component>
+  <component v-on="$listeners" v-bind:is="component" :item="item"></component>
 </template>
 
 <script>

src/components/services/Generic.vue

@@ -31,7 +31,12 @@ export default {};
               <p class="subtitle is-6">{{ item.subtitle }}</p>
             </div>
           </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+          <div
+            v-on:click="filterTag()"
+            class="tag"
+            :class="item.tagstyle"
+            v-if="item.tag"
+          >
             <strong class="tag-text">#{{ item.tag }}</strong>
           </div>
         </div>
@@ -46,6 +51,11 @@ export default {
   props: {
     item: Object,
   },
+  methods: {
+    filterTag: function () {
+      this.$emit("filter", this.item.tag.toLowerCase());
+    },
+  },
 };
 </script>
 

src/components/services/PiHole.vue

@@ -22,7 +22,12 @@
               {{ status.status }}
             </div>
           </div>
-          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+          <div
+            v-on:click="filterTag()"
+            class="tag"
+            :class="item.tagstyle"
+            v-if="item.tag"
+          >
             <strong class="tag-text">#{{ item.tag }}</strong>
           </div>
         </div>
@@ -51,6 +56,9 @@ export default {
         response.json()
       );
     },
+    filterTag: function () {
+      this.$emit("filter", this.item.tag.toLowerCase());
+    },
   },
 };
 </script>