diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index f736bbfc..76921a7a 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -753,7 +753,7 @@ export default defineComponent({ if (this.$route.name === "thisday") { data = await dav.getOnThisDayData(); } else if (this.$route.name === "albums" && !this.$route.params.name) { - data = await dav.getAlbumsData("3"); + data = await dav.getAlbumsData(3, this.config_albumSort); } else if (this.routeIsPeople && !this.$route.params.name) { data = await dav.getPeopleData(this.$route.name as any); } else if (this.$route.name === "places" && !this.$route.params.name) { diff --git a/src/components/top-matter/AlbumTopMatter.vue b/src/components/top-matter/AlbumTopMatter.vue index d93f1d1f..daa867f4 100644 --- a/src/components/top-matter/AlbumTopMatter.vue +++ b/src/components/top-matter/AlbumTopMatter.vue @@ -10,6 +10,34 @@
{{ name }}
+ + + + + {{ t("memories", "Sort by date") }} + + + + + {{ t("memories", "Sort by name") }} + + + + import { defineComponent } from "vue"; +import UserConfig from "../../mixins/UserConfig"; import NcActions from "@nextcloud/vue/dist/Components/NcActions"; import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton"; import NcActionCheckbox from "@nextcloud/vue/dist/Components/NcActionCheckbox"; +import NcActionRadio from "@nextcloud/vue/dist/Components/NcActionRadio"; + import { getCurrentUser } from "@nextcloud/auth"; import axios from "@nextcloud/axios"; @@ -86,6 +117,9 @@ import EditIcon from "vue-material-design-icons/Pencil.vue"; import DeleteIcon from "vue-material-design-icons/Close.vue"; import PlusIcon from "vue-material-design-icons/Plus.vue"; import ShareIcon from "vue-material-design-icons/ShareVariant.vue"; +import SortIcon from "vue-material-design-icons/SortVariant.vue"; +import SlotAlphabeticalIcon from "vue-material-design-icons/SortAlphabeticalAscending.vue"; +import SortDateIcon from "vue-material-design-icons/SortCalendarDescending.vue"; import { API } from "../../services/API"; export default defineComponent({ @@ -94,6 +128,7 @@ export default defineComponent({ NcActions, NcActionButton, NcActionCheckbox, + NcActionRadio, AlbumCreateModal, AlbumDeleteModal, @@ -105,8 +140,13 @@ export default defineComponent({ DeleteIcon, PlusIcon, ShareIcon, + SortIcon, + SlotAlphabeticalIcon, + SortDateIcon, }, + mixins: [UserConfig], + data: () => ({ name: "", }), @@ -154,6 +194,15 @@ export default defineComponent({ downloadWithHandle(res.data.handle); } }, + + /** + * Change the sorting order + * 1 = date, 2 = name + */ + changeSort(order: 1 | 2) { + this.config_albumSort = order; + this.updateSetting("albumSort"); + }, }, }); @@ -179,4 +228,4 @@ export default defineComponent({ } } } - \ No newline at end of file + diff --git a/src/mixins/UserConfig.ts b/src/mixins/UserConfig.ts index f45a0769..a05a503c 100644 --- a/src/mixins/UserConfig.ts +++ b/src/mixins/UserConfig.ts @@ -5,7 +5,7 @@ import { API } from "../services/API"; import { defineComponent } from "vue"; const eventName = "memories:user-config-changed"; -const localSettings = ["squareThumbs", "showFaceRect"]; +const localSettings = ["squareThumbs", "showFaceRect", "albumSort"]; export default defineComponent({ name: "UserConfig", @@ -45,6 +45,7 @@ export default defineComponent({ config_squareThumbs: localStorage.getItem("memories_squareThumbs") === "1", config_showFaceRect: localStorage.getItem("memories_showFaceRect") === "1", + config_albumSort: Number(localStorage.getItem("memories_albumSort") || 1), config_eventName: eventName, }), diff --git a/src/services/API.ts b/src/services/API.ts index 53cbd6ea..2d768cea 100644 --- a/src/services/API.ts +++ b/src/services/API.ts @@ -39,7 +39,7 @@ export class API { return tok(gen(`${BASE}/days/{id}`, { id })); } - static ALBUM_LIST(t: "1" | "2" | "3" = "3") { + static ALBUM_LIST(t: 1 | 2 | 3 = 3) { return gen(`${BASE}/albums?t=${t}`); } diff --git a/src/services/dav/albums.ts b/src/services/dav/albums.ts index 811151f5..a4526528 100644 --- a/src/services/dav/albums.ts +++ b/src/services/dav/albums.ts @@ -24,8 +24,12 @@ export function getAlbumPath(user: string, name: string) { /** * Get list of albums and convert to Days response * @param type Type of albums to get; 1 = personal, 2 = shared, 3 = all + * @param sortOrder Sort order; 1 = by date, 2 = by name */ -export async function getAlbumsData(type: "1" | "2" | "3"): Promise { +export async function getAlbumsData( + type: 1 | 2 | 3, + sortOrder: 1 | 2 +): Promise { let data: IAlbum[] = []; try { const res = await axios.get(API.ALBUM_LIST(type)); @@ -34,6 +38,13 @@ export async function getAlbumsData(type: "1" | "2" | "3"): Promise { throw e; } + // Response is already sorted by date, sort otherwise + if (sortOrder === 2) { + data.sort((a, b) => + a.name.localeCompare(b.name, undefined, { sensitivity: "base" }) + ); + } + // Convert to days response return [ { diff --git a/src/vue-globals.d.ts b/src/vue-globals.d.ts index a693573c..845f841e 100644 --- a/src/vue-globals.d.ts +++ b/src/vue-globals.d.ts @@ -26,6 +26,7 @@ declare module "vue" { config_squareThumbs: boolean; config_enableTopMemories: boolean; config_showFaceRect: boolean; + config_albumSort: 1 | 2; config_eventName: string; updateSetting(setting: string): Promise;