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

sas/static/bundled/sas/components/ajax-select-index.ts

@@ -2,7 +2,7 @@ import { AjaxSelect } from "#core:core/components/ajax-select-base";
 import { registerComponent } from "#core:utils/web-components";
 import type { TomOption } from "tom-select/dist/types/types";
 import type { escape_html } from "tom-select/dist/types/utils";
-import { type AlbumAutocompleteSchema, albumSearchAlbum } from "#openapi";
+import { type AlbumAutocompleteSchema, albumAutocompleteAlbum } from "#openapi";
 
 @registerComponent("album-ajax-select")
 export class AlbumAjaxSelect extends AjaxSelect {
@@ -11,7 +11,7 @@ export class AlbumAjaxSelect extends AjaxSelect {
   protected searchField = ["path", "name"];
 
   protected async search(query: string): Promise<TomOption[]> {
-    const resp = await albumSearchAlbum({ query: { search: query } });
+    const resp = await albumAutocompleteAlbum({ query: { search: query } });
     if (resp.data) {
       return resp.data.results;
     }