From 7c2a2ff46469d5e8f44fb3ec7feae5f798e0baf8 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 27 Feb 2020 17:23:32 +0100
Subject: viewer: architectural fixes and improvements

Make use of VueX's strict mode (which is different from vuex-class-component strict mode)
Fixed issues and bad-practices with search filter tags mutations
Correctly implement the new index.json format
---
 viewer/src/@types/gallery.d.ts          |  3 ++-
 viewer/src/components/LdBreadcrumb.vue  |  2 +-
 viewer/src/components/LdCommand.vue     |  2 +-
 viewer/src/components/LdProposition.vue |  4 ++--
 viewer/src/components/LdTagInput.vue    |  4 ++--
 viewer/src/store/galleryStore.ts        | 23 +++++++++++++++--------
 viewer/src/store/index.ts               |  3 ++-
 viewer/src/store/uiStore.ts             |  1 -
 viewer/src/views/GalleryNavigation.vue  |  2 +-
 viewer/src/views/GallerySearch.vue      | 16 ++--------------
 viewer/src/views/PanelLeft.vue          | 29 +++++++++++++++++++++++------
 11 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index d7645b6..399fb66 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -27,8 +27,9 @@ declare namespace Gallery {
     }
     interface Index {
         properties: GalleryProperties,
-        tree: Item
+        tree: Directory
     }
+
     interface Other extends Item {
         properties: OtherProperties,
     }
diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index 2ac1216..2b45b71 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -53,7 +53,7 @@ import Navigation from "@/services/navigation";
 
 @Component
 export default class LdBreadcrumb extends Vue {
-  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
   @Prop(Boolean) readonly searchMode!: boolean;
   @Ref() readonly breadcrumb!: HTMLUListElement;
 
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index 367e08f..398107e 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -44,7 +44,7 @@ import { RawLocation } from "vue-router";
 
 @Component
 export default class LdCommand extends Vue {
-  @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[];
+  @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
 
   commandToggleSearchPanelIcon(): string {
     return this.$uiStore.fullWidth ? "search" : "angle-double-left";
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 7f6521f..375c482 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -49,14 +49,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Model, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
 
 @Component
 export default class LdProposition extends Vue {
   @Prop({ type: Array, required: true }) readonly currentTags!: string[];
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
-  @Model() model!: Tag.Search[];
+  @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
 
   get Operation() {
     return Operation;
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index ad0845e..b2a2c58 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Model, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
 import Navigation from "@/services/navigation";
 import IndexFactory from "@/services/indexfactory";
@@ -46,7 +46,7 @@ import IndexFactory from "@/services/indexfactory";
 @Component
 export default class LdTagInput extends Vue {
   @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
-  @Model() model!: Tag.Search[];
+  @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
 
   filteredTags: Tag.Search[] = [];
 
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index cd09996..84673b5 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -29,9 +29,10 @@ const VuexModule = createModule({
 export default class GalleryStore extends VuexModule {
 
     config: Gallery.Config | null = null;
-    galleryItemsRoot: Gallery.Item | null = null;
+    galleryIndex: Gallery.Index | null = null;
     tagsIndex: Tag.Index = {};
     currentPath: string = "/";
+    currentSearch: Tag.Search[] = [];
 
     // ---
 
@@ -39,20 +40,26 @@ export default class GalleryStore extends VuexModule {
         this.config = config;
     }
 
-    @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) {
-        this.galleryItemsRoot = galleryItemsRoot;
+    @mutation setGalleryIndex(galleryIndex: Gallery.Index) {
+        this.galleryIndex = Object.freeze(galleryIndex);
     }
 
     @mutation private setTagsIndex(tagsIndex: Tag.Index) {
-        this.tagsIndex = tagsIndex;
+        this.tagsIndex = Object.freeze(tagsIndex);
     }
 
     @mutation setCurrentPath(currentPath: string) {
         this.currentPath = currentPath;
     }
 
+    @mutation setCurrentSearch(currentSearch: Tag.Search[]) {
+        this.currentSearch = currentSearch;
+    }
+
+    // ---
+
     get currentItemPath(): Gallery.Item[] {
-        const root = this.galleryItemsRoot;
+        const root = this.galleryIndex?.tree;
         if (root)
             return Navigation.searchCurrentItemPath(root, this.currentPath);
         return [];
@@ -77,14 +84,14 @@ export default class GalleryStore extends VuexModule {
         const root = this.config?.galleryRoot ?? '';
         return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json`, { cache: "no-cache" })
             .then(response => response.json())
-            .then(index => index.tree)
-            .then(this.setGalleryItemsRoot)
+            .then(this.setGalleryIndex)
             .then(this.indexTags);
     }
 
     // Indexes the gallery
     @action async indexTags() {
-        this.setTagsIndex(IndexFactory.generateTags(this.galleryItemsRoot));
+        const root = this.galleryIndex?.tree ?? null;
+        this.setTagsIndex(IndexFactory.generateTags(root));
     }
 
 }
diff --git a/viewer/src/store/index.ts b/viewer/src/store/index.ts
index 0277fa4..956d4fd 100644
--- a/viewer/src/store/index.ts
+++ b/viewer/src/store/index.ts
@@ -30,7 +30,8 @@ const store = new Vuex.Store({
   modules: {
     ...extractVuexModule(UIStore),
     ...extractVuexModule(GalleryStore)
-  }
+  },
+  strict: process.env.NODE_ENV !== "production",
 });
 
 Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore));
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index 5b6e1ca..1e63b3e 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -29,7 +29,6 @@ export default class UIStore extends VuexModule {
     fullscreen: boolean = false;
     fullWidth: boolean = true;
     searchMode: boolean = false;
-    searchFilters: Tag.Search[] = [];
 
     // ---
 
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index e09b292..fafb2ed 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -19,7 +19,7 @@
 
 <template>
   <div>
-    <gallery-search v-if="query.length" :path="path" :query="query" />
+    <gallery-search v-if="query.length" :path="path" />
     <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" />
     <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" />
     <div v-else>{{$t("gallery.unknowntype")}}</div>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index f4c28b0..4b6dd7f 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -22,22 +22,17 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import { Component, Vue, Prop } from "vue-property-decorator";
 import { Operation } from "@/@types/Operation";
 import IndexSearch from "@/services/indexsearch";
-import IndexFactory from "@/services/indexfactory";
 
 @Component
 export default class GalleryPicture extends Vue {
   @Prop(String) readonly path!: string;
-  @Prop(Array) readonly query!: string[];
-
-  currentSearch: Tag.Search[] = [];
 
   mounted() {
     this.$uiStore.fullscreen = false;
     this.$uiStore.searchMode = true;
-    this.restoreSearchFilters();
   }
 
   destroyed() {
@@ -45,14 +40,7 @@ export default class GalleryPicture extends Vue {
   }
 
   items() {
-    return IndexSearch.search(this.currentSearch, this.path);
-  }
-
-  @Watch("query")
-  restoreSearchFilters() {
-    const tagsIndex = this.$galleryStore.tagsIndex;
-    this.currentSearch = this.query.flatMap(filter => IndexFactory.searchTags(tagsIndex, filter));
-    this.$uiStore.searchFilters = [...this.currentSearch];
+    return IndexSearch.search(this.$galleryStore.currentSearch, this.path);
   }
 }
 </script>
diff --git a/viewer/src/views/PanelLeft.vue b/viewer/src/views/PanelLeft.vue
index 6292e78..54b9c63 100644
--- a/viewer/src/views/PanelLeft.vue
+++ b/viewer/src/views/PanelLeft.vue
@@ -19,11 +19,11 @@
 
 <template>
   <div class="flex-column sidebar">
-    <ld-tag-input v-model="$uiStore.searchFilters" :tags-index="$galleryStore.tagsIndex" />
+    <ld-tag-input :search-filters.sync="searchFilters" :tags-index="$galleryStore.tagsIndex" />
     <ld-command-search @clear="clear" @search="search" />
     <h1 class="title">{{$t('panelLeft.propositions')}}</h1>
     <ld-proposition
-      v-model="$uiStore.searchFilters"
+      :search-filters.sync="searchFilters"
       :tags-index="$galleryStore.tagsIndex"
       :current-tags="currentTags()"
       class="scrollbar no-scroll-x"
@@ -32,14 +32,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-import { Dictionary } from "vue-router/types/router";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import { Dictionary, Route } from "vue-router/types/router";
 import Navigation from "@/services/navigation";
+import IndexFactory from "@/services/indexfactory";
 
 @Component
 export default class PanelLeft extends Vue {
+  searchFilters: Tag.Search[] = [];
+
+  mounted() {
+    this.restoreSearchFilters(this.$route);
+  }
+
   clear() {
-    this.$uiStore.searchFilters = [];
+    this.searchFilters = [];
     this.search();
   }
 
@@ -52,13 +59,23 @@ export default class PanelLeft extends Vue {
 
   serializeSearch() {
     let query: Dictionary<null> = {};
-    this.$uiStore.searchFilters.forEach(filter => (query[filter.display] = null));
+    this.searchFilters.forEach(filter => (query[filter.display] = null));
     return query;
   }
 
   currentTags() {
     return this.$galleryStore.currentItem?.tags ?? [];
   }
+
+  @Watch("$route")
+  restoreSearchFilters(route: Route) {
+    const query = Object.keys(route.query);
+    if (query.length > 0) {
+      const tagsIndex = this.$galleryStore.tagsIndex;
+      this.searchFilters = Object.keys(route.query).flatMap(filter => IndexFactory.searchTags(tagsIndex, filter));
+      this.$galleryStore.setCurrentSearch([...this.searchFilters]);
+    }
+  }
 }
 </script>
 
-- 
cgit v1.2.3