albums: add sort order (fix #377)

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) {

src/components/top-matter/AlbumTopMatter.vue

@@ -10,6 +10,34 @@
     <div class="name">{{ name }}</div>
 
     <div class="right-actions">
+      <NcActions :forceMenu="true" v-if="isAlbumList">
+        <template #icon>
+          <SortIcon :size="20" />
+        </template>
+
+        <NcActionRadio
+          name="sort"
+          :aria-label="t('memories', 'Sort by date')"
+          :checked="config_albumSort === 1"
+          @change="changeSort(1)"
+          close-after-click
+        >
+          {{ t("memories", "Sort by date") }}
+          <template #icon> <SortDateIcon :size="20" /> </template>
+        </NcActionRadio>
+
+        <NcActionRadio
+          name="sort"
+          :aria-label="t('memories', 'Sort by name')"
+          :checked="config_albumSort === 2"
+          @change="changeSort(2)"
+          close-after-click
+        >
+          {{ t("memories", "Sort by name") }}
+          <template #icon> <SlotAlphabeticalIcon :size="20" /> </template>
+        </NcActionRadio>
+      </NcActions>
+
       <NcActions :inline="1">
         <NcActionButton
           :aria-label="t('memories', 'Create new album')"
@@ -68,9 +96,12 @@
 <script lang="ts">
 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");
+    },
   },
 });
 </script>

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,
   }),

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}`);
   }
 

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<IDay[]> {
+export async function getAlbumsData(
+  type: 1 | 2 | 3,
+  sortOrder: 1 | 2
+): Promise<IDay[]> {
   let data: IAlbum[] = [];
   try {
     const res = await axios.get<typeof data>(API.ALBUM_LIST(type));
@@ -34,6 +38,13 @@ export async function getAlbumsData(type: "1" | "2" | "3"): Promise<IDay[]> {
     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 [
     {

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<void>;