aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorZero~Informatique2020-09-25 10:42:33 +0200
committerZero~Informatique2020-09-25 10:44:45 +0200
commit26210d495aed813baac1095b5c7a7c7879d2d206 (patch)
tree59360f49bb18c71f0576841fcc66ca8154567130 /viewer
parent25a9af7212d757a53258990668620157c8ebe2e5 (diff)
downloadldgallery-26210d495aed813baac1095b5c7a7c7879d2d206.tar.gz
viewer: refactor how the available sorts are stored
github: resolves #259
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/components/LdCommandSort.vue13
-rw-r--r--viewer/src/components/LdGallery.vue2
-rw-r--r--viewer/src/services/itemComparators.ts17
-rw-r--r--viewer/src/store/uiStore.ts12
4 files changed, 20 insertions, 24 deletions
diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue
index 30644c1..cfaa5c1 100644
--- a/viewer/src/components/LdCommandSort.vue
+++ b/viewer/src/components/LdCommandSort.vue
@@ -23,8 +23,8 @@
23 <a slot="trigger" class="link"> 23 <a slot="trigger" class="link">
24 <fa-icon icon="sort-amount-down" size="lg" /> 24 <fa-icon icon="sort-amount-down" size="lg" />
25 </a> 25 </a>
26 <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="idx"> 26 <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="sort">
27 <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" /> 27 <fa-icon :icon="['far', sort === selectedSort ? 'dot-circle' : 'circle']" />
28 <span :class="$style.dropdownLabel">{{ sort.text }}</span> 28 <span :class="$style.dropdownLabel">{{ sort.text }}</span>
29 </b-dropdown-item> 29 </b-dropdown-item>
30 </b-dropdown> 30 </b-dropdown>
@@ -32,19 +32,18 @@
32 32
33<script lang="ts"> 33<script lang="ts">
34import { Component, Vue, Prop } from "vue-property-decorator"; 34import { Component, Vue, Prop } from "vue-property-decorator";
35import { RawLocation } from "vue-router"; 35import ItemComparators, { ItemSort } from "@/services/itemComparators";
36import ItemComparators, { ItemComparator } from "@/services/itemComparators";
37 36
38@Component 37@Component
39export default class LdCommandSort extends Vue { 38export default class LdCommandSort extends Vue {
40 readonly ITEM_SORTS = ItemComparators.ITEM_SORTS; 39 readonly ITEM_SORTS = ItemComparators.ITEM_SORTS;
41 40
42 get selectedSort() { 41 get selectedSort() {
43 return this.ITEM_SORTS.map(s => s.fn).indexOf(this.$uiStore.sortFn); 42 return this.$uiStore.sort;
44 } 43 }
45 44
46 set selectedSort(newValue: number) { 45 set selectedSort(newValue: ItemSort) {
47 this.$uiStore.setSortFn(this.ITEM_SORTS[newValue].fn); 46 this.$uiStore.setSort(newValue);
48 } 47 }
49} 48}
50</script> 49</script>
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
index 0c0a43c..edd479c 100644
--- a/viewer/src/components/LdGallery.vue
+++ b/viewer/src/components/LdGallery.vue
@@ -36,7 +36,7 @@ export default class LdPicture extends Vue {
36 @Prop(String) readonly noresult?: string; 36 @Prop(String) readonly noresult?: string;
37 37
38 get sortedItems() { 38 get sortedItems() {
39 return this.items.sort(this.$uiStore.sortFn); 39 return this.items.sort(this.$uiStore.sort.fn);
40 } 40 }
41 41
42 get hasNoResults(): boolean { 42 get hasNoResults(): boolean {
diff --git a/viewer/src/services/itemComparators.ts b/viewer/src/services/itemComparators.ts
index 82757ca..bd9accb 100644
--- a/viewer/src/services/itemComparators.ts
+++ b/viewer/src/services/itemComparators.ts
@@ -20,28 +20,25 @@ import { TranslateResult } from "vue-i18n";
20import i18n from "@/plugins/i18n"; 20import i18n from "@/plugins/i18n";
21 21
22export type ItemComparator = (left: Gallery.Item, right: Gallery.Item) => number; 22export type ItemComparator = (left: Gallery.Item, right: Gallery.Item) => number;
23export type ItemSort = { name: Gallery.ItemSortStr; text: TranslateResult; fn: ItemComparator }; 23export type ItemSort = { text: TranslateResult; fn: ItemComparator };
24 24
25export default class ItemComparators { 25export default class ItemComparators {
26 static readonly ITEM_SORTS: ItemSort[] = [ 26 static readonly ITEM_SORTS: Record<Gallery.ItemSortStr, ItemSort> = {
27 { 27 title_asc: {
28 name: "title_asc",
29 text: i18n.t("command.sort.byTitleAsc"), 28 text: i18n.t("command.sort.byTitleAsc"),
30 fn: ItemComparators.chain(ItemComparators.sortByTitleAsc, ItemComparators.sortByPathAsc), 29 fn: ItemComparators.chain(ItemComparators.sortByTitleAsc, ItemComparators.sortByPathAsc),
31 }, 30 },
32 { 31 date_asc: {
33 name: "date_asc",
34 text: i18n.t("command.sort.byDateAsc"), 32 text: i18n.t("command.sort.byDateAsc"),
35 fn: ItemComparators.chain(ItemComparators.sortByDateAsc, ItemComparators.sortByPathAsc), 33 fn: ItemComparators.chain(ItemComparators.sortByDateAsc, ItemComparators.sortByPathAsc),
36 }, 34 },
37 { 35 date_desc: {
38 name: "date_desc",
39 text: i18n.t("command.sort.byDateDesc"), 36 text: i18n.t("command.sort.byDateDesc"),
40 fn: ItemComparators.reverse(ItemComparators.chain(ItemComparators.sortByDateAsc, ItemComparators.sortByPathAsc)), 37 fn: ItemComparators.reverse(ItemComparators.chain(ItemComparators.sortByDateAsc, ItemComparators.sortByPathAsc)),
41 }, 38 },
42 ]; 39 };
43 40
44 static readonly DEFAULT = ItemComparators.ITEM_SORTS[1].fn; 41 static readonly DEFAULT = ItemComparators.ITEM_SORTS.date_asc;
45 42
46 static sortByPathAsc(left: Gallery.Item, right: Gallery.Item): number { 43 static sortByPathAsc(left: Gallery.Item, right: Gallery.Item): number {
47 return left.path.localeCompare(right.path, undefined, { 44 return left.path.localeCompare(right.path, undefined, {
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index 84e7fed..f065cdd 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -18,7 +18,7 @@
18*/ 18*/
19 19
20import { createModule, mutation, action } from "vuex-class-component"; 20import { createModule, mutation, action } from "vuex-class-component";
21import ItemComparators, { ItemComparator } from "@/services/itemComparators"; 21import ItemComparators, { ItemSort } from "@/services/itemComparators";
22 22
23const VuexModule = createModule({ 23const VuexModule = createModule({
24 namespaced: "uiStore", 24 namespaced: "uiStore",
@@ -29,7 +29,7 @@ export default class UIStore extends VuexModule {
29 fullscreen: boolean = false; 29 fullscreen: boolean = false;
30 fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT); 30 fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
31 searchMode: boolean = false; 31 searchMode: boolean = false;
32 sortFn: ItemComparator = ItemComparators.DEFAULT; 32 sort: ItemSort = ItemComparators.DEFAULT;
33 33
34 // --- 34 // ---
35 35
@@ -45,14 +45,14 @@ export default class UIStore extends VuexModule {
45 this.searchMode = value ?? !this.searchMode; 45 this.searchMode = value ?? !this.searchMode;
46 } 46 }
47 47
48 @mutation setSortFn(sortFn: ItemComparator) { 48 @mutation setSort(sort: ItemSort) {
49 this.sortFn = sortFn; 49 this.sort = sort;
50 } 50 }
51 51
52 @action async initFromConfig(config: Gallery.Config) { 52 @action async initFromConfig(config: Gallery.Config) {
53 if (config.initialItemSort) { 53 if (config.initialItemSort) {
54 const itemSort = ItemComparators.ITEM_SORTS.find(s => s.name == config.initialItemSort); 54 const itemSort = ItemComparators.ITEM_SORTS[config.initialItemSort];
55 if (itemSort) this.setSortFn(itemSort.fn); 55 if (itemSort) this.setSort(itemSort);
56 else throw new Error("Unknown sort type: " + config.initialItemSort); 56 else throw new Error("Unknown sort type: " + config.initialItemSort);
57 } 57 }
58 } 58 }