fixed sort time
This commit is contained in:
HotSwapp
@@ -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 %}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user