Remove history management from script.js and migrate sas albums to webpack

core/static/core/js/script.js

@@ -74,52 +74,3 @@ function displayNotif() {
 function getCSRFToken() {
   return $("[name=csrfmiddlewaretoken]").val();
 }
-
-// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
-const initialUrlParams = new URLSearchParams(window.location.search);
-
-/**
- * @readonly
- * @enum {number}
- */
-const History = {
-  // biome-ignore lint/style/useNamingConvention: this feels more like an enum
-  NONE: 0,
-  // biome-ignore lint/style/useNamingConvention: this feels more like an enum
-  PUSH: 1,
-  // biome-ignore lint/style/useNamingConvention: this feels more like an enum
-  REPLACE: 2,
-};
-
-/**
- * @param {string} key
- * @param {string | string[] | null} value
- * @param {History} action
- * @param {URL | null} url
- */
-// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
-function updateQueryString(key, value, action = History.REPLACE, url = null) {
-  let ret = url;
-  if (!ret) {
-    ret = new URL(window.location.href);
-  }
-  if (value === undefined || value === null || value === "") {
-    // If the value is null, undefined or empty => delete it
-    ret.searchParams.delete(key);
-  } else if (Array.isArray(value)) {
-    ret.searchParams.delete(key);
-    for (const v of value) {
-      ret.searchParams.append(key, v);
-    }
-  } else {
-    ret.searchParams.set(key, value);
-  }
-
-  if (action === History.PUSH) {
-    window.history.pushState(null, "", ret.toString());
-  } else if (action === History.REPLACE) {
-    window.history.replaceState(null, "", ret.toString());
-  }
-
-  return ret;
-}

core/static/webpack/user/family-graph-index.js

@@ -1,3 +1,4 @@
+import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
 import cytoscape from "cytoscape";
 import cxtmenu from "cytoscape-cxtmenu";
 import klay from "cytoscape-klay";
@@ -184,7 +185,6 @@ window.loadFamilyGraph = (config) => {
     const defaultDepth = 2;
 
     function getInitialDepth(prop) {
-      // biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
       const value = Number.parseInt(initialUrlParams.get(prop));
       if (Number.isNaN(value) || value < config.depthMin || value > config.depthMax) {
         return defaultDepth;
@@ -196,7 +196,6 @@ window.loadFamilyGraph = (config) => {
       loading: false,
       godfathersDepth: getInitialDepth("godfathersDepth"),
       godchildrenDepth: getInitialDepth("godchildrenDepth"),
-      // biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
       reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
       graph: undefined,
       graphData: {},
@@ -210,14 +209,12 @@ window.loadFamilyGraph = (config) => {
             if (value < config.depthMin || value > config.depthMax) {
               return;
             }
-            // biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
+            updateQueryString(param, value, History.Replace);
-            updateQueryString(param, value, History.REPLACE);
             await delayedFetch();
           });
         }
         this.$watch("reverse", async (value) => {
-          // biome-ignore lint/correctness/noUndeclaredVariables: defined by script.js
+          updateQueryString("reverse", value, History.Replace);
-          updateQueryString("reverse", value, History.REPLACE);
           await this.reverseGraph();
         });
         this.$watch("graphData", async () => {

core/static/webpack/utils/history.ts

@@ -0,0 +1,40 @@
+export enum History {
+  None = 0,
+  Push = 1,
+  Replace = 2,
+}
+
+export const initialUrlParams = new URLSearchParams(window.location.search);
+export const getCurrentUrlParams = () => {
+  return new URLSearchParams(window.location.search);
+};
+
+export function updateQueryString(
+  key: string,
+  value?: string | string[],
+  action?: History,
+  url?: string,
+) {
+  const historyAction = action ?? History.Replace;
+  const ret = new URL(url ?? window.location.href);
+
+  if (value === undefined || value === null || value === "") {
+    // If the value is null, undefined or empty => delete it
+    ret.searchParams.delete(key);
+  } else if (Array.isArray(value)) {
+    ret.searchParams.delete(key);
+    for (const v of value) {
+      ret.searchParams.append(key, v);
+    }
+  } else {
+    ret.searchParams.set(key, value);
+  }
+
+  if (historyAction === History.Push) {
+    window.history.pushState(null, "", ret.toString());
+  } else if (historyAction === History.Replace) {
+    window.history.replaceState(null, "", ret.toString());
+  }
+
+  return ret;
+}

pedagogy/static/webpack/pedagogy/guide-index.js

@@ -1,3 +1,4 @@
+import { History, getCurrentUrlParams, updateQueryString } from "#core:utils/history";
 import { uvFetchUvList } from "#openapi";
 
 const pageDefault = 1;
@@ -22,13 +23,13 @@ document.addEventListener("alpine:init", () => {
     semester: [],
     // biome-ignore lint/style/useNamingConvention: api is in snake_case
     to_change: [],
-    pushstate: History.PUSH,
+    pushstate: History.Push,
 
     update: undefined,
 
     initializeArgs() {
-      const url = new URLSearchParams(window.location.search);
+      const url = getCurrentUrlParams();
-      this.pushstate = History.REPLACE;
+      this.pushstate = History.Replace;
 
       this.page = Number.parseInt(url.get("page")) || pageDefault;
       this.page_size = Number.parseInt(url.get("page_size")) || pageSizeDefault;
@@ -47,17 +48,14 @@ document.addEventListener("alpine:init", () => {
       this.update = Alpine.debounce(async () => {
         /* Create the whole url before changing everything all at once */
         const first = this.to_change.shift();
-        // biome-ignore lint/correctness/noUndeclaredVariables: defined in script.js
+        let url = updateQueryString(first.param, first.value, History.None);
-        let url = updateQueryString(first.param, first.value, History.NONE);
         for (const value of this.to_change) {
-          // biome-ignore lint/correctness/noUndeclaredVariables: defined in script.js
+          url = updateQueryString(value.param, value.value, History.None, url);
-          url = updateQueryString(value.param, value.value, History.NONE, url);
         }
-        // biome-ignore lint/correctness/noUndeclaredVariables: defined in script.js
         updateQueryString(first.param, first.value, this.pushstate, url);
         await this.fetchData(); /* reload data on form change */
         this.to_change = [];
-        this.pushstate = History.PUSH;
+        this.pushstate = History.Push;
       }, 50);
 
       const searchParams = ["search", "department", "credit_type", "semester"];
@@ -65,7 +63,7 @@ document.addEventListener("alpine:init", () => {
 
       for (const param of searchParams) {
         this.$watch(param, () => {
-          if (this.pushstate !== History.PUSH) {
+          if (this.pushstate !== History.Push) {
             /* This means that we are doing a mass param edit */
             return;
           }

sas/static/webpack/sas/album-index.js

@@ -0,0 +1,59 @@
+import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
+import { picturesFetchPictures } from "#openapi";
+
+/**
+ * @typedef AlbumConfig
+ * @property {number} albumId id of the album to visualize
+ * @property {number} maxPageSize maximum number of elements to show on a page
+ **/
+
+/**
+ * Create a family graph of an user
+ * @param {AlbumConfig} config
+ **/
+window.loadAlbum = (config) => {
+  document.addEventListener("alpine:init", () => {
+    Alpine.data("pictures", () => ({
+      pictures: {},
+      page: Number.parseInt(initialUrlParams.get("page")) || 1,
+      pushstate: History.Push /* Used to avoid pushing a state on a back action */,
+      loading: false,
+
+      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", () => {
+          this.pushstate = History.Replace;
+          this.page =
+            Number.parseInt(new URLSearchParams(window.location.search).get("page")) ||
+            1;
+        });
+      },
+
+      async fetchPictures() {
+        this.loading = true;
+        this.pictures = (
+          await picturesFetchPictures({
+            query: {
+              // biome-ignore lint/style/useNamingConvention: API is in snake_case
+              album_id: config.albumId,
+              page: this.page,
+              // biome-ignore lint/style/useNamingConvention: API is in snake_case
+              page_size: config.maxPageSize,
+            },
+          })
+        ).data;
+        this.loading = false;
+      },
+
+      nbPages() {
+        return Math.ceil(this.pictures.count / config.maxPageSize);
+      },
+    }));
+  });
+};

sas/templates/sas/album.jinja

@@ -5,6 +5,10 @@
   <link rel="stylesheet" href="{{ static('sas/css/album.scss') }}">
 {%- endblock -%}
 
+{%- block additional_js -%}
+  <script src="{{ static('webpack/sas/album-index.js') }}" defer></script>
+{%- endblock -%}
+
 {% block title %}
   {% trans %}SAS{% endtrans %}
 {% endblock %}
@@ -108,48 +112,14 @@
 {% block script %}
   {{ super() }}
   <script>
-    document.addEventListener("alpine:init", () => {
+    window.addEventListener("DOMContentLoaded", () => {
-      Alpine.data("pictures", () => ({
+      loadAlbum({
-        pictures: {},
+        albumId: {{ album.id }},
-        page: parseInt(initialUrlParams.get("page")) || 1,
+        maxPageSize: {{ settings.SITH_SAS_IMAGES_PER_PAGE }},
-        pushstate: History.PUSH, /* Used to avoid pushing a state on a back action */
+      });
-        loading: false,
+    });
-
-        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", () => {
-            this.pushstate = History.REPLACE;
-            this.page = parseInt(
-              new URLSearchParams(window.location.search).get("page")
-            ) || 1;
-          });
-        },
-
-        async fetchPictures() {
-          this.loading=true;
-          const url = "{{ url("api:pictures") }}"
-          +"?album_id={{ album.id }}"
-          +`&page=${this.page}`
-          +"&page_size={{ settings.SITH_SAS_IMAGES_PER_PAGE }}";
-          this.pictures = await (await fetch(url)).json();
-          this.loading = false;
-        },
-
-        nbPages() {
-          return Math.ceil(this.pictures.count / {{ 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]);
 
@@ -255,4 +225,6 @@
       }
     });
   </script>
+
 {% endblock %}
+