aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
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/src/views
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/src/views')
-rw-r--r--viewer/src/views/GalleryNavigation.vue2
-rw-r--r--viewer/src/views/GallerySearch.vue16
-rw-r--r--viewer/src/views/PanelLeft.vue29
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 @@
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 <div v-else>{{$t("gallery.unknowntype")}}</div> 25 <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 @@
22</template> 22</template>
23 23
24<script lang="ts"> 24<script lang="ts">
25import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 25import { Component, Vue, Prop } from "vue-property-decorator";
26import { Operation } from "@/@types/Operation"; 26import { Operation } from "@/@types/Operation";
27import IndexSearch from "@/services/indexsearch"; 27import IndexSearch from "@/services/indexsearch";
28import IndexFactory from "@/services/indexfactory";
29 28
30@Component 29@Component
31export default class GalleryPicture extends Vue { 30export default class GalleryPicture extends Vue {
32 @Prop(String) readonly path!: string; 31 @Prop(String) readonly path!: string;
33 @Prop(Array) readonly query!: string[];
34
35 currentSearch: Tag.Search[] = [];
36 32
37 mounted() { 33 mounted() {
38 this.$uiStore.fullscreen = false; 34 this.$uiStore.fullscreen = false;
39 this.$uiStore.searchMode = true; 35 this.$uiStore.searchMode = true;
40 this.restoreSearchFilters();
41 } 36 }
42 37
43 destroyed() { 38 destroyed() {
@@ -45,14 +40,7 @@ export default class GalleryPicture extends Vue {
45 } 40 }
46 41
47 items() { 42 items() {
48 return IndexSearch.search(this.currentSearch, this.path); 43 return IndexSearch.search(this.$galleryStore.currentSearch, this.path);
49 }
50
51 @Watch("query")
52 restoreSearchFilters() {
53 const tagsIndex = this.$galleryStore.tagsIndex;
54 this.currentSearch = this.query.flatMap(filter => IndexFactory.searchTags(tagsIndex, filter));
55 this.$uiStore.searchFilters = [...this.currentSearch];
56 } 44 }
57} 45}
58</script> 46</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 @@
19 19
20<template> 20<template>
21 <div class="flex-column sidebar"> 21 <div class="flex-column sidebar">
22 <ld-tag-input v-model="$uiStore.searchFilters" :tags-index="$galleryStore.tagsIndex" /> 22 <ld-tag-input :search-filters.sync="searchFilters" :tags-index="$galleryStore.tagsIndex" />
23 <ld-command-search @clear="clear" @search="search" /> 23 <ld-command-search @clear="clear" @search="search" />
24 <h1 class="title">{{$t('panelLeft.propositions')}}</h1> 24 <h1 class="title">{{$t('panelLeft.propositions')}}</h1>
25 <ld-proposition 25 <ld-proposition
26 v-model="$uiStore.searchFilters" 26 :search-filters.sync="searchFilters"
27 :tags-index="$galleryStore.tagsIndex" 27 :tags-index="$galleryStore.tagsIndex"
28 :current-tags="currentTags()" 28 :current-tags="currentTags()"
29 class="scrollbar no-scroll-x" 29 class="scrollbar no-scroll-x"
@@ -32,14 +32,21 @@
32</template> 32</template>
33 33
34<script lang="ts"> 34<script lang="ts">
35import { Component, Vue, Prop } from "vue-property-decorator"; 35import { Component, Vue, Prop, Watch } from "vue-property-decorator";
36import { Dictionary } from "vue-router/types/router"; 36import { Dictionary, Route } from "vue-router/types/router";
37import Navigation from "@/services/navigation"; 37import Navigation from "@/services/navigation";
38import IndexFactory from "@/services/indexfactory";
38 39
39@Component 40@Component
40export default class PanelLeft extends Vue { 41export default class PanelLeft extends Vue {
42 searchFilters: Tag.Search[] = [];
43
44 mounted() {
45 this.restoreSearchFilters(this.$route);
46 }
47
41 clear() { 48 clear() {
42 this.$uiStore.searchFilters = []; 49 this.searchFilters = [];
43 this.search(); 50 this.search();
44 } 51 }
45 52
@@ -52,13 +59,23 @@ export default class PanelLeft extends Vue {
52 59
53 serializeSearch() { 60 serializeSearch() {
54 let query: Dictionary<null> = {}; 61 let query: Dictionary<null> = {};
55 this.$uiStore.searchFilters.forEach(filter => (query[filter.display] = null)); 62 this.searchFilters.forEach(filter => (query[filter.display] = null));
56 return query; 63 return query;
57 } 64 }
58 65
59 currentTags() { 66 currentTags() {
60 return this.$galleryStore.currentItem?.tags ?? []; 67 return this.$galleryStore.currentItem?.tags ?? [];
61 } 68 }
69
70 @Watch("$route")
71 restoreSearchFilters(route: Route) {
72 const query = Object.keys(route.query);
73 if (query.length > 0) {
74 const tagsIndex = this.$galleryStore.tagsIndex;
75 this.searchFilters = Object.keys(route.query).flatMap(filter => IndexFactory.searchTags(tagsIndex, filter));
76 this.$galleryStore.setCurrentSearch([...this.searchFilters]);
77 }
78 }
62} 79}
63</script> 80</script>
64 81