diff options
Diffstat (limited to 'viewer')
-rw-r--r-- | viewer/src/@types/gallery.d.ts | 3 | ||||
-rw-r--r-- | viewer/src/components/LdCommandSort.vue | 17 | ||||
-rw-r--r-- | viewer/src/services/itemComparators.ts (renamed from viewer/src/services/itemSortFn.ts) | 4 | ||||
-rw-r--r-- | viewer/src/store/uiStore.ts | 21 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 1 |
5 files changed, 36 insertions, 10 deletions
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts index b756331..8ef8fc7 100644 --- a/viewer/src/@types/gallery.d.ts +++ b/viewer/src/@types/gallery.d.ts | |||
@@ -18,9 +18,12 @@ | |||
18 | */ | 18 | */ |
19 | 19 | ||
20 | declare namespace Gallery { | 20 | declare namespace Gallery { |
21 | type ItemSortStr = "name_asc" | "date_desc"; | ||
22 | |||
21 | interface Config { | 23 | interface Config { |
22 | galleryRoot: string; | 24 | galleryRoot: string; |
23 | galleryIndex?: string; | 25 | galleryIndex?: string; |
26 | initialSort?: ItemSortStr; | ||
24 | initialTagDisplayLimit?: number; | 27 | initialTagDisplayLimit?: number; |
25 | } | 28 | } |
26 | 29 | ||
diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue index 1eef5d3..a412afc 100644 --- a/viewer/src/components/LdCommandSort.vue +++ b/viewer/src/components/LdCommandSort.vue | |||
@@ -31,19 +31,28 @@ | |||
31 | </template> | 31 | </template> |
32 | 32 | ||
33 | <script lang="ts"> | 33 | <script lang="ts"> |
34 | import { Component, Vue, Prop } from "vue-property-decorator"; | 34 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; |
35 | import { RawLocation } from "vue-router"; | 35 | import { RawLocation } from "vue-router"; |
36 | import ItemSortFn from "@/services/itemSortFn"; | 36 | import ItemComparators, { ItemComparator } from "@/services/itemComparators"; |
37 | 37 | ||
38 | @Component | 38 | @Component |
39 | export default class LdCommandSort extends Vue { | 39 | export default class LdCommandSort extends Vue { |
40 | readonly SORTS = [ | 40 | readonly SORTS = [ |
41 | { name: this.$t("command.sort.byNameAsc"), fn: ItemSortFn.sortByNameAsc }, | 41 | { name: this.$t("command.sort.byNameAsc"), fn: ItemComparators.sortByNameAsc }, |
42 | { name: this.$t("command.sort.byDateDesc"), fn: ItemSortFn.sortByDateDesc }, | 42 | { name: this.$t("command.sort.byDateDesc"), fn: ItemComparators.sortByDateDesc }, |
43 | ]; | 43 | ]; |
44 | 44 | ||
45 | selectedSort = 0; | 45 | selectedSort = 0; |
46 | 46 | ||
47 | created() { | ||
48 | this.onChangeStore(this.$uiStore.sortFn); | ||
49 | } | ||
50 | |||
51 | @Watch("$uiStore.sortFn") | ||
52 | onChangeStore(newFn: ItemComparator) { | ||
53 | this.selectedSort = this.SORTS.map(s => s.fn).indexOf(newFn); | ||
54 | } | ||
55 | |||
47 | onChangeSort(newValue: number) { | 56 | onChangeSort(newValue: number) { |
48 | this.$uiStore.setSortFn(this.SORTS[newValue].fn); | 57 | this.$uiStore.setSortFn(this.SORTS[newValue].fn); |
49 | } | 58 | } |
diff --git a/viewer/src/services/itemSortFn.ts b/viewer/src/services/itemComparators.ts index a7e0883..c8fedbe 100644 --- a/viewer/src/services/itemSortFn.ts +++ b/viewer/src/services/itemComparators.ts | |||
@@ -17,7 +17,9 @@ | |||
17 | -- along with this program. If not, see <https://www.gnu.org/licenses/>. | 17 | -- along with this program. If not, see <https://www.gnu.org/licenses/>. |
18 | */ | 18 | */ |
19 | 19 | ||
20 | export default class ItemSortFn { | 20 | export type ItemComparator = (left: Gallery.Item, right: Gallery.Item) => number; |
21 | |||
22 | export default class ItemComparators { | ||
21 | static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number { | 23 | static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number { |
22 | return left.title.localeCompare(right.title); | 24 | return left.title.localeCompare(right.title); |
23 | } | 25 | } |
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts index 2d583fc..04f14a0 100644 --- a/viewer/src/store/uiStore.ts +++ b/viewer/src/store/uiStore.ts | |||
@@ -18,20 +18,18 @@ | |||
18 | */ | 18 | */ |
19 | 19 | ||
20 | import { createModule, mutation, action } from "vuex-class-component"; | 20 | import { createModule, mutation, action } from "vuex-class-component"; |
21 | import ItemSortFn from "@/services/itemSortFn"; | 21 | import ItemComparators, { ItemComparator } from "@/services/itemComparators"; |
22 | 22 | ||
23 | const VuexModule = createModule({ | 23 | const VuexModule = createModule({ |
24 | namespaced: "uiStore", | 24 | namespaced: "uiStore", |
25 | strict: true, | 25 | strict: true, |
26 | }); | 26 | }); |
27 | 27 | ||
28 | type TItemSortFn = (left: Gallery.Item, right: Gallery.Item) => number; | ||
29 | |||
30 | export default class UIStore extends VuexModule { | 28 | export default class UIStore extends VuexModule { |
31 | fullscreen: boolean = false; | 29 | fullscreen: boolean = false; |
32 | fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT); | 30 | fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT); |
33 | searchMode: boolean = false; | 31 | searchMode: boolean = false; |
34 | sortFn: TItemSortFn = ItemSortFn.sortByNameAsc; | 32 | sortFn: ItemComparator = ItemComparators.sortByNameAsc; |
35 | 33 | ||
36 | // --- | 34 | // --- |
37 | 35 | ||
@@ -47,7 +45,20 @@ export default class UIStore extends VuexModule { | |||
47 | this.searchMode = value ?? !this.searchMode; | 45 | this.searchMode = value ?? !this.searchMode; |
48 | } | 46 | } |
49 | 47 | ||
50 | @mutation setSortFn(sortFn: TItemSortFn) { | 48 | @mutation setSortFn(sortFn: ItemComparator) { |
51 | this.sortFn = sortFn; | 49 | this.sortFn = sortFn; |
52 | } | 50 | } |
51 | |||
52 | @action async initFromConfig(config: Gallery.Config) { | ||
53 | switch (config.initialSort ?? "") { | ||
54 | case "date_desc": | ||
55 | this.setSortFn(ItemComparators.sortByDateDesc); | ||
56 | break; | ||
57 | case "name_asc": | ||
58 | case "": | ||
59 | break; | ||
60 | default: | ||
61 | throw new Error("Unknown sort type: " + config.initialSort); | ||
62 | } | ||
63 | } | ||
53 | } | 64 | } |
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index d9ae954..6ef9a3b 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue | |||
@@ -64,6 +64,7 @@ export default class MainLayout extends Vue { | |||
64 | this.isLoading = true; | 64 | this.isLoading = true; |
65 | this.$galleryStore | 65 | this.$galleryStore |
66 | .fetchConfig() | 66 | .fetchConfig() |
67 | .then(this.$uiStore.initFromConfig) | ||
67 | .then(this.$galleryStore.fetchGalleryItems) | 68 | .then(this.$galleryStore.fetchGalleryItems) |
68 | .finally(() => (this.isLoading = false)) | 69 | .finally(() => (this.isLoading = false)) |
69 | .catch(this.displayError); | 70 | .catch(this.displayError); |