Add keyword search on click

src/App.vue

@@ -317,7 +317,7 @@ export default class App extends Vue {
 
   private fireSearchFilterEvent() {
     this.$nextTick(() => {
-      EventBus.$emit(Events.FILTER_SEARCH, { filters: this.searchItemsFiltered, query: this.searchInput.value });
+      EventBus.$emit(Events.FILTER_SEARCH, { filters: this.activeFilters, query: this.searchInput.value });
     });
   }
 

src/components/PackageList.vue

@@ -86,7 +86,7 @@ export default class Packages extends Vue {
       this.packages.all = await DataStore.Instance.getPackages();
       this.packages.loading = false;
       this.packages.data = this.packages.all
-        .filter((item) => args.filters.indexOf(item) >= 0)
+        .filter((item) => args.filters.every((filter) => filter.matches(item, this.packages.all)))
         .filter((item) => {
         if (!args.query) {
           return true;

src/views/PackageDetail.vue

@@ -185,8 +185,17 @@
             <span v-else>{{data.currentPackage.displayName}}</span> -->
             <CrafterAvatar v-for="(crafter, index) in data.currentPackage.crafters" :key="index" :crafter="crafter"></CrafterAvatar>
           </PackageDetailItem>
-          <PackageDetailItem title="Keywords" :bigContent="false" v-if="data.currentPackage.keywords" :icon="$vuetify.icons.tags">
-            <v-chip v-for="keyword in data.currentPackage.keywords" :key="keyword">{{keyword}}</v-chip>
+          <PackageDetailItem title="Keywords" :bigContent="false" v-if="data.currentPackage.tags" :icon="$vuetify.icons.tags">
+            <v-chip
+              v-for="(tag, index) in data.currentPackage.tags"
+              :key="index"
+              @click="onKeywordClick(tag)"
+            >
+              {{tag.value}}
+              <v-avatar>
+                <v-icon>{{$vuetify.icons.search}}</v-icon>
+              </v-avatar>
+            </v-chip>
           </PackageDetailItem>
         </v-layout>
       </v-flex>
@@ -207,6 +216,8 @@ import Config from '../../types/Config';
 import PackageDetailItem from '@/components/PackageDetailItem.vue';
 import CodeBlock from '@/components/CodeBlock.vue';
 import CrafterAvatar from '@/components/CrafterAvatar.vue';
+import { EventBus, Events } from '@/services/event-bus';
+import { setTimeout } from 'timers';
 
 @Component({
   components: {
@@ -305,6 +316,13 @@ export default class PackageDetail extends Vue {
       };
     }
   }
+
+  private onKeywordClick(tag) {
+    router.push(`/`);
+    this.$nextTick(() => {
+      EventBus.$emit(Events.FILTER_SEARCH, { filters: [tag] });
+    });
+  }
 }
 
 </script>

types/Crafter.ts

@@ -108,6 +108,10 @@ export default class Crafter extends Searchable {
     return text;
   }
 
+  public toString(): string {
+    return `${this.name}`;
+  }
+
   public equals(other: Crafter): boolean {
     if (this.email && other.email) {
       return this.email === other.email;

types/Package.ts

@@ -165,6 +165,10 @@ export default class Package extends Searchable implements PackageMetaDataDTO  {
     }
   }
 
+  public toString(): string {
+    return this.name;
+  }
+
   private url2Name(url: string): string {
     if (url.includes('github')) {
       return 'github';

types/Searchable.ts

@@ -8,4 +8,6 @@ export default abstract class Searchable {
   public matchesPattern(pattern: string): boolean {
     return this.getSearchItemText().some((text) => text.toLowerCase().includes(pattern.toLowerCase()));
   }
+
+  public abstract toString(): string;
 }

types/Tag.ts

@@ -35,6 +35,10 @@ export class Tag extends Searchable {
     return false;
   }
 
+  public toString(): string {
+    return this.value;
+  }
+
   public getSearchItemText(): string[] {
     return [
       `#${this.value}`,