mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-10 00:03:24 +00:00
Create a paginate_alpine macro
This commit is contained in:
parent
2ec1f8cdc0
commit
2a6c1f050d
@ -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() %}
|
||||||
|
@ -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>
|
||||||
{#
|
{#
|
||||||
|
@ -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 %}
|
||||||
|
Loading…
Reference in New Issue
Block a user