From fa6b5ea2e5ad0e018f8e30093421bed4ef06df88 Mon Sep 17 00:00:00 2001 From: imperosol Date: Fri, 21 Feb 2025 16:44:56 +0100 Subject: [PATCH] ajaxify album loading in the SAS --- sas/static/bundled/sas/album-index.ts | 35 +++++++++++++-- .../sas/components/ajax-select-index.ts | 4 +- sas/templates/sas/album.jinja | 43 +++++++++++++------ sas/views.py | 4 +- 4 files changed, 65 insertions(+), 21 deletions(-) diff --git a/sas/static/bundled/sas/album-index.ts b/sas/static/bundled/sas/album-index.ts index 02a744b6..c04df038 100644 --- a/sas/static/bundled/sas/album-index.ts +++ b/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; + }, + })); }); diff --git a/sas/static/bundled/sas/components/ajax-select-index.ts b/sas/static/bundled/sas/components/ajax-select-index.ts index e11d96c2..aa640556 100644 --- a/sas/static/bundled/sas/components/ajax-select-index.ts +++ b/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 { - const resp = await albumSearchAlbum({ query: { search: query } }); + const resp = await albumAutocompleteAlbum({ query: { search: query } }); if (resp.data) { return resp.data.results; } diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja index cb81d7b1..6c2cbcf7 100644 --- a/sas/templates/sas/album.jinja +++ b/sas/templates/sas/album.jinja @@ -53,28 +53,43 @@ {% endif %} {% endif %} - {% if children_albums|length > 0 %} -

{% trans %}Albums{% endtrans %}

-
- {% for a in children_albums %} - {{ display_album(a, is_sas_admin) }} - {% endfor %} + {% if show_albums %} +
+

{% trans %}Albums{% endtrans %}

+
+ +
- -
{% endif %}
- {{ download_button(_("Download album")) }} -

{% trans %}Pictures{% endtrans %}

+
+ {{ download_button(_("Download album")) }}