ajaxify album loading in the SAS

sas/static/bundled/sas/album-index.ts

@@ -1,14 +1,24 @@
 import { paginated } from "#core:utils/api";
 import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
-import { type PictureSchema, type PicturesFetchPicturesData, picturesFetchPictures } from "#openapi";
+import {
+  type AlbumSchema,
+  type PictureSchema,
+  type PicturesFetchPicturesData,
+  albumFetchAlbum,
+  picturesFetchPictures,
+} from "#openapi";
 
-interface AlbumConfig {
+interface AlbumPicturesConfig {
   albumId: number;
   maxPageSize: number;
 }
 
+interface SubAlbumsConfig {
+  parentId: number;
+}
+
 document.addEventListener("alpine:init", () => {
-  Alpine.data("pictures", (config: AlbumConfig) => ({
+  Alpine.data("pictures", (config: AlbumPicturesConfig) => ({
     pictures: [] as PictureSchema[],
     page: Number.parseInt(initialUrlParams.get("page")) || 1,
     pushstate: History.Push /* Used to avoid pushing a state on a back action */,
@@ -52,4 +62,23 @@ document.addEventListener("alpine:init", () => {
       return Math.ceil(this.pictures.length / config.maxPageSize);
     },
   }));
+
+  Alpine.data("albums", (config: SubAlbumsConfig) => ({
+    albums: [] as AlbumSchema[],
+    config: config,
+    loading: false,
+
+    async init() {
+      await this.fetchAlbums();
+    },
+
+    async fetchAlbums() {
+      this.loading = true;
+      this.albums = await paginated(albumFetchAlbum, {
+        // biome-ignore lint/style/useNamingConvention: API is snake_case
+        query: { parent_id: this.config.parentId },
+      });
+      this.loading = false;
+    },
+  }));
 });