typescriptify album-index.js

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

@@ -1,10 +1,6 @@
 import { paginated } from "#core:utils/api";
 import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
-import {
-  type PictureSchema,
-  type PicturesFetchPicturesData,
-  picturesFetchPictures,
-} from "#openapi";
+import { type PictureSchema, type PicturesFetchPicturesData, picturesFetchPictures } from "#openapi";
 
 interface AlbumConfig {
   albumId: number;
@@ -17,12 +13,14 @@ 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: config,
 
     async init() {
       await this.fetchPictures();
       this.$watch("page", () => {
         updateQueryString("page", this.page === 1 ? null : this.page, this.pushstate);
         this.pushstate = History.Push;
+        this.fetchPictures();
       });
 
       window.addEventListener("popstate", () => {
@@ -30,7 +28,6 @@ document.addEventListener("alpine:init", () => {
         this.page =
           Number.parseInt(new URLSearchParams(window.location.search).get("page")) || 1;
       });
-      this.config = config;
     },
 
     getPage(page: number) {

sas/templates/sas/album.jinja

@@ -64,11 +64,7 @@
     <br>
   {% endif %}
 
-  <div x-data="pictures({
-               albumId: {{ album.id }},
-               maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
-               })">
-
+  <div x-data="pictures({ albumId: {{ album.id }}, maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }} })">
     {{ download_button(_("Download album")) }}
 
     <h4>{% trans %}Pictures{% endtrans %}</h4>
@@ -94,7 +90,7 @@
         </a>
       </template>
     </div>
-    {{  paginate_alpine("page", "nbPages()") }}
+    {{ paginate_alpine("page", "nbPages()") }}
   </div>
 
   {% if is_sas_admin %}