fix: pictures download button

fix #1225

sas/static/bundled/sas/pictures-download-index.ts

@@ -5,12 +5,13 @@ import type { PictureSchema } from "#openapi";
 document.addEventListener("alpine:init", () => {
   Alpine.data("pictures_download", () => ({
     isDownloading: false,
+    downloadPictures: [] as PictureSchema[],
 
     async downloadZip() {
       this.isDownloading = true;
       const bar = this.$refs.progress;
       bar.value = 0;
-      bar.max = this.pictures.length;
+      bar.max = this.downloadPictures.length;
 
       const incrementProgressBar = (_total: number): undefined => {
         bar.value++;
@@ -29,7 +30,7 @@ document.addEventListener("alpine:init", () => {
       const zipWriter = new ZipWriter(await fileHandle.createWritable());
 
       await Promise.all(
-        this.pictures.map((p: PictureSchema) => {
+        this.downloadPictures.map(async (p: PictureSchema) => {
           const imgName = `${p.album}/IMG_${p.date.replace(/[:\-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
           return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
             level: 9,

sas/static/bundled/sas/user/pictures-index.ts

@@ -57,5 +57,9 @@ document.addEventListener("alpine:init", () => {
       }
       this.loading = false;
     },
+
+    allPictures(): PictureSchema[] {
+      return this.albums.flatMap((album: Album) => album.pictures);
+    },
   }));
 });

sas/templates/sas/album.jinja

@@ -85,7 +85,7 @@
   <div x-data="pictures({ albumId: {{ album.id }}, maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }} })">
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <br>
-    {{ download_button(_("Download album")) }}
+    {{ download_button(_("Download album"), "pictures") }}
     <div class="photos" :aria-busy="loading" @pictures-upload-done.window="fetchPictures">
       <template x-for="picture in getPage(page)">
         <a :href="picture.sas_url">

sas/templates/sas/macros.jinja

@@ -36,21 +36,20 @@
 {% endmacro %}
 
 {# Helper macro to create a download button for a
-  record of albums with alpine
+  record of albums with alpine.
-
-  This needs to be used inside an alpine environment.
-  Downloaded pictures will be `pictures` from the 
-  parent data store.
 
   Note:
     This requires importing `bundled/sas/pictures-download-index.ts`
 
   Parameters:
     name (str): name displayed on the button
+    pictures (str): an alpine variable or function
+      which holds the images this button should download.
+      It must be different from "downloadPictures", or it won't work.
  #}
-{% macro download_button(name) %}
+{% macro download_button(name, pictures) %}
-  <div x-data="pictures_download">
+  <div x-data="pictures_download()" x-modelable="downloadPictures" x-model="{{ pictures }}">
-    <div x-show="albums.length > 0" x-cloak>
+    <div x-show="downloadPictures.length > 0" x-cloak>
       <button
         :disabled="isDownloading"
         class="btn btn-blue {% if name == "" %}btn-no-text{% endif %}"

sas/templates/sas/user_pictures.jinja

@@ -17,16 +17,16 @@
 {% block content %}
   <main x-data="user_pictures({ userId: {{ object.id }}, nbPictures: {{ object.nb_pictures }} })">
     {% if user.id == object.id %}
-      {{ download_button(_("Download all my pictures")) }}
+      {{ download_button(_("Download all my pictures"), "allPictures()") }}
     {% endif %}
 
     <template x-for="album in albums" x-cloak>
       <section>
         <br />
-        <div class="row">
+        <div class="row gap">
           <h4 x-text="album.name" :id="`album-${album.id}`"></h4>
           {% if user.id == object.id %}
-            &nbsp;{{ download_button("") }}
+            {{ download_button("", "album.pictures") }}
           {% endif %}
         </div>
         <div class="photos">