hotswap/delphi-database-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed sort time

Browse Source
This commit is contained in:
HotSwapp
2025-10-14 07:56:13 -05:00
parent 9b2ce0d28f
commit 65e4995a5b
26 changed files with 99601 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
app/templates/rolodex.html
View File

@@ -19,6 +19,8 @@
</div>
<div class="col-auto">
<input type="hidden" name="page_size" value="{{ page_size }}">
<input type="hidden" name="sort_key" value="{{ sort_key }}">
<input type="hidden" name="sort_dir" value="{{ sort_dir }}">
<button class="btn btn-outline-primary" type="submit">
<i class="bi bi-search me-1"></i>Search
</button>
@@ -28,6 +30,26 @@
<i class="bi bi-x-circle me-1"></i>Clear
</a>
</div>
<div class="col-auto">
<div class="btn-group" role="group" aria-label="Sort">
<button type="button" class="btn btn-outline-secondary dropdown-toggle d-inline-flex align-items-center gap-1" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-arrow-down-up"></i>
<span>{{ sort_labels[sort_key] if sort_labels and sort_key in sort_labels else 'Sort' }}</span>
</button>
<ul class="dropdown-menu">
{% for key, label in sort_labels.items() %}
<li>
<a class="dropdown-item d-flex justify-content-between align-items-center js-sort-option" href="#" data-sort-key="{{ key }}">
<span>{{ label }}</span>
{% if sort_key == key %}
<i class="bi bi-check"></i>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-auto">
<a class="btn btn-primary" href="/rolodex/new">
<i class="bi bi-plus-lg me-1"></i>New Client
@@ -39,31 +61,40 @@
<div class="col-12">
<div class="table-responsive">
{% set headers = [
{ 'title': 'Name', 'width': '220px' },
{ 'title': 'Company' },
{ 'title': 'Address' },
{ 'title': 'City' },
{ 'title': 'State', 'width': '80px' },
{ 'title': 'ZIP', 'width': '110px' },
{ 'title': 'Phones', 'width': '200px' },
{ 'title': 'Name', 'width': '220px', 'key': 'name' },
{ 'title': 'Company', 'key': 'company' },
{ 'title': 'Address', 'key': 'address' },
{ 'title': 'City', 'key': 'city' },
{ 'title': 'State', 'width': '80px', 'key': 'state' },
{ 'title': 'ZIP', 'width': '110px', 'key': 'zip' },
{ 'title': 'Phones', 'width': '200px', 'key': 'phones' },
{ 'title': 'Actions', 'width': '140px', 'align': 'end' },
] %}
<form method="post" action="/reports/phone-book" class="js-answer-table">
<table class="table table-hover align-middle">
<table class="table table-hover align-middle js-rolodex-table" data-sort-key="{{ sort_key }}" data-sort-dir="{{ sort_dir }}">
<thead class="table-light">
<tr>
{% if enable_bulk %}
<th style="width: 40px;"><input class="form-check-input js-select-all" type="checkbox"></th>
{% endif %}
{% for h in headers %}
<th{% if h.width %} width="{{ h.width | replace('px', '') }}"{% endif %}{% if h.align == 'end' %} class="text-end"{% endif %}>{{ h.title }}</th>
<th{% if h.width %} width="{{ h.width | replace('px', '') }}"{% endif %}{% if h.align == 'end' %} class="text-end"{% endif %}>
{% if h.key %}
<button type="button" class="btn btn-link p-0 text-decoration-none text-reset d-inline-flex align-items-center gap-1 js-sort-control" data-sort-key="{{ h.key }}">
<span>{{ h.title }}</span>
<i class="sort-icon small {% if sort_key == h.key %}{% if sort_dir == 'desc' %}bi-caret-down-fill{% else %}bi-caret-up-fill{% endif %}{% else %}bi-arrow-down-up{% endif %}"></i>
</button>
{% else %}
{{ h.title }}
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% if clients and clients|length > 0 %}
{% for c in clients %}
<tr>
<tr data-updated="{{ (c.updated_at or c.created_at).isoformat() if (c.updated_at or c.created_at) else '' }}">
{% if enable_bulk %}
<td><input class="form-check-input" type="checkbox" name="client_ids" value="{{ c.id }}"></td>
{% endif %}
@@ -90,7 +121,7 @@
</tr>
{% endfor %}
{% else %}
<tr>
<tr data-empty-state="true">
<td colspan="8" class="text-center text-muted py-4">
No clients found.
<div class="small mt-1">
@@ -125,10 +156,85 @@
</div>
</div>
<div class="col-12">
{{ pagination('/rolodex', page, total_pages, page_size, {'q': q, 'phone': phone}) }}
{{ pagination('/rolodex', page, total_pages, page_size, {'q': q, 'phone': phone, 'sort_key': sort_key, 'sort_dir': sort_dir}) }}
</div>
</div>
{% block extra_scripts %}{% endblock %}
{% block extra_scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', () => {
const table = document.querySelector('.js-rolodex-table');
if (!table) {
return;
}
const controls = document.querySelectorAll('.js-sort-control');
const menuOptions = document.querySelectorAll('.js-sort-option');
const defaultDirection = (key) => (key === 'updated' ? 'desc' : 'asc');
let currentKey = table.dataset.sortKey || null;
let currentDir = table.dataset.sortDir || null;
const updateIndicators = (activeKey, direction) => {
const normalizedDirection = direction === 'desc' ? 'desc' : 'asc';
controls.forEach((control) => {
const icon = control.querySelector('.sort-icon');
if (!icon) {
return;
}
icon.classList.remove('bi-caret-up-fill', 'bi-caret-down-fill');
if (control.dataset.sortKey === activeKey) {
icon.classList.remove('bi-arrow-down-up');
icon.classList.add(normalizedDirection === 'desc' ? 'bi-caret-down-fill' : 'bi-caret-up-fill');
} else {
icon.classList.add('bi-arrow-down-up');
}
});
};
updateIndicators(currentKey, currentDir);
controls.forEach((control) => {
control.addEventListener('click', () => {
const key = control.dataset.sortKey;
if (!key) {
return;
}
const nextDirection = currentKey === key
? (currentDir === 'asc' ? 'desc' : 'asc')
: defaultDirection(key);
const url = new URL(window.location.href);
url.searchParams.set('sort_key', key);
url.searchParams.set('sort_dir', nextDirection);
url.searchParams.set('page', '1');
window.location.href = url.toString();
});
});
menuOptions.forEach((option) => {
option.addEventListener('click', (event) => {
event.preventDefault();
const key = option.dataset.sortKey;
if (!key) {
return;
}
const nextDirection = currentKey === key
? (currentDir === 'asc' ? 'desc' : 'asc')
: defaultDirection(key);
const url = new URL(window.location.href);
url.searchParams.set('sort_key', key);
url.searchParams.set('sort_dir', nextDirection);
url.searchParams.set('page', '1');
window.location.href = url.toString();
});
});
});
</script>
{% endblock %}
{% endblock %}