Create a paginate_alpine macro

This commit is contained in:
Antoine Bartuccio 2024-08-11 15:11:51 +02:00
parent 2ec1f8cdc0
commit 2a6c1f050d
3 changed files with 44 additions and 45 deletions

View File

@ -116,6 +116,46 @@
{% endif %} {% endif %}
{% endmacro %} {% 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) %} {% macro paginate(page_obj, paginator, js_action) %}
{% set js = js_action|default('') %} {% set js = js_action|default('') %}
{% if page_obj.has_previous() or page_obj.has_next() %} {% if page_obj.has_previous() or page_obj.has_next() %}

View File

@ -1,4 +1,5 @@
{% extends "core/base.jinja" %} {% extends "core/base.jinja" %}
{% from 'core/macros.jinja' import paginate_alpine %}
{% block title %} {% block title %}
{% trans %}UV Guide{% endtrans %} {% trans %}UV Guide{% endtrans %}
@ -113,29 +114,7 @@
</template> </template>
</tbody> </tbody>
</table> </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> </div>
<script> <script>
{# {#

View File

@ -1,4 +1,5 @@
{% extends "core/base.jinja" %} {% extends "core/base.jinja" %}
{% from 'core/macros.jinja' import paginate_alpine %}
{%- block additional_css -%} {%- block additional_css -%}
<link rel="stylesheet" href="{{ scss('sas/album.scss') }}"> <link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
@ -79,28 +80,7 @@
</a> </a>
</template> </template>
</div> </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> </div>
{% if is_sas_admin %} {% if is_sas_admin %}