Apply some review comments

sas/static/bundled/sas/album-index.ts

@@ -17,7 +17,6 @@ document.addEventListener("alpine:init", () => {
     page: Number.parseInt(initialUrlParams.get("page")) || 1,
     pushstate: History.Push /* Used to avoid pushing a state on a back action */,
     loading: false,
-    config: {} as AlbumConfig,
 
     async init() {
       await this.fetchPictures();
@@ -34,6 +33,13 @@ document.addEventListener("alpine:init", () => {
       this.config = config;
     },
 
+    getPage(page: number) {
+      return this.pictures.slice(
+        (page - 1) * config.maxPageSize,
+        config.maxPageSize * page,
+      );
+    },
+
     async fetchPictures() {
       this.loading = true;
       this.pictures = await paginated(picturesFetchPictures, {

sas/templates/sas/album.jinja

@@ -1,6 +1,6 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import paginate_alpine %}
-{% from "sas/download_pictures.jinja" import download_button %}
+{% from "sas/macros.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
@@ -73,7 +73,7 @@
 
     <h4>{% trans %}Pictures{% endtrans %}</h4>
     <div class="photos" :aria-busy="loading">
-      <template x-for="picture in pictures.slice((page - 1) * config.maxPageSize, config.maxPageSize * page)">
+      <template x-for="picture in getPage(page)">
         <a :href="picture.sas_url">
           <div
             class="photo"

sas/templates/sas/download_pictures.jinja

@@ -1,30 +0,0 @@
-{# 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
- #}
-{% 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 != "" -%}
-          {{ name }}
-        {%- endif -%}
-      </button>
-      <progress x-ref="progress" x-show="isDownloading"></progress>
-    </div>
-  </div>
-{% endmacro %}

sas/templates/sas/macros.jinja

@@ -33,4 +33,32 @@
     {{ print_path(file.parent) }}
     <a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> /
   {% endif %}
-{% endmacro %}
+{% endmacro %}
+
+{# 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
+ #}
+{% 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>{{ name }}
+      </button>
+      <progress x-ref="progress" x-show="isDownloading"></progress>
+    </div>
+  </div>
+{% endmacro %}

sas/templates/sas/user_pictures.jinja

@@ -1,5 +1,5 @@
 {% extends "core/base.jinja" %}
-{% from "sas/download_pictures.jinja" import download_button %}
+{% from "sas/macros.jinja" import download_button %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">