viewer: refactor how the available sorts are stored

github: resolves #259

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 @@
     <a slot="trigger" class="link">
       <fa-icon icon="sort-amount-down" size="lg" />
     </a>
-    <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="idx">
-      <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" />
+    <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="sort">
+      <fa-icon :icon="['far', sort === selectedSort ? 'dot-circle' : 'circle']" />
       <span :class="$style.dropdownLabel">{{ sort.text }}</span>
     </b-dropdown-item>
   </b-dropdown>
@@ -32,19 +32,18 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { RawLocation } from "vue-router";
-import ItemComparators, { ItemComparator } from "@/services/itemComparators";
+import ItemComparators, { ItemSort } from "@/services/itemComparators";
 
 @Component
 export default class LdCommandSort extends Vue {
   readonly ITEM_SORTS = ItemComparators.ITEM_SORTS;
 
   get selectedSort() {
-    return this.ITEM_SORTS.map(s => s.fn).indexOf(this.$uiStore.sortFn);
+    return this.$uiStore.sort;
   }
 
-  set selectedSort(newValue: number) {
-    this.$uiStore.setSortFn(this.ITEM_SORTS[newValue].fn);
+  set selectedSort(newValue: ItemSort) {
+    this.$uiStore.setSort(newValue);
   }
 }
 </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 {
   @Prop(String) readonly noresult?: string;
 
   get sortedItems() {
-    return this.items.sort(this.$uiStore.sortFn);
+    return this.items.sort(this.$uiStore.sort.fn);
   }
 
   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";
 import i18n from "@/plugins/i18n";
 
 export type ItemComparator = (left: Gallery.Item, right: Gallery.Item) => number;
-export type ItemSort = { name: Gallery.ItemSortStr; text: TranslateResult; fn: ItemComparator };
+export type ItemSort = { text: TranslateResult; fn: ItemComparator };
 
 export default class ItemComparators {
-  static readonly ITEM_SORTS: ItemSort[] = [
-    {
-      name: "title_asc",
+  static readonly ITEM_SORTS: Record<Gallery.ItemSortStr, ItemSort> = {
+    title_asc: {
       text: i18n.t("command.sort.byTitleAsc"),
       fn: ItemComparators.chain(ItemComparators.sortByTitleAsc, ItemComparators.sortByPathAsc),
     },
-    {
-      name: "date_asc",
+    date_asc: {
       text: i18n.t("command.sort.byDateAsc"),
       fn: ItemComparators.chain(ItemComparators.sortByDateAsc, ItemComparators.sortByPathAsc),
     },
-    {
-      name: "date_desc",
+    date_desc: {
       text: i18n.t("command.sort.byDateDesc"),
       fn: ItemComparators.reverse(ItemComparators.chain(ItemComparators.sortByDateAsc, ItemComparators.sortByPathAsc)),
     },
-  ];
+  };
 
-  static readonly DEFAULT = ItemComparators.ITEM_SORTS[1].fn;
+  static readonly DEFAULT = ItemComparators.ITEM_SORTS.date_asc;
 
   static sortByPathAsc(left: Gallery.Item, right: Gallery.Item): number {
     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 @@
 */
 
 import { createModule, mutation, action } from "vuex-class-component";
-import ItemComparators, { ItemComparator } from "@/services/itemComparators";
+import ItemComparators, { ItemSort } from "@/services/itemComparators";
 
 const VuexModule = createModule({
   namespaced: "uiStore",
@@ -29,7 +29,7 @@ export default class UIStore extends VuexModule {
   fullscreen: boolean = false;
   fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
   searchMode: boolean = false;
-  sortFn: ItemComparator = ItemComparators.DEFAULT;
+  sort: ItemSort = ItemComparators.DEFAULT;
 
   // ---
 
@@ -45,14 +45,14 @@ export default class UIStore extends VuexModule {
     this.searchMode = value ?? !this.searchMode;
   }
 
-  @mutation setSortFn(sortFn: ItemComparator) {
-    this.sortFn = sortFn;
+  @mutation setSort(sort: ItemSort) {
+    this.sort = sort;
   }
 
   @action async initFromConfig(config: Gallery.Config) {
     if (config.initialItemSort) {
-      const itemSort = ItemComparators.ITEM_SORTS.find(s => s.name == config.initialItemSort);
-      if (itemSort) this.setSortFn(itemSort.fn);
+      const itemSort = ItemComparators.ITEM_SORTS[config.initialItemSort];
+      if (itemSort) this.setSort(itemSort);
       else throw new Error("Unknown sort type: " + config.initialItemSort);
     }
   }