From 2ec1f8cdc00323ebaccfac529f178d76754ab342 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sun, 11 Aug 2024 14:58:05 +0200
Subject: [PATCH 1/5] Fix back action in uv guide

---
 pedagogy/templates/pedagogy/guide.jinja | 77 +++++++++++++++++++------
 1 file changed, 59 insertions(+), 18 deletions(-)

diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja
index 1aa713e4..639ee0ca 100644
--- a/pedagogy/templates/pedagogy/guide.jinja
+++ b/pedagogy/templates/pedagogy/guide.jinja
@@ -114,13 +114,25 @@
       </tbody>
     </table>
     <nav class="pagination" x-show="max_page() > 1">
-      <button @click="page--" :disabled="page <= 1">
+      <button
+        @click="page--"
+        :disabled="page <= 1"
+        @keyup.right.window="page = Math.min(max_page(), page + 1)"
+      >
         <i class="fa fa-caret-left"></i>
       </button>
       <template x-for="i in max_page()">
-        <button x-text="i" @click="page = i" :class="(page === i) && 'active'"></button>
+        <button
+          x-text="i"
+          @click="page = i"
+          :class="(page === i) && 'active'"
+        ></button>
       </template>
-      <button @click="page++" :disabled="page >= max_page()">
+      <button
+        @click="page++"
+        :disabled="page >= max_page()"
+        @keyup.left.window="page = Math.max(1, page - 1)"
+      >
         <i class="fa fa-caret-right"></i>
       </button>
     </nav>
@@ -141,34 +153,63 @@
       Alpine.data("uv_search", () => ({
         uvs: [],
         loading: false,
-        page: parseInt(initialUrlParams.get("page")) || page_default,
-        page_size: parseInt(initialUrlParams.get("page_size")) || page_size_default,
-        search: initialUrlParams.get("search") || "",
-        department: initialUrlParams.getAll("department"),
-        credit_type: initialUrlParams.getAll("credit_type"),
-            {# The semester is easier to use on the backend as an enum (spring/autumn/both/none)
-            and easier to use on the frontend as an array ([spring, autumn]).
-            Thus there is some conversion involved when both communicate together #}
-        semester: initialUrlParams.has("semester") ?
-        initialUrlParams.get("semester").split("_AND_") : [],
+        page: page_default,
+        page_size: page_size_default,
+        search: "",
+        department: [],
+        credit_type: [],
+        semester: [],
+        pushstate: History.PUSH,
+
+        async initialize_args() {
+          let url = new URLSearchParams(window.location.search);
+          this.pushstate = History.REPLACE;
+
+          this.page = parseInt(url.get("page")) || page_default;;
+          this.page_size = parseInt(url.get("page_size")) || page_size_default;
+          this.search = url.get("search") || "";
+          this.department = url.getAll("department");
+          this.credit_type = url.getAll("credit_type");
+              {# The semester is easier to use on the backend as an enum (spring/autumn/both/none)
+              and easier to use on the frontend as an array ([spring, autumn]).
+              Thus there is some conversion involved when both communicate together #}
+          this.semester = url.has("semester") ?
+          url.get("semester").split("_AND_") : [];
+
+          {# Wait for all watch callbacks to be called #}
+          await (new Promise(resolve => setTimeout(resolve, 100)));
+
+          this.pushstate = History.PUSH;
+        },
 
         async init() {
+          await this.initialize_args();
           let search_params = ["search", "department", "credit_type", "semester"];
-          let pagination_params = ["semester", "page"];
+          let pagination_params = ["page", "page_size"];
+
+          this.fetch_data();  {# load initial data #}
+
           search_params.forEach((param) => {
-            this.$watch(param, async () => {
-                        {# Reset pagination on search #}
+            this.$watch(param, async (value) => {
+              if (this.pushstate != History.PUSH){
+                {# This means that we are doing a mass param edit #}
+                return;
+              }
+              {# Reset pagination on search #}
               this.page = page_default;
               this.page_size = page_size_default;
             });
           });
           search_params.concat(pagination_params).forEach((param) => {
             this.$watch(param, async (value) => {
-              update_query_string(param, value);
+              console.log(param + " " + value)
+              update_query_string(param, value, this.pushstate);
               await this.fetch_data();  {# reload data on form change #}
             });
           });
-          await this.fetch_data();  {# load initial data #}
+          window.addEventListener("popstate", () => {
+            this.initialize_args();
+          });
         },
 
         async fetch_data() {

From 2a6c1f050d6f7281a4250e8e127e86408a2a3369 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sun, 11 Aug 2024 15:11:51 +0200
Subject: [PATCH 2/5] Create a paginate_alpine macro

---
 core/templates/core/macros.jinja        | 40 +++++++++++++++++++++++++
 pedagogy/templates/pedagogy/guide.jinja | 25 ++--------------
 sas/templates/sas/album.jinja           | 24 ++-------------
 3 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/core/templates/core/macros.jinja b/core/templates/core/macros.jinja
index 2344de37..11014a64 100644
--- a/core/templates/core/macros.jinja
+++ b/core/templates/core/macros.jinja
@@ -116,6 +116,46 @@
   {% endif %}
 {% endmacro %}
 
+{% macro paginate_alpine(page, nb_pages) %}
+    {# Add pagination buttons for ajax based content with alpine
+
+    Notes:
+        This can only be used in the scope of your alpine datastore
+
+    Notes:
+        You might need to listen to the "popstate" event in your code
+        to update the current page you are on when the user goes back in
+        it's browser history with the back arrow
+
+    Parameters:
+        page (str): name of the alpine page variable in your datastore
+        nb_page (str): call to a javascript function or variable returning
+            the maximum number of pages to paginate
+    #}
+  <nav class="pagination" x-show="{{ nb_pages }} > 1">
+      {# Adding the prevent here is important, because otherwise,
+      clicking on the pagination buttons could submit the picture management form
+      and reload the page #}
+    <button
+      @click.prevent="{{ page }}--"
+      :disabled="{{ page }} <= 1"
+      @keyup.right.window="{{ page }} = Math.min({{ nb_pages }}, {{ page }} + 1)"
+    >
+      <i class="fa fa-caret-left"></i>
+    </button>
+    <template x-for="i in {{ nb_pages }}">
+      <button x-text="i" @click.prevent="{{ page }} = i" :class="{active: {{ page }} === i}"></button>
+    </template>
+    <button
+      @click.prevent="{{ page }}++"
+      :disabled="{{ page }} >= {{ nb_pages }}"
+      @keyup.left.window="{{ page }} = Math.max(1, {{ page }} - 1)"
+    >
+      <i class="fa fa-caret-right"></i>
+    </button>
+  </nav>
+{% endmacro %}
+
 {% macro paginate(page_obj, paginator, js_action) %}
   {% set js = js_action|default('') %}
   {% if page_obj.has_previous() or page_obj.has_next() %}
diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja
index 639ee0ca..e2ab4d22 100644
--- a/pedagogy/templates/pedagogy/guide.jinja
+++ b/pedagogy/templates/pedagogy/guide.jinja
@@ -1,4 +1,5 @@
 {% extends "core/base.jinja" %}
+{% from 'core/macros.jinja' import paginate_alpine %}
 
 {% block title %}
   {% trans %}UV Guide{% endtrans %}
@@ -113,29 +114,7 @@
         </template>
       </tbody>
     </table>
-    <nav class="pagination" x-show="max_page() > 1">
-      <button
-        @click="page--"
-        :disabled="page <= 1"
-        @keyup.right.window="page = Math.min(max_page(), page + 1)"
-      >
-        <i class="fa fa-caret-left"></i>
-      </button>
-      <template x-for="i in max_page()">
-        <button
-          x-text="i"
-          @click="page = i"
-          :class="(page === i) && 'active'"
-        ></button>
-      </template>
-      <button
-        @click="page++"
-        :disabled="page >= max_page()"
-        @keyup.left.window="page = Math.max(1, page - 1)"
-      >
-        <i class="fa fa-caret-right"></i>
-      </button>
-    </nav>
+    {{ paginate_alpine("page", "max_page()") }}
   </div>
   <script>
     {#
diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja
index 05a1eab0..a145a11f 100644
--- a/sas/templates/sas/album.jinja
+++ b/sas/templates/sas/album.jinja
@@ -1,4 +1,5 @@
 {% extends "core/base.jinja" %}
+{% from 'core/macros.jinja' import paginate_alpine %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
@@ -79,28 +80,7 @@
         </a>
       </template>
     </div>
-    <nav class="pagination" x-show="nb_pages() > 1">
-      {# Adding the prevent here is important, because otherwise,
-      clicking on the pagination buttons could submit the picture management form
-      and reload the page #}
-      <button
-        @click.prevent="page--"
-        :disabled="page <= 1"
-        @keyup.right.window="page = Math.min(nb_pages(), page + 1)"
-      >
-        <i class="fa fa-caret-left"></i>
-      </button>
-      <template x-for="i in nb_pages()">
-        <button x-text="i" @click.prevent="page = i" :class="{active: page === i}"></button>
-      </template>
-      <button
-        @click.prevent="page++"
-        :disabled="page >= nb_pages()"
-        @keyup.left.window="page = Math.max(1, page - 1)"
-      >
-        <i class="fa fa-caret-right"></i>
-      </button>
-    </nav>
+    {{  paginate_alpine("page", "nb_pages()") }}
   </div>
 
   {% if is_sas_admin %}

From cdb73ee49cc68884e0a93f9c82d153400ac219ac Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sat, 17 Aug 2024 02:57:00 +0200
Subject: [PATCH 3/5] Don't rely on waiting for pedagogy history

---
 core/static/core/js/script.js           | 14 ++++--
 pedagogy/templates/pedagogy/guide.jinja | 59 ++++++++++++++++++++-----
 2 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/core/static/core/js/script.js b/core/static/core/js/script.js
index 13613740..c55cf51f 100644
--- a/core/static/core/js/script.js
+++ b/core/static/core/js/script.js
@@ -74,6 +74,7 @@ const initialUrlParams = new URLSearchParams(window.location.search);
  * @enum {number}
  */
 const History = {
+    NONE: 0,
     PUSH: 1,
     REPLACE: 2,
 };
@@ -82,9 +83,12 @@ const History = {
  * @param {string} key
  * @param {string | string[] | null} value
  * @param {History} action
+ * @param {URL | null} url
  */
-function update_query_string(key, value, action = History.REPLACE) {
-    const url = new URL(window.location.href);
+function update_query_string(key, value, action = History.REPLACE, url = null) {
+    if (!url){
+        url = new URL(window.location.href);
+    }
     if (!value) {
         // If the value is null, undefined or empty => delete it
         url.searchParams.delete(key)
@@ -96,8 +100,10 @@ function update_query_string(key, value, action = History.REPLACE) {
     }
 
     if (action === History.PUSH) {
-        history.pushState(null, document.title, url.toString());
+        history.pushState(null, "", url.toString());
     } else if (action === History.REPLACE) {
-        history.replaceState(null, document.title, url.toString());
+        history.replaceState(null, "", url.toString());
     }
+
+    return url;
 }
diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja
index e2ab4d22..169c6d99 100644
--- a/pedagogy/templates/pedagogy/guide.jinja
+++ b/pedagogy/templates/pedagogy/guide.jinja
@@ -128,6 +128,27 @@
     #}
     const page_default = 1;
     const page_size_default = 100;
+    function debouncePromise (fn, ms = 0) {
+      let timeoutId;
+      const pending = [];
+      return (...args) =>
+      new Promise((res, rej) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+          const currentPending = [...pending];
+          pending.length = 0;
+          Promise.resolve(fn.apply(this, args)).then(
+            data => {
+              currentPending.forEach(({ resolve }) => resolve(data));
+            },
+            error => {
+              currentPending.forEach(({ reject }) => reject(error));
+            }
+          );
+        }, ms);
+        pending.push({ resolve: res, reject: rej });
+      });
+    };
     document.addEventListener("alpine:init", () => {
       Alpine.data("uv_search", () => ({
         uvs: [],
@@ -138,8 +159,11 @@
         department: [],
         credit_type: [],
         semester: [],
+        to_change: [],
         pushstate: History.PUSH,
 
+        update: undefined,
+
         async initialize_args() {
           let url = new URLSearchParams(window.location.search);
           this.pushstate = History.REPLACE;
@@ -155,19 +179,28 @@
           this.semester = url.has("semester") ?
           url.get("semester").split("_AND_") : [];
 
-          {# Wait for all watch callbacks to be called #}
-          await (new Promise(resolve => setTimeout(resolve, 100)));
-
+          await this.update()
           this.pushstate = History.PUSH;
         },
 
         async init() {
-          await this.initialize_args();
+          this.update = debouncePromise(async () => {
+            await Promise.all(this.to_change).then(async (data) => {
+              {# Create the whole url before changing everything all at once #}
+              let first = data.shift();
+              let url = update_query_string(first[0], first[1], History.NONE);
+              data.forEach((data) => {
+                url = update_query_string(data[0], data[1], History.NONE, url);
+              })
+              update_query_string(first[0], first[1], this.pushstate, url);
+              await this.fetch_data();  {# reload data on form change #}
+              this.to_change = [];
+            })
+          }, 50);
+
           let search_params = ["search", "department", "credit_type", "semester"];
           let pagination_params = ["page", "page_size"];
 
-          this.fetch_data();  {# load initial data #}
-
           search_params.forEach((param) => {
             this.$watch(param, async (value) => {
               if (this.pushstate != History.PUSH){
@@ -181,16 +214,20 @@
           });
           search_params.concat(pagination_params).forEach((param) => {
             this.$watch(param, async (value) => {
-              console.log(param + " " + value)
-              update_query_string(param, value, this.pushstate);
-              await this.fetch_data();  {# reload data on form change #}
+              this.to_change.push(new Promise((resolve) => {
+                resolve([param, value]);
+              })
+              );
+              this.update();
             });
           });
-          window.addEventListener("popstate", () => {
-            this.initialize_args();
+          window.addEventListener("popstate", async (event) => {
+            await this.initialize_args();
           });
+          await this.initialize_args();
         },
 
+
         async fetch_data() {
           this.loading = true;
           const url = "{{ url("api:fetch_uvs") }}" + window.location.search;

From 8865529b396f21a2ca0b2049a6c20fdb512d193b Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sat, 17 Aug 2024 02:58:53 +0200
Subject: [PATCH 4/5] Use native alpine debounce

---
 pedagogy/templates/pedagogy/guide.jinja | 27 +++----------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja
index 169c6d99..45da6f94 100644
--- a/pedagogy/templates/pedagogy/guide.jinja
+++ b/pedagogy/templates/pedagogy/guide.jinja
@@ -128,27 +128,6 @@
     #}
     const page_default = 1;
     const page_size_default = 100;
-    function debouncePromise (fn, ms = 0) {
-      let timeoutId;
-      const pending = [];
-      return (...args) =>
-      new Promise((res, rej) => {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => {
-          const currentPending = [...pending];
-          pending.length = 0;
-          Promise.resolve(fn.apply(this, args)).then(
-            data => {
-              currentPending.forEach(({ resolve }) => resolve(data));
-            },
-            error => {
-              currentPending.forEach(({ reject }) => reject(error));
-            }
-          );
-        }, ms);
-        pending.push({ resolve: res, reject: rej });
-      });
-    };
     document.addEventListener("alpine:init", () => {
       Alpine.data("uv_search", () => ({
         uvs: [],
@@ -179,12 +158,11 @@
           this.semester = url.has("semester") ?
           url.get("semester").split("_AND_") : [];
 
-          await this.update()
-          this.pushstate = History.PUSH;
+          this.update()
         },
 
         async init() {
-          this.update = debouncePromise(async () => {
+          this.update = Alpine.debounce(async () => {
             await Promise.all(this.to_change).then(async (data) => {
               {# Create the whole url before changing everything all at once #}
               let first = data.shift();
@@ -195,6 +173,7 @@
               update_query_string(first[0], first[1], this.pushstate, url);
               await this.fetch_data();  {# reload data on form change #}
               this.to_change = [];
+              this.pushstate = History.PUSH;
             })
           }, 50);
 

From 759e360a1d2849a2f5dafdc9252ba9234227da0b Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sat, 17 Aug 2024 10:15:13 +0200
Subject: [PATCH 5/5] Don't use unnecessary promises

---
 pedagogy/templates/pedagogy/guide.jinja | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja
index 45da6f94..fcf9599a 100644
--- a/pedagogy/templates/pedagogy/guide.jinja
+++ b/pedagogy/templates/pedagogy/guide.jinja
@@ -163,18 +163,16 @@
 
         async init() {
           this.update = Alpine.debounce(async () => {
-            await Promise.all(this.to_change).then(async (data) => {
-              {# Create the whole url before changing everything all at once #}
-              let first = data.shift();
-              let url = update_query_string(first[0], first[1], History.NONE);
-              data.forEach((data) => {
-                url = update_query_string(data[0], data[1], History.NONE, url);
-              })
-              update_query_string(first[0], first[1], this.pushstate, url);
-              await this.fetch_data();  {# reload data on form change #}
-              this.to_change = [];
-              this.pushstate = History.PUSH;
+            {# Create the whole url before changing everything all at once #}
+            let first = this.to_change.shift();
+            let url = update_query_string(first.param, first.value, History.NONE);
+            this.to_change.forEach((value) => {
+              url = update_query_string(value.param, value.value, History.NONE, url);
             })
+            update_query_string(first.param, first.value, this.pushstate, url);
+            await this.fetch_data();  {# reload data on form change #}
+            this.to_change = [];
+            this.pushstate = History.PUSH;
           }, 50);
 
           let search_params = ["search", "department", "credit_type", "semester"];
@@ -193,10 +191,7 @@
           });
           search_params.concat(pagination_params).forEach((param) => {
             this.$watch(param, async (value) => {
-              this.to_change.push(new Promise((resolve) => {
-                resolve([param, value]);
-              })
-              );
+              this.to_change.push({ param: param, value: value })
               this.update();
             });
           });