aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--example/config.json1
-rw-r--r--viewer/src/@types/gallery.d.ts3
-rw-r--r--viewer/src/components/LdCommandSort.vue17
-rw-r--r--viewer/src/services/itemComparators.ts (renamed from viewer/src/services/itemSortFn.ts)4
-rw-r--r--viewer/src/store/uiStore.ts21
-rw-r--r--viewer/src/views/MainLayout.vue1
6 files changed, 37 insertions, 10 deletions
diff --git a/example/config.json b/example/config.json
index 06efcbf..892682f 100644
--- a/example/config.json
+++ b/example/config.json
@@ -1,5 +1,6 @@
1{ 1{
2 "galleryRoot": "out/", 2 "galleryRoot": "out/",
3 "galleryIndex": "index.json", 3 "galleryIndex": "index.json",
4 "initialSort": "date_desc",
4 "initialTagDisplayLimit": 10 5 "initialTagDisplayLimit": 10
5} 6}
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 @@
18*/ 18*/
19 19
20declare namespace Gallery { 20declare namespace Gallery {
21 type ItemSortStr = "name_asc" | "date_desc";
22
21 interface Config { 23 interface Config {
22 galleryRoot: string; 24 galleryRoot: string;
23 galleryIndex?: string; 25 galleryIndex?: string;
26 initialSort?: ItemSortStr;
24 initialTagDisplayLimit?: number; 27 initialTagDisplayLimit?: number;
25 } 28 }
26 29
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 @@
31</template> 31</template>
32 32
33<script lang="ts"> 33<script lang="ts">
34import { Component, Vue, Prop } from "vue-property-decorator"; 34import { Component, Vue, Prop, Watch } from "vue-property-decorator";
35import { RawLocation } from "vue-router"; 35import { RawLocation } from "vue-router";
36import ItemSortFn from "@/services/itemSortFn"; 36import ItemComparators, { ItemComparator } from "@/services/itemComparators";
37 37
38@Component 38@Component
39export default class LdCommandSort extends Vue { 39export default class LdCommandSort extends Vue {
40 readonly SORTS = [ 40 readonly SORTS = [
41 { name: this.$t("command.sort.byNameAsc"), fn: ItemSortFn.sortByNameAsc }, 41 { name: this.$t("command.sort.byNameAsc"), fn: ItemComparators.sortByNameAsc },
42 { name: this.$t("command.sort.byDateDesc"), fn: ItemSortFn.sortByDateDesc }, 42 { name: this.$t("command.sort.byDateDesc"), fn: ItemComparators.sortByDateDesc },
43 ]; 43 ];
44 44
45 selectedSort = 0; 45 selectedSort = 0;
46 46
47 created() {
48 this.onChangeStore(this.$uiStore.sortFn);
49 }
50
51 @Watch("$uiStore.sortFn")
52 onChangeStore(newFn: ItemComparator) {
53 this.selectedSort = this.SORTS.map(s => s.fn).indexOf(newFn);
54 }
55
47 onChangeSort(newValue: number) { 56 onChangeSort(newValue: number) {
48 this.$uiStore.setSortFn(this.SORTS[newValue].fn); 57 this.$uiStore.setSortFn(this.SORTS[newValue].fn);
49 } 58 }
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 @@
17-- along with this program. If not, see <https://www.gnu.org/licenses/>. 17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/ 18*/
19 19
20export default class ItemSortFn { 20export type ItemComparator = (left: Gallery.Item, right: Gallery.Item) => number;
21
22export default class ItemComparators {
21 static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number { 23 static sortByNameAsc(left: Gallery.Item, right: Gallery.Item): number {
22 return left.title.localeCompare(right.title); 24 return left.title.localeCompare(right.title);
23 } 25 }
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 @@
18*/ 18*/
19 19
20import { createModule, mutation, action } from "vuex-class-component"; 20import { createModule, mutation, action } from "vuex-class-component";
21import ItemSortFn from "@/services/itemSortFn"; 21import ItemComparators, { ItemComparator } from "@/services/itemComparators";
22 22
23const VuexModule = createModule({ 23const VuexModule = createModule({
24 namespaced: "uiStore", 24 namespaced: "uiStore",
25 strict: true, 25 strict: true,
26}); 26});
27 27
28type TItemSortFn = (left: Gallery.Item, right: Gallery.Item) => number;
29
30export default class UIStore extends VuexModule { 28export default class UIStore extends VuexModule {
31 fullscreen: boolean = false; 29 fullscreen: boolean = false;
32 fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT); 30 fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
33 searchMode: boolean = false; 31 searchMode: boolean = false;
34 sortFn: TItemSortFn = ItemSortFn.sortByNameAsc; 32 sortFn: ItemComparator = ItemComparators.sortByNameAsc;
35 33
36 // --- 34 // ---
37 35
@@ -47,7 +45,20 @@ export default class UIStore extends VuexModule {
47 this.searchMode = value ?? !this.searchMode; 45 this.searchMode = value ?? !this.searchMode;
48 } 46 }
49 47
50 @mutation setSortFn(sortFn: TItemSortFn) { 48 @mutation setSortFn(sortFn: ItemComparator) {
51 this.sortFn = sortFn; 49 this.sortFn = sortFn;
52 } 50 }
51
52 @action async initFromConfig(config: Gallery.Config) {
53 switch (config.initialSort ?? "") {
54 case "date_desc":
55 this.setSortFn(ItemComparators.sortByDateDesc);
56 break;
57 case "name_asc":
58 case "":
59 break;
60 default:
61 throw new Error("Unknown sort type: " + config.initialSort);
62 }
63 }
53} 64}
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 {
64 this.isLoading = true; 64 this.isLoading = true;
65 this.$galleryStore 65 this.$galleryStore
66 .fetchConfig() 66 .fetchConfig()
67 .then(this.$uiStore.initFromConfig)
67 .then(this.$galleryStore.fetchGalleryItems) 68 .then(this.$galleryStore.fetchGalleryItems)
68 .finally(() => (this.isLoading = false)) 69 .finally(() => (this.isLoading = false))
69 .catch(this.displayError); 70 .catch(this.displayError);