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

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>