ajaxify album loading in the SAS

Author: imperosol

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;
     }

sas/templates/sas/album.jinja

@@ -53,28 +53,43 @@
       {% endif %}
   {% endif %}
 
-  {% if children_albums|length > 0 %}
-    <h4>{% trans %}Albums{% endtrans %}</h4>
-    <div class="albums">
-      {% for a in children_albums %}
-        {{ display_album(a, is_sas_admin) }}
-      {% endfor %}
+  {% if show_albums %}
+    <div x-data="albums({ parentId: {{ album.id }} })" class="margin-bottom">
+      <h4>{% trans %}Albums{% endtrans %}</h4>
+      <div class="albums" :aria-busy="loading">
+        <template x-for="album in albums" :key="album.id">
+          <a :href="album.sas_url">
+            <div
+              x-data="{thumbUrl: album.thumbnail || '{{ static("core/img/sas.jpg") }}'}"
+              class="album"
+              :class="{not_moderated: !album.is_moderated}"
+            >
+              <img :src="thumbUrl" :alt="album.name" loading="lazy" />
+              <template x-if="album.is_moderated">
+                <div class="text" x-text="album.name"></div>
+              </template>
+              <template x-if="!album.is_moderated">
+                <div class="overlay">&nbsp;</div>
+                <div class="text">{% trans %}To be moderated{% endtrans %}</div>
+              </template>
+            </div>
+            {% if edit_mode %}
+              <input type="checkbox" name="file_list" :value="album.id">
+            {% endif %}
+          </a>
+        </template>
+      </div>
     </div>
-
-    <br>
   {% endif %}
 
   <div x-data="pictures({ albumId: {{ album.id }}, maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }} })">
-    {{ download_button(_("Download album")) }}
-
     <h4>{% trans %}Pictures{% endtrans %}</h4>
+    <br>
+    {{ download_button(_("Download album")) }}
     <div class="photos" :aria-busy="loading">
       <template x-for="picture in getPage(page)">
         <a :href="picture.sas_url">
-          <div
-            class="photo"
-            :class="{not_moderated: !picture.is_moderated}"
-          >
+          <div class="photo" :class="{not_moderated: !picture.is_moderated}">
             <img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
             <template x-if="!picture.is_moderated">
               <div class="overlay">&nbsp;</div>

sas/views.py

@@ -186,10 +186,10 @@ def get_context_data(self, **kwargs):
         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