diff options
Diffstat (limited to 'viewer/src/components/LdCommandSort.vue')
-rw-r--r-- | viewer/src/components/LdCommandSort.vue | 28 |
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"> |
34 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; | 34 | import { Component, Vue, Prop } from "vue-property-decorator"; |
35 | import { RawLocation } from "vue-router"; | 35 | import { RawLocation } from "vue-router"; |
36 | import ItemComparators, { ItemComparator } from "@/services/itemComparators"; | 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 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> |