klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-22 06:03:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create a paginate_alpine macro

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
core/templates/core/macros.jinja
View File

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

25
pedagogy/templates/pedagogy/guide.jinja
View File

@ -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>
{#

24
sas/templates/sas/album.jinja
View File

@ -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 %}