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 %}
|
||||
{% 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() %}
|
||||
|
@ -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>
|
||||
{#
|
||||
|
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user