fix: user pictures ordering

package-lock.json

@@ -48,6 +48,7 @@
         "@types/cytoscape-cxtmenu": "^3.4.4",
         "@types/cytoscape-klay": "^3.1.4",
         "@types/jquery": "^3.5.31",
+        "typescript": "^5.8.3",
         "vite": "^6.2.5",
         "vite-bundle-visualizer": "^1.2.1",
         "vite-plugin-static-copy": "^3.0.2"
@@ -5587,7 +5588,6 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -33,6 +33,7 @@
     "@types/jquery": "^3.5.31",
     "@types/cytoscape-cxtmenu": "^3.4.4",
     "@types/cytoscape-klay": "^3.1.4",
+    "typescript": "^5.8.3",
     "vite": "^6.2.5",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-static-copy": "^3.0.2"

sas/static/bundled/sas/user/pictures-index.ts

@@ -9,28 +9,35 @@ interface PagePictureConfig {
   userId: number;
 }
 
+interface Album {
+  id: number;
+  name: string;
+  pictures: PictureSchema[];
+}
+
 document.addEventListener("alpine:init", () => {
   Alpine.data("user_pictures", (config: PagePictureConfig) => ({
     loading: true,
-    pictures: [] as PictureSchema[],
-    albums: {} as Record<string, PictureSchema[]>,
+    albums: [] as Album[],
 
     async init() {
-      this.pictures = await paginated(picturesFetchPictures, {
+      const pictures = await paginated(picturesFetchPictures, {
         // biome-ignore lint/style/useNamingConvention: from python api
         query: { users_identified: [config.userId] },
       } as PicturesFetchPicturesData);
-
-      this.albums = this.pictures.reduce(
-        (acc: Record<number, PictureSchema[]>, picture: PictureSchema) => {
-          if (!acc[picture.album.id]) {
-            acc[picture.album.id] = [];
-          }
-          acc[picture.album.id].push(picture);
-          return acc;
-        },
-        {},
-      );
+      const groupedAlbums = Object.groupBy(pictures, (i: PictureSchema) => i.album.id);
+      this.albums = Object.values(groupedAlbums).map((pictures: PictureSchema[]) => {
+        return {
+          id: pictures[0].album.id,
+          name: pictures[0].album.name,
+          pictures: pictures,
+        };
+      });
+      this.albums.sort((a: Album, b: Album) => b.id - a.id);
+      const hash = document.location.hash.replace("#", "");
+      if (hash.startsWith("album-")) {
+        this.$nextTick(() => document.getElementById(hash)?.scrollIntoView()).then();
+      }
       this.loading = false;
     },
   }));

sas/templates/sas/macros.jinja

@@ -50,7 +50,7 @@
  #}
 {% macro download_button(name) %}
   <div x-data="pictures_download">
-    <div x-show="pictures.length > 0" x-cloak>
+    <div x-show="albums.length > 0" x-cloak>
       <button
         :disabled="isDownloading"
         class="btn btn-blue {% if name == "" %}btn-no-text{% endif %}"

sas/templates/sas/user_pictures.jinja

@@ -20,17 +20,17 @@
       {{ download_button(_("Download all my pictures")) }}
     {% endif %}
 
-    <template x-for="[album_id, pictures] in Object.entries(albums)" x-cloak>
+    <template x-for="album in albums" x-cloak>
       <section>
         <br />
         <div class="row">
-          <h4 x-text="pictures[0].album.name" :id="`album-${album_id}`"></h4>
+          <h4 x-text="album.name" :id="`album-${album.id}`"></h4>
           {% if user.id == object.id %}
             &nbsp;{{ download_button("") }}
           {% endif %}
         </div>
         <div class="photos">
-          <template x-for="picture in pictures">
+          <template x-for="picture in album.pictures">
             <a :href="picture.sas_url">
               <div
                 class="photo"

tsconfig.json

@@ -4,7 +4,7 @@
     "sourceMap": true,
     "noImplicitAny": true,
     "module": "esnext",
-    "target": "es2022",
+    "target": "es2024",
     "allowJs": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,