viewer: make default sort order configurable. code review improvements

github: resolves #239

4 files changed, 25 insertions, 30 deletions

diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index 8ef8fc7..a7f3d29 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -23,7 +23,7 @@ declare namespace Gallery {
   interface Config {
     galleryRoot: string;
     galleryIndex?: string;
-    initialSort?: ItemSortStr;
+    initialItemSort?: ItemSortStr;
     initialTagDisplayLimit?: number;
   }
 
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 @@
 -->
 
 <template>
-  <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body @change="onChangeSort">
+  <b-dropdown v-model="selectedSort" :mobile-modal="false" append-to-body>
     <a slot="trigger" class="link">
       <fa-icon icon="sort-amount-down" size="lg" />
     </a>
-    <b-dropdown-item v-for="(sort, idx) in SORTS" :key="idx" :value="idx">
+    <b-dropdown-item v-for="(sort, idx) in ITEM_SORTS" :key="idx" :value="idx">
       <fa-icon :icon="['far', idx === selectedSort ? 'dot-circle' : 'circle']" />
-      <span :class="$style.dropdownLabel">{{ sort.name }}</span>
+      <span :class="$style.dropdownLabel">{{ sort.text }}</span>
     </b-dropdown-item>
   </b-dropdown>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from "vue-property-decorator";
+import { Component, Vue, Prop } from "vue-property-decorator";
 import { RawLocation } from "vue-router";
 import ItemComparators, { ItemComparator } from "@/services/itemComparators";
 
 @Component
 export default class LdCommandSort extends Vue {
-  readonly SORTS = [
-    { name: this.$t("command.sort.byNameAsc"), fn: ItemComparators.sortByNameAsc },
-    { name: this.$t("command.sort.byDateDesc"), fn: ItemComparators.sortByDateDesc },
-  ];
+  readonly ITEM_SORTS = ItemComparators.ITEM_SORTS;
 
-  selectedSort = 0;
-
-  created() {
-    this.onChangeStore(this.$uiStore.sortFn);
-  }
-
-  @Watch("$uiStore.sortFn")
-  onChangeStore(newFn: ItemComparator) {
-    this.selectedSort = this.SORTS.map(s => s.fn).indexOf(newFn);
+  get selectedSort() {
+    return this.ITEM_SORTS.map(s => s.fn).indexOf(this.$uiStore.sortFn);
   }
 
-  onChangeSort(newValue: number) {
-    this.$uiStore.setSortFn(this.SORTS[newValue].fn);
+  set selectedSort(newValue: number) {
+    this.$uiStore.setSortFn(this.ITEM_SORTS[newValue].fn);
   }
 }
 </script>
diff --git a/viewer/src/services/itemComparators.ts b/viewer/src/services/itemComparators.ts
index c8fedbe..380c66a 100644
--- a/viewer/src/services/itemComparators.ts
+++ b/viewer/src/services/itemComparators.ts
@@ -16,10 +16,20 @@
 -- You should have received a copy of the GNU Affero General Public License
 -- along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
+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 default class ItemComparators {
+  static readonly DEFAULT = ItemComparators.sortByNameAsc;
+
+  static readonly ITEM_SORTS: ItemSort[] = [
+    { name: "name_asc", text: i18n.t("command.sort.byNameAsc"), fn: ItemComparators.sortByNameAsc },
+    { name: "date_desc", text: i18n.t("command.sort.byDateDesc"), fn: ItemComparators.sortByDateDesc },
+  ];
+
   static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number {
     return left.title.localeCompare(right.title);
   }
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index 04f14a0..84e7fed 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -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.sortByNameAsc;
+  sortFn: ItemComparator = ItemComparators.DEFAULT;
 
   // ---
 
@@ -50,15 +50,10 @@ export default class UIStore extends VuexModule {
   }
 
   @action async initFromConfig(config: Gallery.Config) {
-    switch (config.initialSort ?? "") {
-      case "date_desc":
-        this.setSortFn(ItemComparators.sortByDateDesc);
-        break;
-      case "name_asc":
-      case "":
-        break;
-      default:
-        throw new Error("Unknown sort type: " + config.initialSort);
+    if (config.initialItemSort) {
+      const itemSort = ItemComparators.ITEM_SORTS.find(s => s.name == config.initialItemSort);
+      if (itemSort) this.setSortFn(itemSort.fn);
+      else throw new Error("Unknown sort type: " + config.initialItemSort);
     }
   }
 }