1 files changed, 34 insertions, 60 deletions

diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index 71131e6..6b6e749 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -19,7 +19,7 @@
 
 <template>
   <b-taginput
-    v-model="$uiStore.currentTags"
+    v-model="model"
     :placeholder="$t('tagInput.placeholder')"
     autocomplete
     ellipsis
@@ -27,12 +27,12 @@
     :data="filteredTags"
     field="display"
     type="is-black"
-    icon="tag"
     size="is-medium"
-    class="panelTagInput"
+    class="paneltag-input"
     @typing="searchTags"
-    @add="onAdd"
-    @remove="onRemove"
+    @add="clearCurrentFilter"
+    @remove="clearCurrentFilter"
+    @keydown.enter.native="onKeyEnter"
   >
     <template slot-scope="props">{{displayOption(props.option)}}</template>
     <template slot="empty">{{$t('tagInput.nomatch')}}</template>
@@ -40,84 +40,58 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { Operation } from "@/@types/tag/Operation";
+import { Component, Vue, Prop, PropSync, Emit } from "vue-property-decorator";
+import { Operation } from "@/@types/Operation";
+import Navigation from "@/services/navigation";
+import IndexFactory from "@/services/indexfactory";
 
 @Component
 export default class LdTagInput extends Vue {
-  filteredTags: Tag.Search[] = [];
-
-  onAdd(e: any) {
-    this.$uiStore.mode = "search";
-  }
+  @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
+  @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
 
-  onRemove() {
-    if (this.$uiStore.currentTags.length === 0) this.$uiStore.mode = "navigation";
-  }
+  currentFilter: string = "";
+  filteredTags: Tag.Search[] = [];
 
   displayOption(option: Tag.Search): string {
     return `${option.display} (${option.items.length})`;
   }
 
-  extractOperation(filter: string): Operation {
-    const first = filter.slice(0, 1);
-    switch (first) {
-      case Operation.ADDITION:
-      case Operation.SUBSTRACTION:
-        return first;
-      default:
-        return Operation.INTERSECTION;
-    }
+  filterAlreadyPresent(newSearch: Tag.Search) {
+    return !this.model.find(
+      currentSearch =>
+        currentSearch.tag === newSearch.tag && (!currentSearch.parent || currentSearch.parent === newSearch.parent)
+    );
   }
 
   searchTags(filter: string) {
-    const tags = this.$galleryStore.tags;
-    let search: Tag.Search[] = [];
-    if (tags && filter) {
-      const operation = this.extractOperation(filter);
-      if (operation !== Operation.INTERSECTION) filter = filter.slice(1);
-      if (filter.includes(":")) {
-        const filterParts = filter.split(":");
-        search = this.searchTagsFromFilterWithCategory(tags, operation, filterParts[0], filterParts[1]);
-      } else {
-        search = this.searchTagsFromFilter(tags, operation, filter);
-      }
-    }
-    this.filteredTags = this.cleanupAndSort(search);
+    this.currentFilter = filter;
+    this.filteredTags = IndexFactory.searchTags(this.tagsIndex, filter, false)
+      .filter(this.filterAlreadyPresent)
+      .sort((a, b) => b.items.length - a.items.length);
   }
 
-  searchTagsFromFilterWithCategory(
-    tags: Tag.Index,
-    operation: Operation,
-    category: string,
-    disambiguation: string
-  ): Tag.Search[] {
-    return Object.values(tags)
-      .filter(node => node.tag.includes(category))
-      .flatMap(node =>
-        Object.values(node.children)
-          .filter(child => child.tag.includes(disambiguation))
-          .map(child => ({ ...child, parent: node, operation, display: `${operation}${node.tag}:${child.tag}` }))
-      );
+  clearCurrentFilter() {
+    // Necessary for @keydown.enter.native, nexttick is too short
+    setTimeout(() => {
+      this.currentFilter = "";
+      this.filteredTags = [];
+    });
   }
 
-  searchTagsFromFilter(tags: Tag.Index, operation: Operation, filter: string): Tag.Search[] {
-    return Object.values(tags)
-      .filter(node => node.tag.includes(filter))
-      .map(node => ({ ...node, operation, display: `${operation}${node.tag}` }));
+  onKeyEnter(e: KeyboardEvent) {
+    if (!this.currentFilter) this.onkeyenterEmpty(e);
   }
 
-  cleanupAndSort(search: Tag.Search[]): Tag.Search[] {
-    const currentTags = this.$uiStore.currentTags;
-    return search
-      .filter(node => !currentTags.find(currentTag => currentTag.tag === node.tag))
-      .sort((a, b) => b.items.length - a.items.length);
+  @Emit()
+  onkeyenterEmpty(e: KeyboardEvent) {
+    return e;
   }
 }
 </script>
 
 <style lang="scss">
-.panelTagInput .autocomplete .dropdown-content {
+.paneltag-input .autocomplete .dropdown-content {
   max-height: 300px;
 }
 </style>