Create a paginate_alpine macro

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() %}

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">
+    {{ paginate_alpine("page", "max_page()") }}
-      <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>
   </div>
   <script>
     {#

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">
+    {{  paginate_alpine("page", "nb_pages()") }}
-      {# 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>
   </div>
 
   {% if is_sas_admin %}