Answer-table pattern: add reusable macros, integrate with Rolodex; bulk actions retained. Field prompts/help: generic focus-based help in forms (case, rolodex); add JS support. Rebuild Docker.
This commit is contained in:
HotSwapp
@@ -2,6 +2,8 @@
|
||||
|
||||
{% block title %}Rolodex · Delphi Database{% endblock %}
|
||||
|
||||
{% from "partials/answer_table_macros.html" import results_summary, pagination, answer_table, bulk_actions_bar %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row g-3 align-items-center mb-3">
|
||||
<div class="col-auto">
|
||||
@@ -33,121 +35,72 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12 text-muted small">
|
||||
{% if total and total > 0 %}
|
||||
Showing {{ start_index }}–{{ end_index }} of {{ total }}
|
||||
{% else %}
|
||||
No results
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-12 text-muted small">{{ results_summary(start_index, end_index, total) }}</div>
|
||||
<div class="col-12">
|
||||
<div class="table-responsive">
|
||||
<form method="post" action="/reports/phone-book" id="bulkForm">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-light">
|
||||
{% 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': 'Actions', 'width': '140px', 'align': 'end' },
|
||||
] %}
|
||||
{% call(answer_table(headers, form_action='/reports/phone-book', select_name='client_ids', enable_bulk=enable_bulk)) %}
|
||||
{% if clients and clients|length > 0 %}
|
||||
{% for c in clients %}
|
||||
<tr>
|
||||
{% if enable_bulk %}
|
||||
<th style="width: 40px;"><input class="form-check-input" type="checkbox" id="selectAll"></th>
|
||||
<td><input class="form-check-input" type="checkbox" name="client_ids" value="{{ c.id }}"></td>
|
||||
{% endif %}
|
||||
<th style="width: 220px;">Name</th>
|
||||
<th>Company</th>
|
||||
<th>Address</th>
|
||||
<th>City</th>
|
||||
<th style="width: 80px;">State</th>
|
||||
<th style="width: 110px;">ZIP</th>
|
||||
<th style="width: 200px;">Phones</th>
|
||||
<th class="text-end" style="width: 140px;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if clients and clients|length > 0 %}
|
||||
{% for c in clients %}
|
||||
<tr>
|
||||
{% if enable_bulk %}
|
||||
<td>
|
||||
<input class="form-check-input" type="checkbox" name="client_ids" value="{{ c.id }}">
|
||||
</td>
|
||||
<td><span class="fw-semibold">{{ c.last_name or '' }}, {{ c.first_name or '' }}</span></td>
|
||||
<td>{{ c.company or '' }}</td>
|
||||
<td>{{ c.address or '' }}</td>
|
||||
<td>{{ c.city or '' }}</td>
|
||||
<td>{{ c.state or '' }}</td>
|
||||
<td>{{ c.zip_code or '' }}</td>
|
||||
<td>
|
||||
{% if c.phones and c.phones|length > 0 %}
|
||||
{% for p in c.phones[:3] %}
|
||||
<span class="badge bg-light text-dark me-1">{{ p.phone_number }}</span>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<span class="text-muted">—</span>
|
||||
{% endif %}
|
||||
<td>
|
||||
<span class="fw-semibold">{{ c.last_name or '' }}, {{ c.first_name or '' }}</span>
|
||||
</td>
|
||||
<td>{{ c.company or '' }}</td>
|
||||
<td>{{ c.address or '' }}</td>
|
||||
<td>{{ c.city or '' }}</td>
|
||||
<td>{{ c.state or '' }}</td>
|
||||
<td>{{ c.zip_code or '' }}</td>
|
||||
<td>
|
||||
{% if c.phones and c.phones|length > 0 %}
|
||||
{% for p in c.phones[:3] %}
|
||||
<span class="badge bg-light text-dark me-1">{{ p.phone_number }}</span>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<span class="text-muted">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<a class="btn btn-sm btn-outline-primary" href="/rolodex/{{ c.id }}">
|
||||
<i class="bi bi-person-lines-fill me-1"></i>View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="text-center text-muted py-4">No clients found.</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<a class="btn btn-sm btn-outline-primary" href="/rolodex/{{ c.id }}">
|
||||
<i class="bi bi-person-lines-fill me-1"></i>View
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="text-center text-muted py-4">No clients found.</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endcall %}
|
||||
|
||||
{% if enable_bulk %}
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-journal-text me-1"></i>Phone Book (Selected)
|
||||
</button>
|
||||
<a class="btn btn-outline-secondary" href="/reports/phone-book?format=csv{% if q %}&q={{ q | urlencode }}{% endif %}">
|
||||
<i class="bi bi-filetype-csv me-1"></i>Phone Book CSV (Current Filter)
|
||||
</a>
|
||||
</div>
|
||||
{% call(bulk_actions_bar()) %}
|
||||
<button type="submit" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-journal-text me-1"></i>Phone Book (Selected)
|
||||
</button>
|
||||
<a class="btn btn-outline-secondary" href="/reports/phone-book?format=csv{% if q %}&q={{ q | urlencode }}{% endif %}">
|
||||
<i class="bi bi-filetype-csv me-1"></i>Phone Book CSV (Current Filter)
|
||||
</a>
|
||||
{% endcall %}
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% if total_pages and total_pages > 1 %}
|
||||
<nav aria-label="Rolodex pagination">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item {% if page <= 1 %}disabled{% endif %}">
|
||||
<a class="page-link" href="/rolodex?page={{ page - 1 if page > 1 else 1 }}&page_size={{ page_size }}{% if q %}&q={{ q | urlencode }}{% endif %}{% if phone %}&phone={{ phone | urlencode }}{% endif %}" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</a>
|
||||
</li>
|
||||
{% for p in page_numbers %}
|
||||
<li class="page-item {% if p == page %}active{% endif %}">
|
||||
<a class="page-link" href="/rolodex?page={{ p }}&page_size={{ page_size }}{% if q %}&q={{ q | urlencode }}{% endif %}{% if phone %}&phone={{ phone | urlencode }}{% endif %}">{{ p }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
<li class="page-item {% if page >= total_pages %}disabled{% endif %}">
|
||||
<a class="page-link" href="/rolodex?page={{ page + 1 if page < total_pages else total_pages }}&page_size={{ page_size }}{% if q %}&q={{ q | urlencode }}{% endif %}{% if phone %}&phone={{ phone | urlencode }}{% endif %}" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{{ pagination('/rolodex', page, total_pages, page_size, {'q': q, 'phone': phone}) }}
|
||||
</div>
|
||||
</div>
|
||||
{% block extra_scripts %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const selectAll = document.getElementById('selectAll');
|
||||
if (selectAll) {
|
||||
selectAll.addEventListener('change', function() {
|
||||
document.querySelectorAll('input[name="client_ids"]').forEach(cb => cb.checked = selectAll.checked);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user