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;