diff --git a/sas/static/bundled/sas/album-index.ts b/sas/static/bundled/sas/album-index.ts index bc3cc71d..0562ce88 100644 --- a/sas/static/bundled/sas/album-index.ts +++ b/sas/static/bundled/sas/album-index.ts @@ -1,18 +1,24 @@ import { paginated } from "#core:utils/api"; import { History, initialUrlParams, updateQueryString } from "#core:utils/history"; 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 */, @@ -57,4 +63,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..de232535 100644 --- a/sas/templates/sas/album.jinja +++ b/sas/templates/sas/album.jinja @@ -53,15 +53,33 @@ {% 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 %}
diff --git a/sas/views.py b/sas/views.py index 7d7740cb..74a34816 100644 --- a/sas/views.py +++ b/sas/views.py @@ -186,10 +186,10 @@ class AlbumView(CanViewMixin, DetailView, FormMixin): kwargs["clipboard"] = SithFile.objects.filter( id__in=self.request.session["clipboard"] ) - kwargs["children_albums"] = list( + kwargs["show_albums"] = ( Album.objects.viewable_by(self.request.user) .filter(parent_id=self.object.id) - .order_by("-date") + .exists() ) return kwargs