Refactor inventory and worklog templates for improved rendering and pagination; enhance table display with better responsiveness and usability

This commit is contained in:
Yaro Kasear 2025-06-17 09:44:55 -05:00
parent bdd2a43c8b
commit b68c25a05a
8 changed files with 48 additions and 184 deletions

View file

@ -1,11 +1,11 @@
{% macro render_table(headers, rows, id, entry_route=None, title=None, per_page=15) %}
{% if rows %}
{% if title %}
<label for="datatable-{{ id|default('table')|replace(' ', '-')|lower }}" class="form-label">{{ title }}</label>
{% endif %}
<div class="table-responsive">
<table id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"
class="table table-bordered table-sm table-hover table-striped table-light m-0{% if title %} caption-top{% endif %}">
{% if title %}
<caption>{{ title }}</caption>
{% endif %}
<thead class="sticky-top">
<tr>
{% for h in headers %}
@ -36,62 +36,15 @@
<script>
document.addEventListener("DOMContentLoaded", function () {
{# console.log($('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]'))
$('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]').DataTable({
new DataTable('#datatable-{{ id|default('table')|replace(' ', ' - ')|lower }}', {
pageLength: {{ per_page }},
lengthChange: false,
ordering: true,
stateSave: true
}) #}
new DataTable('#datatable-{{ id|default('table')|replace(' ', '-')|lower }}', {
pageLength: {{ per_page }},
colReorder: true
scrollX: true,
scrollY: '60vh',
scrollCollapse: true,
})
})
</script>
{% else %}
<div class="container text-center">No data.</div>
{% endif %}
{% endmacro %}
{% macro render_pagination(endpoint, page, has_prev, has_next, total_pages, page_variable='page', extra_args={}) %}
{# % set prev_args = extra_args.copy() %}
{% set next_args = extra_args.copy() %}
{% set first_args = extra_args.copy() %}
{% set last_args = extra_args.copy() %}
{% set _ = prev_args.update({page_variable: page - 1}) %}
{% set _ = next_args.update({page_variable: page + 1}) %}
{% set _ = first_args.update({page_variable: 1}) %}
{% set _ = last_args.update({page_variable: total_pages}) %}
{% if total_pages > 1 %}
<div class="d-flex justify-content-between pt-3 px-5 align-items-center">
<div>
<a href="{{ url_for(endpoint, **first_args) }}"
class="btn btn-primary{% if not has_prev %} disabled{% endif %}">&laquo; First</a>
<a href="{{ url_for(endpoint, **prev_args) }}"
class="btn btn-primary{% if not has_prev %} disabled{% endif %}">&lt; Prev</a>
</div>
<div class="d-flex flex-column align-items-center text-center pt-3">
<div>Page {{ page }} of {{ total_pages }}</div>
<div>
{% for number in range(page - 2, page + 3) if number > 0 and number <= total_pages %} {% set
args=extra_args.copy() %} {% set _=args.update({page_variable: number}) %} <a
href="{{ url_for(endpoint, **args) }}"
class="btn btn-sm {% if number == page %}btn-primary{% else %}btn-outline-primary{% endif %} mx-1">
{{ number }}
</a>
{% endfor %}
</div>
</div>
<div>
<a href="{{ url_for(endpoint, **next_args) }}"
class="btn btn-primary{% if not has_next %} disabled{% endif %}">Next &gt;</a>
<a href="{{ url_for(endpoint, **last_args) }}"
class="btn btn-primary{% if not has_next %} disabled{% endif %}">Last &raquo;</a>
</div>
</div>
{% endif % #}
{% endmacro %}