Dashboard UX: auto-submit filter on dropdown change, clickable status cards, clearer status labels

This commit is contained in:
2026-08-09 15:04:47 +10:00
parent 2945b1c0f6
commit 73f6f291f1
3 changed files with 36 additions and 10 deletions

View File

@@ -56,12 +56,16 @@
<a href="/review?status=approved">Approved</a>
</header>
<div class="filters">
<form method="get" action="/review" style="display:flex;gap:.5rem;" autocomplete="off">
<form method="get" action="/review" style="display:flex;gap:.5rem;" autocomplete="off" id="filter-form">
<button type="submit" style="display:none;">Filter</button>
<select name="status">
<option value="">all statuses</option>
{% for s in ["keep", "review", "delete_candidate", "scanned", "approved", "rejected"] %}
<option value="{{ s }}" {% if status == s %}selected{% endif %}>{{ s }}</option>
{% endfor %}
<option value="">all (every stage)</option>
<option value="delete_candidate" {% if status == "delete_candidate" %}selected{% endif %}>⚠ flagged (dark/blurry) — start here</option>
<option value="keep" {% if status == "keep" %}selected{% endif %}>keep (clean, machine verdict)</option>
<option value="approved" {% if status == "approved" %}selected{% endif %}>approved (your Keep)</option>
<option value="rejected" {% if status == "rejected" %}selected{% endif %}>rejected (your Reject)</option>
<option value="review" {% if status == "review" %}selected{% endif %}>review (reserved)</option>
<option value="scanned" {% if status == "scanned" %}selected{% endif %}>scanned (no verdict yet)</option>
</select>
<input type="text" name="source" value="{{ source or '' }}" placeholder="source (e.g. archive-pictures)">
<button type="submit">Filter</button>
@@ -190,6 +194,13 @@
setTimeout(() => { t.style.display = 'none'; }, 3000);
}
// auto-submit filter when dropdown/input changes (no need to press Filter)
document.getElementById('filter-form').addEventListener('change', e => {
if (e.target.name === 'status' || e.target.name === 'source') {
document.getElementById('filter-form').submit();
}
});
// stash original labels for busy-state restore
document.querySelectorAll('.bulk-bar button').forEach(b => { b.dataset.orig = b.textContent; });