From 96ed5e6583a7f03d4ea7fa0512e66fffb656cc6e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 12 Sep 2020 06:34:58 +0200
Subject: viewer: make default sort order configurable

github: resolves #239
---
 viewer/src/@types/gallery.d.ts          |  3 +++
 viewer/src/components/LdCommandSort.vue | 17 +++++++++++++----
 viewer/src/services/itemComparators.ts  | 30 ++++++++++++++++++++++++++++++
 viewer/src/services/itemSortFn.ts       | 28 ----------------------------
 viewer/src/store/uiStore.ts             | 21 ++++++++++++++++-----
 viewer/src/views/MainLayout.vue         |  1 +
 6 files changed, 63 insertions(+), 37 deletions(-)
 create mode 100644 viewer/src/services/itemComparators.ts
 delete mode 100644 viewer/src/services/itemSortFn.ts

(limited to 'viewer/src')

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/itemComparators.ts b/viewer/src/services/itemComparators.ts
new file mode 100644
index 0000000..c8fedbe
--- /dev/null
+++ b/viewer/src/services/itemComparators.ts
@@ -0,0 +1,30 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- 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/>.
+*/
+
+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);
+  }
+
+  static sortByDateDesc(left: Gallery.Item, right: Gallery.Item): number {
+    return -left.datetime.localeCompare(right.datetime); // TODO: handle timezones
+  }
+}
diff --git a/viewer/src/services/itemSortFn.ts b/viewer/src/services/itemSortFn.ts
deleted file mode 100644
index a7e0883..0000000
--- a/viewer/src/services/itemSortFn.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/* ldgallery - A static generator which turns a collection of tagged
---             pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020  Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
--- GNU Affero General Public License for more details.
---
--- 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/>.
-*/
-
-export default class ItemSortFn {
-  static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number {
-    return left.title.localeCompare(right.title);
-  }
-
-  static sortByDateDesc(left: Gallery.Item, right: Gallery.Item): number {
-    return -left.datetime.localeCompare(right.datetime); // TODO: handle timezones
-  }
-}
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);
-- 
cgit v1.2.3