aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
authorZero~Informatique2020-09-12 22:33:37 +0200
committerG.Fouet2020-09-12 23:19:44 +0200
commitb909ec093591b50950c0de54b2005d471ca28116 (patch)
tree6fe72175022d4e39a44e9270865f611d2e819b05 /viewer/src/components
parent96ed5e6583a7f03d4ea7fa0512e66fffb656cc6e (diff)
downloadldgallery-b909ec093591b50950c0de54b2005d471ca28116.tar.gz
viewer: make default sort order configurable. code review improvements
github: resolves #239
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdCommandSort.vue28
1 files changed, 9 insertions, 19 deletions
diff --git a/viewer/src/components/LdCommandSort.vue b/viewer/src/components/LdCommandSort.vue
index a412afc..30644c1 100644
--- a/viewer/src/components/LdCommandSort.vue
+++ b/viewer/src/components/LdCommandSort.vue
@@ -19,42 +19,32 @@
19--> 19-->
20 20
21<template> 21<template>
22 <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body @change="onChangeSort"> 22 <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body>
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 SORTS" :key="idx" :value="idx"> 26 <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="idx">
27 <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" /> 27 <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" />
28 <span :class="$style.dropdownLabel">{{ sort.name }}</span> 28 <span :class="$style.dropdownLabel">{{ sort.text }}</span>
29 </b-dropdown-item> 29 </b-dropdown-item>
30 </b-dropdown> 30 </b-dropdown>
31</template> 31</template>
32 32
33<script lang="ts"> 33<script lang="ts">
34import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 34import { Component, Vue, Prop } from "vue-property-decorator";
35import { RawLocation } from "vue-router"; 35import { RawLocation } from "vue-router";
36import ItemComparators, { ItemComparator } from "@/services/itemComparators"; 36import ItemComparators, { ItemComparator } from "@/services/itemComparators";
37 37
38@Component 38@Component
39export default class LdCommandSort extends Vue { 39export default class LdCommandSort extends Vue {
40 readonly SORTS = [ 40 readonly ITEM_SORTS = ItemComparators.ITEM_SORTS;
41 { name: this.$t("command.sort.byNameAsc"), fn: ItemComparators.sortByNameAsc },
42 { name: this.$t("command.sort.byDateDesc"), fn: ItemComparators.sortByDateDesc },
43 ];
44 41
45 selectedSort = 0; 42 get selectedSort() {
46 43 return this.ITEM_SORTS.map(s => s.fn).indexOf(this.$uiStore.sortFn);
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 } 44 }
55 45
56 onChangeSort(newValue: number) { 46 set selectedSort(newValue: number) {
57 this.$uiStore.setSortFn(this.SORTS[newValue].fn); 47 this.$uiStore.setSortFn(this.ITEM_SORTS[newValue].fn);
58 } 48 }
59} 49}
60</script> 50</script>