Aug 7 - Update issue page filter bar
This commit is contained in:
@@ -32,95 +32,120 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{# ── Filters ──────────────────────────────────────────────────────────── #}
|
{# ── Filters ──────────────────────────────────────────────────────────── #}
|
||||||
|
{# Same layout as the modern inspections list: fields fill two rows on the left,
|
||||||
|
actions in a block on the right spanning both — Filter full-height, Clear
|
||||||
|
above Export PDF. Contract and Facility stay adjacent because they cascade
|
||||||
|
(rule 61). Below md the action block wraps underneath, full width. #}
|
||||||
<div class="jqc-filter-bar">
|
<div class="jqc-filter-bar">
|
||||||
<form method="get" class="row g-2 align-items-end">
|
<form method="get">
|
||||||
<div class="col-6 col-md-1">
|
<div class="d-flex flex-wrap gap-3 align-items-stretch">
|
||||||
<label class="form-label small mb-1">Issue #</label>
|
|
||||||
<input type="number" name="issue_id" class="form-control form-control-sm"
|
{# ── Fields ──────────────────────────────────────────────────────── #}
|
||||||
min="1" placeholder="ID" value="{{ issue_id_filter }}">
|
<div class="flex-grow-1" style="min-width:min(100%, 620px);">
|
||||||
</div>
|
<div class="row g-2 align-items-end">
|
||||||
<div class="col-6 col-md-2">
|
<div class="col-6 col-md-2">
|
||||||
<label class="form-label small mb-1">Severity</label>
|
<label class="form-label small mb-1">Issue #</label>
|
||||||
<select name="severity" class="form-select form-select-sm">
|
<input type="number" name="issue_id" class="form-control form-control-sm"
|
||||||
<option value="">All</option>
|
min="1" placeholder="ID" value="{{ issue_id_filter }}">
|
||||||
{% for s in ['critical','high','medium','low'] %}
|
</div>
|
||||||
<option value="{{ s }}" {{ 'selected' if severity_filter == s }}>{{ s|title }}</option>
|
<div class="col-6 col-md-2">
|
||||||
{% endfor %}
|
<label class="form-label small mb-1">Severity</label>
|
||||||
</select>
|
<select name="severity" class="form-select form-select-sm">
|
||||||
</div>
|
<option value="">All</option>
|
||||||
<div class="col-6 col-md-2">
|
{% for s in ['critical','high','medium','low'] %}
|
||||||
<label class="form-label small mb-1">Status</label>
|
<option value="{{ s }}" {{ 'selected' if severity_filter == s }}>{{ s|title }}</option>
|
||||||
<select name="status" class="form-select form-select-sm">
|
{% endfor %}
|
||||||
<option value="">All</option>
|
</select>
|
||||||
{% for s in ['open','in_progress','pending_verification','resolved'] %}
|
</div>
|
||||||
<option value="{{ s }}" {{ 'selected' if status_filter == s }}>{{ s|replace('_',' ')|title }}</option>
|
<div class="col-6 col-md-2">
|
||||||
{% endfor %}
|
<label class="form-label small mb-1">Status</label>
|
||||||
</select>
|
<select name="status" class="form-select form-select-sm">
|
||||||
</div>
|
<option value="">All</option>
|
||||||
<div class="col-6 col-md-2">
|
{% for s in ['open','in_progress','pending_verification','resolved'] %}
|
||||||
<label class="form-label small mb-1">SLA</label>
|
<option value="{{ s }}" {{ 'selected' if status_filter == s }}>{{ s|replace('_',' ')|title }}</option>
|
||||||
<select name="sla" class="form-select form-select-sm">
|
{% endfor %}
|
||||||
<option value="">All</option>
|
</select>
|
||||||
<option value="breached" {{ 'selected' if sla_filter == 'breached' }}>Breached</option>
|
</div>
|
||||||
<option value="at_risk" {{ 'selected' if sla_filter == 'at_risk' }}>At Risk</option>
|
<div class="col-12 col-md-3">
|
||||||
<option value="ok" {{ 'selected' if sla_filter == 'ok' }}>OK</option>
|
<label class="form-label small mb-1">Contract</label>
|
||||||
</select>
|
<select name="contract_id" id="filter_contract_id" class="form-select form-select-sm">
|
||||||
</div>
|
<option value="">All Contracts</option>
|
||||||
<div class="col-12 col-md-2">
|
{% for p in projects %}
|
||||||
<label class="form-label small mb-1">Contract</label>
|
<option value="{{ p.id }}" {{ 'selected' if contract_filter == p.id|string }}>{{ p.name }}</option>
|
||||||
<select name="contract_id" id="filter_contract_id" class="form-select form-select-sm">
|
{% endfor %}
|
||||||
<option value="">All Contracts</option>
|
</select>
|
||||||
{% for p in projects %}
|
</div>
|
||||||
<option value="{{ p.id }}" {{ 'selected' if contract_filter == p.id|string }}>{{ p.name }}</option>
|
<div class="col-12 col-md-3">
|
||||||
{% endfor %}
|
<label class="form-label small mb-1">Facility</label>
|
||||||
</select>
|
<select name="facility_id" id="filter_facility_id" class="form-select form-select-sm">
|
||||||
</div>
|
<option value="">All Facilities</option>
|
||||||
<div class="col-12 col-md-2">
|
{% for f in facilities %}
|
||||||
<label class="form-label small mb-1">Facility</label>
|
<option value="{{ f.id }}" {{ 'selected' if facility_filter == f.id|string }}>{{ f.name }}</option>
|
||||||
<select name="facility_id" id="filter_facility_id" class="form-select form-select-sm">
|
{% endfor %}
|
||||||
<option value="">All Facilities</option>
|
</select>
|
||||||
{% for f in facilities %}
|
</div>
|
||||||
<option value="{{ f.id }}" {{ 'selected' if facility_filter == f.id|string }}>{{ f.name }}</option>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</select>
|
<div class="row g-2 align-items-end mt-2">
|
||||||
</div>
|
<div class="col-6 col-md-2">
|
||||||
<div class="col-6 col-md-2">
|
<label class="form-label small mb-1">SLA</label>
|
||||||
<label class="form-label small mb-1">Reported From</label>
|
<select name="sla" class="form-select form-select-sm">
|
||||||
<input type="date" name="date_from" class="form-control form-control-sm"
|
<option value="">All</option>
|
||||||
value="{{ date_from_filter }}">
|
<option value="breached" {{ 'selected' if sla_filter == 'breached' }}>Breached</option>
|
||||||
</div>
|
<option value="at_risk" {{ 'selected' if sla_filter == 'at_risk' }}>At Risk</option>
|
||||||
<div class="col-6 col-md-2">
|
<option value="ok" {{ 'selected' if sla_filter == 'ok' }}>OK</option>
|
||||||
<label class="form-label small mb-1">Reported To</label>
|
</select>
|
||||||
<input type="date" name="date_to" class="form-control form-control-sm"
|
</div>
|
||||||
value="{{ date_to_filter }}">
|
<div class="col-6 col-md-3">
|
||||||
</div>
|
<label class="form-label small mb-1">Reported From</label>
|
||||||
<div class="col-12 col-md-2">
|
<input type="date" name="date_from" class="form-control form-control-sm"
|
||||||
<label class="form-label small mb-1">Reporter</label>
|
value="{{ date_from_filter }}">
|
||||||
<select name="reporter_id" class="form-select form-select-sm">
|
</div>
|
||||||
<option value="">All Reporters</option>
|
<div class="col-6 col-md-3">
|
||||||
{% for u in reporters %}
|
<label class="form-label small mb-1">Reported To</label>
|
||||||
<option value="{{ u.id }}" {{ 'selected' if reporter_filter == u.id|string }}>{{ u.display_name }}</option>
|
<input type="date" name="date_to" class="form-control form-control-sm"
|
||||||
{% endfor %}
|
value="{{ date_to_filter }}">
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="col-6 col-md-2">
|
||||||
<div class="col-12 col-md-2">
|
<label class="form-label small mb-1">Reporter</label>
|
||||||
<label class="form-label small mb-1">Handled By</label>
|
<select name="reporter_id" class="form-select form-select-sm">
|
||||||
<select name="handler_type" class="form-select form-select-sm">
|
<option value="">All Reporters</option>
|
||||||
<option value="">All Handlers</option>
|
{% for u in reporters %}
|
||||||
<option value="internal" {{ 'selected' if handler_filter == 'internal' }}>Janitorial Staff</option>
|
<option value="{{ u.id }}" {{ 'selected' if reporter_filter == u.id|string }}>{{ u.display_name }}</option>
|
||||||
<option value="facility" {{ 'selected' if handler_filter == 'facility' }}>Facility Staff</option>
|
{% endfor %}
|
||||||
<option value="vendor" {{ 'selected' if handler_filter == 'vendor' }}>External Vendor</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="col-12 col-md-2">
|
||||||
<div class="col-12 col-md-auto d-flex align-items-end gap-2 flex-wrap">
|
<label class="form-label small mb-1">Handled By</label>
|
||||||
<button type="submit" class="btn btn-sm btn-primary px-3">
|
<select name="handler_type" class="form-select form-select-sm">
|
||||||
<i class="bi bi-funnel"></i> Filter
|
<option value="">All Handlers</option>
|
||||||
</button>
|
<option value="internal" {{ 'selected' if handler_filter == 'internal' }}>Janitorial Staff</option>
|
||||||
<a href="{{ url_for('issues.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
|
<option value="facility" {{ 'selected' if handler_filter == 'facility' }}>Facility Staff</option>
|
||||||
<a href="{{ url_for('issues.export_list_pdf', **request.args) }}"
|
<option value="vendor" {{ 'selected' if handler_filter == 'vendor' }}>External Vendor</option>
|
||||||
class="btn btn-sm btn-outline-danger">
|
</select>
|
||||||
<i class="bi bi-file-earmark-pdf"></i> Export PDF
|
</div>
|
||||||
</a>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# ── Actions — spans both field rows ─────────────────────────────── #}
|
||||||
|
<div class="d-flex gap-2 align-items-stretch flex-grow-1 flex-md-grow-0">
|
||||||
|
<button type="submit"
|
||||||
|
class="btn btn-primary d-flex align-items-center justify-content-center flex-grow-1 flex-md-grow-0"
|
||||||
|
style="min-width:112px;">
|
||||||
|
<span><i class="bi bi-funnel"></i> Filter</span>
|
||||||
|
</button>
|
||||||
|
<div class="d-flex flex-column gap-2 flex-grow-1 flex-md-grow-0">
|
||||||
|
<a href="{{ url_for('issues.index') }}"
|
||||||
|
class="btn btn-sm btn-outline-secondary d-flex align-items-center justify-content-center flex-grow-1"
|
||||||
|
style="min-width:124px;">Clear</a>
|
||||||
|
<a href="{{ url_for('issues.export_list_pdf', **request.args) }}"
|
||||||
|
class="btn btn-sm btn-outline-danger d-flex align-items-center justify-content-center flex-grow-1 text-nowrap"
|
||||||
|
style="min-width:124px;">
|
||||||
|
<span><i class="bi bi-file-earmark-pdf"></i> Export PDF</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user