aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorZero~Informatique2020-02-27 17:23:32 +0100
committerZero~Informatique2020-02-27 17:53:41 +0100
commit7c2a2ff46469d5e8f44fb3ec7feae5f798e0baf8 (patch)
tree9b4c12bd263013687f8cec3f0002122bd458aa49 /viewer
parentd862c99d6ee74f25261c00fcfee3a6e551501f16 (diff)
downloadldgallery-7c2a2ff46469d5e8f44fb3ec7feae5f798e0baf8.tar.gz
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
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/@types/gallery.d.ts3
-rw-r--r--viewer/src/components/LdBreadcrumb.vue2
-rw-r--r--viewer/src/components/LdCommand.vue2
-rw-r--r--viewer/src/components/LdProposition.vue4
-rw-r--r--viewer/src/components/LdTagInput.vue4
-rw-r--r--viewer/src/store/galleryStore.ts23
-rw-r--r--viewer/src/store/index.ts3
-rw-r--r--viewer/src/store/uiStore.ts1
-rw-r--r--viewer/src/views/GalleryNavigation.vue2
-rw-r--r--viewer/src/views/GallerySearch.vue16
-rw-r--r--viewer/src/views/PanelLeft.vue29
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 {
27 } 27 }
28 interface Index { 28 interface Index {
29 properties: GalleryProperties, 29 properties: GalleryProperties,
30 tree: Item 30 tree: Directory
31 } 31 }
32
32 interface Other extends Item { 33 interface Other extends Item {
33 properties: OtherProperties, 34 properties: OtherProperties,
34 } 35 }
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";
53 53
54@Component 54@Component
55export default class LdBreadcrumb extends Vue { 55export default class LdBreadcrumb extends Vue {
56 @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[]; 56 @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
57 @Prop(Boolean) readonly searchMode!: boolean; 57 @Prop(Boolean) readonly searchMode!: boolean;
58 @Ref() readonly breadcrumb!: HTMLUListElement; 58 @Ref() readonly breadcrumb!: HTMLUListElement;
59 59
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";
44 44
45@Component 45@Component
46export default class LdCommand extends Vue { 46export default class LdCommand extends Vue {
47 @Prop({ required: true }) readonly currentItemPath!: Gallery.Item[]; 47 @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
48 48
49 commandToggleSearchPanelIcon(): string { 49 commandToggleSearchPanelIcon(): string {
50 return this.$uiStore.fullWidth ? "search" : "angle-double-left"; 50 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 @@
49</template> 49</template>
50 50
51<script lang="ts"> 51<script lang="ts">
52import { Component, Vue, Model, Prop } from "vue-property-decorator"; 52import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
53import { Operation } from "@/@types/Operation"; 53import { Operation } from "@/@types/Operation";
54 54
55@Component 55@Component
56export default class LdProposition extends Vue { 56export default class LdProposition extends Vue {
57 @Prop({ type: Array, required: true }) readonly currentTags!: string[]; 57 @Prop({ type: Array, required: true }) readonly currentTags!: string[];
58 @Prop({ required: true }) readonly tagsIndex!: Tag.Index; 58 @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
59 @Model() model!: Tag.Search[]; 59 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
60 60
61 get Operation() { 61 get Operation() {
62 return Operation; 62 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 @@
38</template> 38</template>
39 39
40<script lang="ts"> 40<script lang="ts">
41import { Component, Vue, Model, Prop } from "vue-property-decorator"; 41import { Component, Vue, Prop, PropSync } from "vue-property-decorator";
42import { Operation } from "@/@types/Operation"; 42import { Operation } from "@/@types/Operation";
43import Navigation from "@/services/navigation"; 43import Navigation from "@/services/navigation";
44import IndexFactory from "@/services/indexfactory"; 44import IndexFactory from "@/services/indexfactory";
@@ -46,7 +46,7 @@ import IndexFactory from "@/services/indexfactory";
46@Component 46@Component
47export default class LdTagInput extends Vue { 47export default class LdTagInput extends Vue {
48 @Prop({ required: true }) readonly tagsIndex!: Tag.Index; 48 @Prop({ required: true }) readonly tagsIndex!: Tag.Index;
49 @Model() model!: Tag.Search[]; 49 @PropSync("searchFilters", { type: Array, required: true }) model!: Tag.Search[];
50 50
51 filteredTags: Tag.Search[] = []; 51 filteredTags: Tag.Search[] = [];
52 52
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({
29export default class GalleryStore extends VuexModule { 29export default class GalleryStore extends VuexModule {
30 30
31 config: Gallery.Config | null = null; 31 config: Gallery.Config | null = null;
32 galleryItemsRoot: Gallery.Item | null = null; 32 galleryIndex: Gallery.Index | null = null;
33 tagsIndex: Tag.Index = {}; 33 tagsIndex: Tag.Index = {};
34 currentPath: string = "/"; 34 currentPath: string = "/";
35 currentSearch: Tag.Search[] = [];
35 36
36 // --- 37 // ---
37 38
@@ -39,20 +40,26 @@ export default class GalleryStore extends VuexModule {
39 this.config = config; 40 this.config = config;
40 } 41 }
41 42
42 @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) { 43 @mutation setGalleryIndex(galleryIndex: Gallery.Index) {
43 this.galleryItemsRoot = galleryItemsRoot; 44 this.galleryIndex = Object.freeze(galleryIndex);
44 } 45 }
45 46
46 @mutation private setTagsIndex(tagsIndex: Tag.Index) { 47 @mutation private setTagsIndex(tagsIndex: Tag.Index) {
47 this.tagsIndex = tagsIndex; 48 this.tagsIndex = Object.freeze(tagsIndex);
48 } 49 }
49 50
50 @mutation setCurrentPath(currentPath: string) { 51 @mutation setCurrentPath(currentPath: string) {
51 this.currentPath = currentPath; 52 this.currentPath = currentPath;
52 } 53 }
53 54
55 @mutation setCurrentSearch(currentSearch: Tag.Search[]) {
56 this.currentSearch = currentSearch;
57 }
58
59 // ---
60
54 get currentItemPath(): Gallery.Item[] { 61 get currentItemPath(): Gallery.Item[] {
55 const root = this.galleryItemsRoot; 62 const root = this.galleryIndex?.tree;
56 if (root) 63 if (root)
57 return Navigation.searchCurrentItemPath(root, this.currentPath); 64 return Navigation.searchCurrentItemPath(root, this.currentPath);
58 return []; 65 return [];
@@ -77,14 +84,14 @@ export default class GalleryStore extends VuexModule {
77 const root = this.config?.galleryRoot ?? ''; 84 const root = this.config?.galleryRoot ?? '';
78 return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json`, { cache: "no-cache" }) 85 return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json`, { cache: "no-cache" })
79 .then(response => response.json()) 86 .then(response => response.json())
80 .then(index => index.tree) 87 .then(this.setGalleryIndex)
81 .then(this.setGalleryItemsRoot)
82 .then(this.indexTags); 88 .then(this.indexTags);
83 } 89 }
84 90
85 // Indexes the gallery 91 // Indexes the gallery
86 @action async indexTags() { 92 @action async indexTags() {
87 this.setTagsIndex(IndexFactory.generateTags(this.galleryItemsRoot)); 93 const root = this.galleryIndex?.tree ?? null;
94 this.setTagsIndex(IndexFactory.generateTags(root));
88 } 95 }
89 96
90} 97}
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({
30 modules: { 30 modules: {
31 ...extractVuexModule(UIStore), 31 ...extractVuexModule(UIStore),
32 ...extractVuexModule(GalleryStore) 32 ...extractVuexModule(GalleryStore)
33 } 33 },
34 strict: process.env.NODE_ENV !== "production",
34}); 35});
35 36
36Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore)); 37Vue.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 {
29 fullscreen: boolean = false; 29 fullscreen: boolean = false;
30 fullWidth: boolean = true; 30 fullWidth: boolean = true;
31 searchMode: boolean = false; 31 searchMode: boolean = false;
32 searchFilters: Tag.Search[] = [];
33 32
34 // --- 33 // ---
35 34
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 @@
19 19
20<template> 20<template>
21 <div> 21 <div>
22 <gallery-search v-if="query.length" :path="path" :query="query" /> 22 <gallery-search v-if="query.length" :path="path" />
23 <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" /> 23 <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" />
24 <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" /> 24 <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" />
25