download button for user pictures and albums

core/static/bundled/user/pictures-index.js

@@ -30,7 +30,8 @@ import { picturesFetchPictures } from "#openapi";
 
 /**
  * @typedef PicturePageConfig
- * @property {number} userId Id of the user to get the pictures from
+ * @property {number} userId Id of the user to get the pictures from (optional if albumId defined)
+ * @property {number} albumId Id of the album to get the pictures from (optinal if userId defined)
  **/
 
 /**
@@ -46,9 +47,17 @@ window.loadPicturePage = (config) => {
       albums: {},
 
       async init() {
-        this.pictures = await paginated(picturesFetchPictures, {
+        let query = {};
+
+        if (config.userId) {
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
-          query: { users_identified: [config.userId] },
+          query = { users_identified: [config.userId] };
+        } else {
+          // biome-ignore lint/style/useNamingConvention: api is in snake_case
+          query = { album_id: config.albumId };
+        }
+        this.pictures = await paginated(picturesFetchPictures, {
+          query,
         });
         this.albums = this.pictures.reduce((acc, picture) => {
           if (!acc[picture.album]) {

core/templates/core/download_pictures.jinja

@@ -0,0 +1,13 @@
+{% macro download_button() %}
+<div x-show="pictures.length > 0" x-cloak>
+<button
+  :disabled="isDownloading"
+  class="btn btn-blue"
+  @click="downloadZip()"
+>
+  <i class="fa fa-download"></i>
+  {% trans %}Download all pictures{% endtrans %}
+</button>
+<progress x-ref="progress" x-show="isDownloading"></progress>
+</div>
+{% endmacro %}

core/templates/core/user_pictures.jinja

@@ -1,4 +1,5 @@
 {% extends "core/base.jinja" %}
+{% from "core/download_pictures.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
@@ -15,17 +16,7 @@
 {% block content %}
   <main x-data="user_pictures">
   {% if user.id == object.id %}
-      <div x-show="pictures.length > 0" x-cloak>
+    {{ download_button() }}
-        <button
-          :disabled="isDownloading"
-          class="btn btn-blue"
-          @click="downloadZip()"
-        >
-          <i class="fa fa-download"></i>
-          {% trans %}Download all my pictures{% endtrans %}
-        </button>
-        <progress x-ref="progress" x-show="isDownloading"></progress>
-      </div>
   {% endif %}
 
     <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>

sas/templates/sas/album.jinja

@@ -1,5 +1,6 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import paginate_alpine %}
+{% from "core/download_pictures.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
@@ -7,6 +8,7 @@
 
 {%- block additional_js -%}
   <script type="module" src="{{ static('bundled/sas/album-index.js') }}"></script>
+  <script type="module" src="{{ static('bundled/user/pictures-index.js') }}"></script>
 {%- endblock -%}
 
 {% block title %}
@@ -27,7 +29,6 @@
   {% if is_sas_admin %}
     <form action="" method="post" enctype="multipart/form-data">
       {% csrf_token %}
-
       <div class="album-navbar">
         <h3>{{ album.get_display_name() }}</h3>
 
@@ -63,6 +64,10 @@
     <br>
   {% endif %}
 
+  <div x-data="user_pictures">
+      {{ download_button() }}
+  </div>
+
   <div x-data="pictures">
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
@@ -117,6 +122,9 @@
         albumId: {{ album.id }},
         maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
       });
+
+      loadPicturePage({ albumId: {{ album.id }} })
+
     });
 
     // Todo: migrate to alpine.js if we have some time
@@ -225,6 +233,5 @@
       }
     });
   </script>
-
 {% endblock %}