Merge pull request #21 from dmstern/#4-trigger-search-filter

#4 trigger search filter
dmstern · Sep 7, 2018 · 5fa43b5 · 5fa43b5
2 parents 3b26ea4 + a1e2298
commit 5fa43b5
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.vue b/src/App.vue
@@ -40,12 +40,13 @@
       <v-btn icon @click.stop="menuVisible = !menuVisible">
         <v-icon>{{$vuetify.icons.menu}}</v-icon>
       </v-btn>
-      <router-link to="/" class="home-button">
-        <v-toolbar-title>
-          <img src="@/../art/logo.svg" alt="npmFrog" class="v-btn--icon">
-          <span class="label hidden-sm-and-down">{{title}}</span>
-        </v-toolbar-title>    
-      </router-link>
+      <v-toolbar-title
+        @click="goHome"
+        class="home-button"
+      >
+        <img src="@/../art/logo.svg" alt="npmFrog" class="v-btn--icon">
+        <span class="label hidden-sm-and-down">{{title}}</span>
+      </v-toolbar-title>    
       <v-autocomplete
         ref="searchbar"
         placeholder="Search package..."
@@ -225,12 +226,26 @@ export default class App extends Vue {
       this.error.msg = res.data;
     });
 
+    EventBus.$on(Events.TRIGGER_FILTER_SEARCH, (args: { filters: Searchable[], query: string }) => {
+      while(this.activeFilters.length > 0) {
+        this.activeFilters.pop();
+      }
+      this.activeFilters.push(...args.filters);
+    });
+
   }
 
   private get searchInput(): HTMLInputElement {
     return this.$refs.searchbar.$el.querySelector('input');
   }
 
+  private goHome() {
+    router.push('/');
+    this.$nextTick(() => {
+      EventBus.$emit(Events.TRIGGER_FILTER_SEARCH, { filters: [] });
+    });
+  }
+
   private loadPackages(): void {
     DataStore.Instance.getPackages().then((packages: Package[]) => {
       this.searchItems =
@@ -317,7 +332,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 });
     });
   }
 
@@ -451,6 +466,8 @@ code.hljs {
 
 
 .home-button {
+  cursor: pointer;
+
   img {
     background-color: $color-white;
   }

diff --git a/src/components/CrafterAvatar.vue b/src/components/CrafterAvatar.vue
@@ -2,7 +2,6 @@
 
 <div class="CrafterAvatar">
   <v-avatar
-    :title="crafter.name"
     :color="`${crafter.color} darken-2`"
     size="32"
     :class="`grey--text text--${

diff --git a/src/components/PackageList.vue b/src/components/PackageList.vue
@@ -81,12 +81,15 @@ export default class Packages extends Vue {
 
     this.loadConfig();
 
-    EventBus.$on(Events.FILTER_SEARCH, async ( args: { filters: Searchable[], query: string} ) => {
+    EventBus.$on([
+      Events.FILTER_SEARCH,
+      Events.TRIGGER_FILTER_SEARCH,
+    ], async ( args: { filters: Searchable[], query: string} ) => {
       this.packages.loading = true;
       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;

diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -32,6 +32,7 @@ const icons = {
   website: 'fas fa-globe',
   externalLink: 'fas fa-external-link-alt',
   terminal: 'fas fa-terminal',
+  email: 'far fa-envelope',
 };
 
 icons.keywords = icons.tags;

diff --git a/src/services/event-bus.ts b/src/services/event-bus.ts
@@ -3,6 +3,7 @@ export const EventBus = new Vue();
 
 export enum Events {
   FILTER_SEARCH = 'filter-search',
+  TRIGGER_FILTER_SEARCH = 'trigger-filter-search',
 }
 
 export enum Errors {

diff --git a/src/views/PackageDetail.vue b/src/views/PackageDetail.vue
@@ -181,12 +181,64 @@
             <timeago :datetime="data.packageDetail.time.modified"></timeago>
           </PackageDetailItem>
           <PackageDetailItem title="Crafted by" v-if="data.currentPackage.author" :icon="$vuetify.icons.author" :bigContent="false">
-            <!-- <a v-if="data.currentPackage.author.email" :href="`mailto:${data.currentPackage.author.email}`">{{data.currentPackage.author.name}}</a>
-            <span v-else>{{data.currentPackage.displayName}}</span> -->
-            <CrafterAvatar v-for="(crafter, index) in data.currentPackage.crafters" :key="index" :crafter="crafter"></CrafterAvatar>
+            <v-menu
+              open-on-hover
+              auto
+              v-for="(crafter, index) in data.currentPackage.crafters"
+              :key="index"
+              top
+              offset-y
+            >
+              <CrafterAvatar
+                :crafter="crafter"
+                slot="activator"
+              ></CrafterAvatar>
+              <v-card>
+                <v-list>
+                  <v-list-tile avatar>
+                    <v-list-tile-avatar>
+                       <CrafterAvatar :crafter="crafter"></CrafterAvatar>
+                    </v-list-tile-avatar>
+
+                    <v-list-tile-content>
+                      <v-list-tile-title>{{crafter.name}}</v-list-tile-title>
+                      <v-list-tile-sub-title>{{crafter.url}}</v-list-tile-sub-title>
+                    </v-list-tile-content>
+
+                  </v-list-tile>
+                </v-list>
+
+                <v-divider></v-divider>
+
+                <v-list>
+                  <v-list-tile @click="onKeywordClick(crafter)">
+                    <v-list-tile-action>
+                      <v-icon>{{$vuetify.icons.arrowTopLeft}}</v-icon>
+                    </v-list-tile-action>
+                    <v-list-tile-title>Search for packages by this crafter</v-list-tile-title>
+                  </v-list-tile>
+
+                  <a :href="`mailto:${crafter.email}`" target="_blank">
+                    <v-list-tile v-if="crafter.email">
+                      <v-list-tile-action>
+                        <v-icon>{{$vuetify.icons.email}}</v-icon>
+                      </v-list-tile-action>
+                      <v-list-tile-title>mailto:{{crafter.email}}</v-list-tile-title>
+                    </v-list-tile>
+                  </a>
+                </v-list>
+              </v-card>
+            </v-menu>
           </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-icon>{{$vuetify.icons.arrowTopLeft}}</v-icon>
+            </v-chip>
           </PackageDetailItem>
         </v-layout>
       </v-flex>
@@ -207,6 +259,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 +359,13 @@ export default class PackageDetail extends Vue {
       };
     }
   }
+
+  private onKeywordClick(tag) {
+    router.push(`/`);
+    this.$nextTick(() => {
+      EventBus.$emit(Events.TRIGGER_FILTER_SEARCH, { filters: [tag] });
+    });
+  }
 }
 
 </script>

diff --git a/types/Crafter.ts b/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;

diff --git a/types/Package.ts b/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';

diff --git a/types/Searchable.ts b/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;
 }
diff --git a/types/Tag.ts b/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}`,