241 lines
11 KiB
HTML
241 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% 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">
|
|
<h2 class="mb-0">Rolodex</h2>
|
|
</div>
|
|
<div class="col ms-auto">
|
|
<form class="row g-2" method="get" action="/rolodex">
|
|
<div class="col-md">
|
|
<input class="form-control" type="search" name="q" placeholder="Search name or company" aria-label="Search" value="{{ q or '' }}">
|
|
</div>
|
|
<div class="col-md">
|
|
<input class="form-control" type="search" name="phone" placeholder="Phone contains" aria-label="Phone" value="{{ phone or '' }}">
|
|
</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>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a class="btn btn-outline-secondary" href="/rolodex">
|
|
<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
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-12 text-muted small">{{ results_summary(start_index, end_index, total) }}</div>
|
|
<div class="col-12">
|
|
<div class="table-responsive">
|
|
{% set headers = [
|
|
{ '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 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 %}>
|
|
{% 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 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 %}
|
|
<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 data-empty-state="true">
|
|
<td colspan="8" class="text-center text-muted py-4">
|
|
No clients found.
|
|
<div class="small mt-1">
|
|
If you've imported legacy data, go to <a href="/admin">Admin</a> and run <em>Sync to Modern Models</em> to populate Clients and Phones.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
|
|
{% if enable_bulk %}
|
|
<div class="d-flex gap-2 mb-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>
|
|
<a class="btn btn-outline-secondary js-submit-to" data-action="/reports/phone-book-address" href="#">
|
|
<i class="bi bi-journal-text me-1"></i>Phone+Address (Selected)
|
|
</a>
|
|
<a class="btn btn-outline-secondary js-submit-to" data-action="/reports/envelope" href="#">
|
|
<i class="bi bi-envelope me-1"></i>Envelope (Selected)
|
|
</a>
|
|
<a class="btn btn-outline-secondary js-submit-to" data-action="/reports/rolodex-info" href="#">
|
|
<i class="bi bi-card-text me-1"></i>Rolodex Info (Selected)
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
{{ pagination('/rolodex', page, total_pages, page_size, {'q': q, 'phone': phone, 'sort_key': sort_key, 'sort_dir': sort_dir}) }}
|
|
</div>
|
|
</div>
|
|
{% 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 %}
|
|
|
|
|