yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Still trying to work on fixing the pager issues.

Browse source
This commit is contained in:
Yaro Kasear 2025-08-28 11:20:18 -05:00
parent bdec7202df
commit d55539192e
4 changed files with 28 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

16
crudkit/html/templates/crudkit/_macros.html
View file

@ -20,9 +20,9 @@
{% macro rows(items, fields, getp=None) -%}
{%- for obj in items -%}
<tr id="row-{{ obj.id }}">
<tr id="row-{{ obj.id }}" style="cursor: pointer;">
{%- for f in fields -%}
<td data-field="{{ f }}">{{ getp(obj, f) }}</td>
<td data-field="{{ f }}" class="text-nowrap">{{ getp(obj, f) if getp(obj, f) is not none else '-' }}</td>
{%- endfor -%}
</tr>
{%- else -%}
@ -55,17 +55,18 @@
{% endif %}
</nav>
#}
<nav id="pager">
<nav class="mt-3">
<ul class="pagination justify-content-center bg-white">
<li class="page-item {%- if page <= 1 %} disabled{% endif %}">
<a class="page-link"
hx-get="/ui/{{ model }}/frag/rows?page={{ page - 1 }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
hx-target="#rows" hx-swap="innerHTML" {%- if page <= 1 %} hx-disable{% endif %}>Prev</a>
hx-target="#rows" hx-swap="innerHTML" {%- if page <=1 %} hx-disable{% endif %}
hx-on:click="document.querySelector('#pager-state input[name=page]').value='{{ max(1, page-1) }}'">Prev</a>
</li>
<li class="page-item {%- if page <= 1 %} disabled{% endif %}">
<a class="page-link"
hx-get="/ui/{{ model }}/frag/rows?page=1&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
hx-target="#rows" hx-swap="innerHTML" {%- if page <= 1 %} hx-disable{% endif %}>1</a>
hx-target="#rows" hx-swap="innerHTML" {%- if page <=1 %} hx-disable{% endif %}>1</a>
</li>
{% if pages > 1 %}
<li class="page-item"><a class="page-link">...</a></li>
@ -73,16 +74,15 @@
<li class="page-item {%- if page >= pages %} disabled{% endif %}">
<a class="page-link"
hx-get="/ui/{{ model }}/frag/rows?page={{ pages }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
hx-target="#rows" hx-swap="innerHTML" {%- if page >= pages %} hx-disable{% endif %}>{{ pages }}</a>
hx-target="#rows" hx-swap="innerHTML" {%- if page>= pages %} hx-disable{% endif %}>{{ pages }}</a>
</li>
{% endif %}
<li class="page-item {%- if page >= pages %} disabled{% endif %}">
<a class="page-link"
hx-get="/ui/{{ model }}/frag/rows?page={{ page + 1 }}&per_page={{ per_page }}{% if sort %}&sort={{ sort }}{% endif %}{% if fields_csv %}&fields_csv={{ fields_csv|urlencode }}{% endif %}{% for k,v in filters.items() %}&{{k}}={{ v|urlencode }}{% endfor %}"
hx-target="#rows" hx-swap="innerHTML" {%- if page >= pages %} hx-disable{% endif %}>Next</a>
hx-target="#rows" hx-swap="innerHTML" {%- if page>= pages %} hx-disable{% endif %}>Next</a>
</li>
</ul>
<span>Page {{ page }} / {{ pages }}</span>
</nav>
{%- endmacro %}

1
crudkit/html/ui_fragments.py
View file

@ -116,6 +116,7 @@ def make_fragments_blueprint(db_session_factory, registry: Dict[str, Any], *, na
def pager(model):
Model = registry.get(model) or abort(404)
page = request.args.get("page", type=int) or 1
print(page)
per_page = request.args.get("per_page", type=int) or 20
filters = _parse_filters(request.args)
sort = request.args.get("sort")

24
inventory/templates/fragments/_table_fragment.html
View file

@ -52,7 +52,7 @@
{% endmacro %}
{% macro dynamic_table(id, headers=none, fields=none, entry_route=None, title=None, page=1, per_page=15, offset=0,
refresh_url=none, model=none) %}
refresh_url=none, model=none, sort=none) %}
<!-- Table Fragment -->
{% if title %}
@ -76,16 +76,20 @@ refresh_url=none, model=none) %}
</tr>
</thead>
<tbody id="rows"
hx-get="/ui/{{ model }}/frag/rows?page={{ page }}&per_page{{ per_page }}&fields_csv={{ fields|join(',') }}"
hx-trigger="load"
hx-target="#rows"
hx-swap="innerHTML">
hx-get="/ui/{{ model }}/frag/rows?page={{ page }}&per_page={{ per_page }}&fields_csv={{ fields|join(',') }}"
hx-trigger="load" hx-target="#rows" hx-swap="innerHTML">
</tbody>
</table>
<div id="pager"
hx-get="/ui/{{ model }}/frag/pager?page={{ page }}&per_page={{ per_page }}&fields_csv={{ fields|join(',') }}"
hx-trigger="load, htmx:afterSwap from:#rows"
hx-target="#pager"
hx-swap="outerHTML"></div>
<div id="pager-state">
<input type="hidden" name="page" value="{{ page }}">
<input type="hidden" name="per_page" value="{{ per_page }}">
<input type="hidden" name="fields_csv" value="{{ fields|join(',') }}">
{% if sort %}<input type="hidden" name="sort" value="{{ sort }}">{% endif %}
{% for k,v in (filters or {}).items() %}
<input type="hidden" name="{{ k }}" value="{{ v }}">
{% endfor %}
</div>
</div>
<div id="pager" hx-get="/ui/{{ model }}/frag/pager" hx-include="#pager-state"
hx-trigger="load, htmx:afterSwap from:#rows" hx-target="#pager" hx-swap="innerHTML"></div>
{% endmacro %}

1
inventory/templates/layout.html
View file

@ -87,6 +87,7 @@
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/debug.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
const searchInput = document.querySelector('#search');