Separate album downloading logic from user display. Allow downloading individual user albums.

sas/templates/sas/album.jinja

@@ -7,8 +7,8 @@
 {%- endblock -%}
 
 {%- block additional_js -%}
-  <script type="module" src="{{ static('bundled/sas/album-index.js') }}"></script>
-  <script type="module" src="{{ static('bundled/sas/user/pictures-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/album-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/pictures-download-index.ts') }}"></script>
 {%- endblock -%}
 
 {% block title %}
@@ -64,15 +64,17 @@
     <br>
   {% endif %}
 
-  <div x-data="user_pictures({ albumId: {{ album.id }} })">
-    {{ download_button() }}
-  </div>
+  <div x-data="pictures({
+               albumId: {{ album.id }},
+               maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
+               })">
+
+    {{ download_button("Download album") }}
 
-  <div x-data="pictures">
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
-      <template x-for="picture in pictures.results">
-        <a :href="`/sas/picture/${picture.id}`">
+      <template x-for="picture in pictures.slice((page - 1) * config.maxPageSize, config.maxPageSize * page)">
+        <a :href="picture.sas_url">
           <div
             class="photo"
             :class="{not_moderated: !picture.is_moderated}"
@@ -117,13 +119,6 @@
 {% block script %}
   {{ super() }}
   <script>
-    window.addEventListener("DOMContentLoaded", () => {
-      loadAlbum({
-        albumId: {{ album.id }},
-        maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
-      });
-    });
-
     // Todo: migrate to alpine.js if we have some time
     $("form#upload_form").submit(function (event) {
       let formData = new FormData($(this)[0]);

sas/templates/sas/download_pictures.jinja

@@ -1,13 +1,30 @@
-{% 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>
+{# Helper macro to create a download button for a
+  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, will be translated
+ #}
+{% macro download_button(name) %}
+  <div x-data="pictures_download">
+    <div x-show="pictures.length > 0" x-cloak>
+      <button
+        :disabled="isDownloading"
+        class="btn btn-blue"
+        @click="downloadZip()"
+      >
+        <i class="fa fa-download"></i>
+        {%- if name != "" -%}
+          {% trans %}{{ name }}{% endtrans %}
+        {%- endif -%}
+      </button>
+      <progress x-ref="progress" x-show="isDownloading"></progress>
+    </div>
   </div>
 {% endmacro %}

sas/templates/sas/user_pictures.jinja

@@ -7,6 +7,7 @@
 
 {% block additional_js %}
   <script type="module" src="{{ static('bundled/sas/user/pictures-index.ts') }}"></script>
+  <script type="module" src="{{ static('bundled/sas/pictures-download-index.ts') }}"></script>
 {% endblock %}
 
 {% block title %}
@@ -16,16 +17,21 @@
 {% block content %}
   <main x-data="user_pictures({ userId: {{ object.id }} })">
     {% if user.id == object.id %}
-      {{ download_button() }}
+      {{ download_button("Download all my pictures") }}
     {% endif %}
 
     <template x-for="[album, pictures] in Object.entries(albums)" x-cloak>
       <section>
         <br />
-        <h4 x-text="album"></h4>
+        <div class="row">
+          <h4 x-text="album"></h4>
+          {% if user.id == object.id %}
+            {{ download_button("") }}
+          {% endif %}
+        </div>
         <div class="photos">
           <template x-for="picture in pictures">
-            <a :href="`/sas/picture/${picture.id}`">
+            <a :href="picture.sas_url">
               <div
                 class="photo"
                 :class="{not_moderated: !picture.is_moderated}"
@@ -47,7 +53,3 @@
     <div class="photos" :aria-busy="loading"></div>
   </main>
 {% endblock content %}
-
-{% block script %}
-  {{ super() }}
-{% endblock script %}