klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2026-03-31 07:49:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow custom target for htmx pagination

Browse Source
This commit is contained in:
Antoine Bartuccio
2026-03-30 19:43:22 +02:00
parent b5d8db0187
commit 74a089a529
2 changed files with 57 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
club/templates/club/club_list.jinja
View File

@@ -22,54 +22,55 @@
{% from "core/macros.jinja" import paginate_htmx %}
{% block content %}
<main>
<h3>{% trans %}Filters{% endtrans %}</h3>
<form
id="club-list-filters"
hx-get="{{ url("club:club_list") }}"
hx-target="#content"
hx-swap="outerHtml"
>
<div class="row gap-4x">
{{ form }}
</div>
<button type="submit" class="btn btn-blue margin-bottom">
<i class="fa fa-magnifying-glass"></i>{% trans %}Search{% endtrans %}
</button>
</form>
<h3>{% trans %}Club list{% endtrans %}</h3>
{% if user.has_perm("club.add_club") %}
<br>
<a href="{{ url('club:club_new') }}" class="btn btn-blue">
<i class="fa fa-plus"></i> {% trans %}New club{% endtrans %}
</a>
{% endif %}
<section class="aria-busy-grow" id="club-list">
{% for club in object_list %}
<div class="card">
{% set club_url = club.get_absolute_url() %}
<a href="{{ club_url }}">
{% if club.logo %}
<img class="club-image" src="{{ club.logo.url }}" alt="logo {{ club.name }}">
{% else %}
<i class="fa-regular fa-image fa-4x club-image"></i>
{% endif %}
</a>
<div class="content">
<a href="{{ club_url }}">
<h4>
{{ club.name }} {% if not club.is_active %}({% trans %}inactive{% endtrans %}){% endif %}
</h4>
</a>
{{ club.short_description|markdown }}
</div>
{% if not is_fragment %}
<main>
<h3>{% trans %}Filters{% endtrans %}</h3>
<form>
<div class="row gap-4x">
{{ form }}
</div>
{% endfor %}
</section>
<button type="submit" class="btn btn-blue margin-bottom">
<i class="fa fa-magnifying-glass"></i>{% trans %}Search{% endtrans %}
</button>
</form>
<h3>{% trans %}Club list{% endtrans %}</h3>
{% if user.has_perm("club.add_club") %}
<br>
<a href="{{ url('club:club_new') }}" class="btn btn-blue">
<i class="fa fa-plus"></i> {% trans %}New club{% endtrans %}
</a>
{% endif %}
<div id="paginated">
{% endif %}
<section class="aria-busy-grow" id="club-list">
{% for club in object_list %}
<div class="card">
{% set club_url = club.get_absolute_url() %}
<a href="{{ club_url }}">
{% if club.logo %}
<img class="club-image" src="{{ club.logo.url }}" alt="logo {{ club.name }}">
{% else %}
<i class="fa-regular fa-image fa-4x club-image"></i>
{% endif %}
</a>
<div class="content">
<a href="{{ club_url }}">
<h4>
{{ club.name }} {% if not club.is_active %}({% trans %}inactive{% endtrans %}){% endif %}
</h4>
</a>
{{ club.short_description|markdown }}
</div>
</div>
{% endfor %}
{% if is_paginated %}
{{ paginate_htmx(request, page_obj, paginator) }}
{{ paginate_htmx(request, page_obj, paginator, htmx_target="#paginated") }}
{% endif %}
</main>
</section>
{% if not is_fragment %}
</div>
</main>
{% endif %}
{% endblock %}

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

@@ -129,10 +129,10 @@
current_page (django.core.paginator.Page): the current page object
paginator (django.core.paginator.Paginator): the paginator object
#}
{{ paginate_server_side(request, current_page, paginator, False) }}
{{ paginate_server_side(request, current_page, paginator, "") }}
{% endmacro %}
{% macro paginate_htmx(request, current_page, paginator) %}
{% macro paginate_htmx(request, current_page, paginator, htmx_target="#content") %}
{# Add pagination buttons for pages without Alpine but supporting fragments.
This must be coupled with a view that handles pagination
@@ -144,18 +144,19 @@
request (django.http.request.HttpRequest): the current django request
current_page (django.core.paginator.Page): the current page object
paginator (django.core.paginator.Paginator): the paginator object
htmx_target (string): htmx target selector (default '#content')
#}
{{ paginate_server_side(request, current_page, paginator, True) }}
{{ paginate_server_side(request, current_page, paginator, htmx_target) }}
{% endmacro %}
{% macro paginate_server_side(request, current_page, paginator, use_htmx) %}
{% macro paginate_server_side(request, current_page, paginator, htmx_target) %}
<nav class="pagination">
{% if current_page.has_previous() %}
<a
{% if use_htmx -%}
{% if htmx_target -%}
hx-get="?{{ querystring(request, page=current_page.previous_page_number()) }}"
hx-swap="innerHTML"
hx-target="#content"
hx-target="{{ htmx_target }}"
hx-push-url="true"
hx-trigger="click, keyup[key=='ArrowLeft'] from:body"
{%- else -%}
@@ -176,10 +177,10 @@
<strong>{{ paginator.ELLIPSIS }}</strong>
{% else %}
<a
{% if use_htmx -%}
{% if htmx_target -%}
hx-get="?{{ querystring(request, page=i) }}"
hx-swap="innerHTML"
hx-target="#content"
hx-target="{{ htmx_target }}"
hx-push-url="true"
{%- else -%}
href="?{{ querystring(request, page=i) }}"
@@ -191,10 +192,10 @@
{% endfor %}
{% if current_page.has_next() %}
<a
{% if use_htmx -%}
{% if htmx_target -%}
hx-get="?{{querystring(request, page=current_page.next_page_number())}}"
hx-swap="innerHTML"
hx-target="#content"
hx-target="{{ htmx_target }}"
hx-push-url="true"
hx-trigger="click, keyup[key=='ArrowRight'] from:body"
{%- else -%}