viewer: make default sort order configurable

github: resolves #239

1 files changed, 13 insertions, 4 deletions

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 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import { RawLocation } from "vue-router";
-import ItemSortFn from "@/services/itemSortFn";
+import ItemComparators, { ItemComparator } from "@/services/itemComparators";
 
 @Component
 export default class LdCommandSort extends Vue {
   readonly SORTS = [
-    { name: this.$t("command.sort.byNameAsc"), fn: ItemSortFn.sortByNameAsc },
-    { name: this.$t("command.sort.byDateDesc"), fn: ItemSortFn.sortByDateDesc },
+    { name: this.$t("command.sort.byNameAsc"), fn: ItemComparators.sortByNameAsc },
+    { name: this.$t("command.sort.byDateDesc"), fn: ItemComparators.sortByDateDesc },
   ];
 
   selectedSort = 0;
 
+  created() {
+    this.onChangeStore(this.$uiStore.sortFn);
+  }
+
+  @Watch("$uiStore.sortFn")
+  onChangeStore(newFn: ItemComparator) {
+    this.selectedSort = this.SORTS.map(s => s.fn).indexOf(newFn);
+  }
+
   onChangeSort(newValue: number) {
     this.$uiStore.setSortFn(this.SORTS[newValue].fn);
   }