From 7c2576b0cfb0a15b2a14f6f5ea96de16f0c23b44 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 24 Dec 2019 02:22:56 +0100
Subject: viewer: Plugin for Optional chaining and Coalesce. Implemented tag
 operations (intersection, addition, substraction). Unified Tag.Search

---
 viewer/README.md                     |  2 +
 viewer/babel.config.js               |  4 ++
 viewer/package-lock.json             | 76 +++++++++++++++++++++++++++---------
 viewer/package.json                  |  6 ++-
 viewer/src/@types/tag/Operation.ts   |  5 +++
 viewer/src/@types/tag/index.d.ts     |  8 ++--
 viewer/src/components/LdTagInput.vue | 48 +++++++++++++++++++----
 viewer/src/components/index.ts       |  2 +-
 viewer/src/plugins/fontawesome.ts    | 14 ++++++-
 viewer/src/store/galleryStore.ts     |  2 +-
 viewer/src/store/uiStore.ts          |  2 +-
 viewer/src/views/Gallery.vue         | 46 +++++++++++++++++++---
 12 files changed, 173 insertions(+), 42 deletions(-)
 create mode 100644 viewer/src/@types/tag/Operation.ts

diff --git a/viewer/README.md b/viewer/README.md
index 2da36b3..864dcc6 100644
--- a/viewer/README.md
+++ b/viewer/README.md
@@ -1,5 +1,7 @@
 # ldgallery-viewer
 
+If you get errors with optionals and coalesce, enable the Vetur global preference: useWorkspaceDependencies
+
 ## Project setup
 ```
 npm install
diff --git a/viewer/babel.config.js b/viewer/babel.config.js
index 162a3ea..7102a6e 100644
--- a/viewer/babel.config.js
+++ b/viewer/babel.config.js
@@ -1,3 +1,7 @@
 module.exports = {
   presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-nullish-coalescing-operator',
+  ],
 };
diff --git a/viewer/package-lock.json b/viewer/package-lock.json
index 8cf086a..10a0f26 100644
--- a/viewer/package-lock.json
+++ b/viewer/package-lock.json
@@ -343,6 +343,16 @@
         "@babel/plugin-syntax-json-strings": "^7.7.4"
       }
     },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.7.4.tgz",
+      "integrity": "sha512-TbYHmr1Gl1UC7Vo2HVuj/Naci5BEGNZ0AJhzqD2Vpr6QPFWpUmBRLrIDjedzx7/CShq0bRDS2gI4FIs77VHLVQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.7.4"
+      }
+    },
     "@babel/plugin-proposal-object-rest-spread": {
       "version": "7.7.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.7.tgz",
@@ -363,6 +373,16 @@
         "@babel/plugin-syntax-optional-catch-binding": "^7.7.4"
       }
     },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.7.5.tgz",
+      "integrity": "sha512-sOwFqT8JSchtJeDD+CjmWCaiFoLxY4Ps7NjvwHC/U7l4e9i5pTRNt8nDMIFSOUL+ncFbYSwruHM8WknYItWdXw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.7.4"
+      }
+    },
     "@babel/plugin-proposal-unicode-property-regex": {
       "version": "7.7.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz",
@@ -418,6 +438,15 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.7.4.tgz",
+      "integrity": "sha512-XKh/yIRPiQTOeBg0QJjEus5qiSKucKAiApNtO1psqG7D17xmE+X2i5ZqBEuSvo0HRuyPaKaSN/Gy+Ha9KFQolw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-syntax-object-rest-spread": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz",
@@ -436,6 +465,15 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.7.4.tgz",
+      "integrity": "sha512-2MqYD5WjZSbJdUagnJvIdSfkb/ucOC9/1fRJxm7GAxY6YQLWlUvkfxoNbUPcPLHJyetKUDQ4+yyuUyAoc0HriA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-syntax-top-level-await": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz",
@@ -1051,9 +1089,9 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz",
-      "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
+      "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==",
       "dev": true
     },
     "@types/minimatch": {
@@ -1157,12 +1195,12 @@
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.12.0.tgz",
-      "integrity": "sha512-1t4r9rpLuEwl3hgt90jY18wJHSyb0E3orVL3DaqwmpiSDHmHiSspVsvsFF78BJ/3NNG3qmeso836jpuBWYziAA==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.13.0.tgz",
+      "integrity": "sha512-QoiANo0MMGNa8ej/yX3BrW5dZj5d8HYcKiM2fyYUlezECqn8Xc7T/e4EUdiGinn8jhBrn+9X47E9TWaaup3u1g==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "2.12.0",
+        "@typescript-eslint/experimental-utils": "2.13.0",
         "eslint-utils": "^1.4.3",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
@@ -1181,13 +1219,13 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.12.0.tgz",
-      "integrity": "sha512-jv4gYpw5N5BrWF3ntROvCuLe1IjRenLy5+U57J24NbPGwZFAjhnM45qpq0nDH1y/AZMb3Br25YiNVwyPbz6RkA==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.13.0.tgz",
+      "integrity": "sha512-+Hss3clwa6aNiC8ZjA45wEm4FutDV5HsVXPl/rDug1THq6gEtOYRGLqS3JlTk7mSnL5TbJz0LpEbzbPnKvY6sw==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "2.12.0",
+        "@typescript-eslint/typescript-estree": "2.13.0",
         "eslint-scope": "^5.0.0"
       },
       "dependencies": {
@@ -1204,21 +1242,21 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.12.0.tgz",
-      "integrity": "sha512-lPdkwpdzxEfjI8TyTzZqPatkrswLSVu4bqUgnB03fHSOwpC7KSerPgJRgIAf11UGNf7HKjJV6oaPZI4AghLU6g==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.13.0.tgz",
+      "integrity": "sha512-vbDeLr5QRJ1K7x5iRK8J9wuGwR9OVyd1zDAY9XFAQvAosHVjSVbDgkm328ayE6hx2QWVGhwvGaEhedcqAbfQcA==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "2.12.0",
-        "@typescript-eslint/typescript-estree": "2.12.0",
+        "@typescript-eslint/experimental-utils": "2.13.0",
+        "@typescript-eslint/typescript-estree": "2.13.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.12.0.tgz",
-      "integrity": "sha512-rGehVfjHEn8Frh9UW02ZZIfJs6SIIxIu/K1bbci8rFfDE/1lQ8krIJy5OXOV3DVnNdDPtoiPOdEANkLMrwXbiQ==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.13.0.tgz",
+      "integrity": "sha512-t21Mg5cc8T3ADEUGwDisHLIubgXKjuNRbkpzDMLb7/JMmgCe/gHM9FaaujokLey+gwTuLF5ndSQ7/EfQqrQx4g==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
diff --git a/viewer/package.json b/viewer/package.json
index dda1eb4..52ef0d0 100644
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -23,9 +23,11 @@
     "vuex-class-component": "^2.2.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
     "@types/webpack": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^2.12.0",
-    "@typescript-eslint/parser": "^2.12.0",
+    "@typescript-eslint/eslint-plugin": "^2.13.0",
+    "@typescript-eslint/parser": "^2.13.0",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.1",
     "@vue/cli-plugin-router": "^4.1.0",
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";
@@ -29,10 +30,10 @@ export default class Gallery extends Vue {
 
   // Results of the search (by tags)
   get currentSearch(): Gallery.Item[] {
-    const currentTags = this.$uiStore.currentTags;
-    let items = new Set<Gallery.Item>();
-    currentTags.flatMap(tag => tag.items).forEach(item => items.add(item));
-    return [...items];
+    const byOperation = this.extractTagsByOperation(this.$uiStore.currentTags);
+    const intersection = this.extractIntersection(byOperation);
+    const substraction = this.extractSubstraction(byOperation);
+    return this.aggregateAll(byOperation, intersection, substraction);
   }
 
   // Item pointed by the URL (navigation)
@@ -45,7 +46,42 @@ export default class Gallery extends Vue {
   // ---
 
   private checkType(type: string): boolean {
-    return (this.currentItem && this.currentItem.properties.type === type) || false;
+    return this.currentItem?.properties.type === type ?? false;
+  }
+
+  private extractTagsByOperation(currentTags: Tag.Search[]): Tag.SearchByOperation {
+    let byOperation: Tag.SearchByOperation = {};
+    Object.values(Operation)
+      .forEach(operation => byOperation[operation] = currentTags.filter(tag => tag.operation === operation));
+    return byOperation;
+  }
+
+  private extractIntersection(byOperation: Tag.SearchByOperation): Set<Gallery.Item> {
+    let intersection = new Set<Gallery.Item>();
+    if (byOperation[Operation.INTERSECTION].length > 0) {
+      byOperation[Operation.INTERSECTION]
+        .map(tag => tag.items)
+        .reduce((a,b) => a.filter(c => b.includes(c)))
+        .flatMap(items=>items)
+        .forEach(item => intersection.add(item));
+    }
+    return intersection;
+  }
+
+  private extractSubstraction(byOperation: Tag.SearchByOperation): Set<Gallery.Item> {
+    let substraction = new Set<Gallery.Item>();
+    if (byOperation[Operation.SUBSTRACTION].length > 0) {
+      byOperation[Operation.SUBSTRACTION]
+        .flatMap(tag => tag.items)
+        .forEach(item => substraction.add(item));
+    }
+    return substraction;
+  }
+
+  private aggregateAll(byOperation: Tag.SearchByOperation, intersection: Set<Gallery.Item>, substraction: Set<Gallery.Item>): Gallery.Item[] {
+    byOperation[Operation.ADDITION].flatMap(tag => tag.items).forEach(item => intersection.add(item));
+    substraction.forEach(item => intersection.delete(item));
+    return [...intersection];
   }
 }
 </script>
-- 
cgit v1.2.3