viewer: make default sort order configurable

github: resolves #239

5 files changed, 36 insertions, 10 deletions

diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index b756331..8ef8fc7 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -18,9 +18,12 @@
 */
 
 declare namespace Gallery {
+  type ItemSortStr = "name_asc" | "date_desc";
+
   interface Config {
     galleryRoot: string;
     galleryIndex?: string;
+    initialSort?: ItemSortStr;
     initialTagDisplayLimit?: number;
   }
 
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);
   }
diff --git a/viewer/src/services/itemSortFn.ts b/viewer/src/services/itemComparators.ts
index a7e0883..c8fedbe 100644
--- a/viewer/src/services/itemSortFn.ts
+++ b/viewer/src/services/itemComparators.ts
@@ -17,7 +17,9 @@
 -- along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export default class ItemSortFn {
+export type ItemComparator = (left: Gallery.Item, right: Gallery.Item) => number;
+
+export default class ItemComparators {
   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 2d583fc..04f14a0 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -18,20 +18,18 @@
 */
 
 import { createModule, mutation, action } from "vuex-class-component";
-import ItemSortFn from "@/services/itemSortFn";
+import ItemComparators, { ItemComparator } from "@/services/itemComparators";
 
 const VuexModule = createModule({
   namespaced: "uiStore",
   strict: true,
 });
 
-type TItemSortFn = (left: Gallery.Item, right: Gallery.Item) => number;
-
 export default class UIStore extends VuexModule {
   fullscreen: boolean = false;
   fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
   searchMode: boolean = false;
-  sortFn: TItemSortFn = ItemSortFn.sortByNameAsc;
+  sortFn: ItemComparator = ItemComparators.sortByNameAsc;
 
   // ---
 
@@ -47,7 +45,20 @@ export default class UIStore extends VuexModule {
     this.searchMode = value ?? !this.searchMode;
   }
 
-  @mutation setSortFn(sortFn: TItemSortFn) {
+  @mutation setSortFn(sortFn: ItemComparator) {
     this.sortFn = sortFn;
   }
+
+  @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);
+    }
+  }
 }
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index d9ae954..6ef9a3b 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -64,6 +64,7 @@ export default class MainLayout extends Vue {
     this.isLoading = true;
     this.$galleryStore
       .fetchConfig()
+      .then(this.$uiStore.initFromConfig)
       .then(this.$galleryStore.fetchGalleryItems)
       .finally(() => (this.isLoading = false))
       .catch(this.displayError);