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

3 files changed, 26 insertions, 21 deletions

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>