viewer: Plugin for Optional chaining and Coalesce. Implemented tag operations (intersection, addition, substraction). Unified Tag.Search

8 files changed, 106 insertions, 21 deletions

diff --git a/viewer/src/@types/tag/Operation.ts b/viewer/src/@types/tag/Operation.ts
new file mode 100644
index 0000000..a0de92b
--- /dev/null
+++ b/viewer/src/@types/tag/Operation.ts
@@ -0,0 +1,5 @@
+export enum Operation {
+    INTERSECTION = '',
+    ADDITION = '+',
+    SUBSTRACTION = '-',
+};
\ No newline at end of file
diff --git a/viewer/src/@types/tag/index.d.ts b/viewer/src/@types/tag/index.d.ts
index 30bbebb..6a0c605 100644
--- a/viewer/src/@types/tag/index.d.ts
+++ b/viewer/src/@types/tag/index.d.ts
@@ -4,9 +4,11 @@ declare namespace Tag {
         items: Gallery.Item[];
         children: Index;
     }
-    interface NodeWithParent extends Node {
-        parent: Node;
+    interface Search extends Node {
+        parent?: Node;
+        operation: string; // Enum Operation
+        display: string;
     }
-    type Search = Node | NodeWithParent;
+    type SearchByOperation = { [index: string]: Tag.Search[] };
     type Index = { [index: string]: Node };
 }
\ No newline at end of file
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index 4121cd7..daca62d 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -6,11 +6,14 @@
     ellipsis
     attached
     :data="filteredTags"
-    field="tag"
+    field="display"
     type="is-black"
     icon="tag"
+    size="is-medium"
     class="panelTagInput"
     @typing="searchTags"
+    @add="onAdd"
+    @remove="onRemove"
   >
     <template slot-scope="props">{{displayOption(props.option)}}</template>
     <template slot="empty">{{$t('tagInput.nomatch')}}</template>
@@ -19,41 +22,70 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { Operation } from "@/@types/tag/Operation";
 
 @Component
 export default class LdTagInput extends Vue {
   filteredTags: Tag.Search[] = [];
 
+  onAdd(e: any) {
+    this.$uiStore.mode = "search";
+  }
+
+  onRemove() {
+    if (this.$uiStore.currentTags.length === 0) this.$uiStore.mode = "navigation";
+  }
+
   displayOption(option: Tag.Search): string {
-    return `${option.tag} (${option.items.length})`;
+    return `${option.display} (${option.items.length})`;
+  }
+
+  extractOperation(filter: string) {
+    const first = filter.slice(0, 1);
+    switch (first) {
+      case Operation.ADDITION:
+      case Operation.SUBSTRACTION:
+        return first;
+      default:
+        return Operation.INTERSECTION;
+    }
   }
 
   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, filterParts[0], filterParts[1]);
+        search = this.searchTagsFromFilterWithCategory(tags, operation, filterParts[0], filterParts[1]);
       } else {
-        search = this.searchTagsFromFilter(tags, filter);
+        search = this.searchTagsFromFilter(tags, operation, filter);
       }
     }
     this.filteredTags = this.cleanupAndSort(search);
   }
 
-  searchTagsFromFilterWithCategory(tags: Tag.Index, category: string, disambiguation: string): Tag.NodeWithParent[] {
+  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, tag: `${node.tag}:${child.tag}` }))
+          .map(child => ({ ...child, parent: node, operation, display: `${operation}${node.tag}:${child.tag}` }))
       );
   }
 
-  searchTagsFromFilter(tags: Tag.Index, filter: string): Tag.Node[] {
-    return Object.values(tags).filter(node => node.tag.includes(filter));
+  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}` }));
   }
 
   cleanupAndSort(search: Tag.Search[]): Tag.Search[] {
diff --git a/viewer/src/components/index.ts b/viewer/src/components/index.ts
index 1406b34..4586f62 100644
--- a/viewer/src/components/index.ts
+++ b/viewer/src/components/index.ts
@@ -17,6 +17,6 @@ requireComponent.keys().forEach(fileName => {
         // Look for the component options on `.default`, which will
         // exist if the component was exported with `export default`,
         // otherwise fall back to module's root.
-        componentConfig.default || componentConfig
+        componentConfig.default ?? componentConfig
     )
 })
\ No newline at end of file
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index e129c57..ba31c9e 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -1,9 +1,19 @@
 import Vue from "vue";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faExpandArrowsAlt, faFolder, faSearch, faTag } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+    faExpandArrowsAlt,
+    faFolder,
+    faSearch,
+    faTag
+} from "@fortawesome/free-solid-svg-icons";
 
-library.add(faExpandArrowsAlt, faFolder, faSearch, faTag);
+library.add(
+    faExpandArrowsAlt,
+    faFolder,
+    faSearch,
+    faTag,
+);
 
 Vue.component("fa-icon", FontAwesomeIcon);
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index ca36a32..8a611ea 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -65,7 +65,7 @@ export default class GalleryStore extends VuexModule {
             const itemFound = item.properties.items
                 .map(item => this.searchCurrentItem(item, path))
                 .find(item => Boolean(item));
-            return itemFound || null;
+            return itemFound ?? null;
         }
         return null;
     }
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index 4a6f487..25d2a28 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -9,7 +9,7 @@ export default class UIStore extends VuexModule {
 
     fullscreen: boolean = false;
     mode: "navigation" | "search" = "navigation";
-    currentTags: Tag.Node[] = [];
+    currentTags: Tag.Search[] = [];
 
     // ---
 
diff --git a/viewer/src/views/Gallery.vue b/viewer/src/views/Gallery.vue
index 38199b9..f04b276 100644
--- a/viewer/src/views/Gallery.vue
+++ b/viewer/src/views/Gallery.vue
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import { Operation } from '@/@types/tag/Operation';
 import GallerySearch from "./GallerySearch.vue";
 import GalleryDirectory from "./GalleryDirectory.vue";
 import GalleryImage from "./GalleryImage.vue";