Aug 7 - Update inspection page filter bar
This commit is contained in:
@@ -38,87 +38,110 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{# ── Filters ──────────────────────────────────────────────────────────── #}
|
{# ── Filters ──────────────────────────────────────────────────────────── #}
|
||||||
|
{# Layout: fields fill two rows on the left; the actions sit in a block on the
|
||||||
|
right that spans both rows — Filter full-height, Clear above Export PDF.
|
||||||
|
Below the md breakpoint the action block wraps underneath, full width. #}
|
||||||
<div class="jqc-filter-bar">
|
<div class="jqc-filter-bar">
|
||||||
<form method="get">
|
<form method="get">
|
||||||
<div class="row g-2 align-items-end">
|
<div class="d-flex flex-wrap gap-3 align-items-stretch">
|
||||||
<div class="col-6 col-md-1">
|
|
||||||
<label class="form-label small mb-1">Inspection #</label>
|
{# ── Fields ──────────────────────────────────────────────────────── #}
|
||||||
<input type="number" name="inspection_id" class="form-control form-control-sm"
|
<div class="flex-grow-1" style="min-width:min(100%, 620px);">
|
||||||
min="1" placeholder="ID" value="{{ inspection_id_filter }}">
|
<div class="row g-2 align-items-end">
|
||||||
|
<div class="col-6 col-md-2">
|
||||||
|
<label class="form-label small mb-1">Inspection #</label>
|
||||||
|
<input type="number" name="inspection_id" class="form-control form-control-sm"
|
||||||
|
min="1" placeholder="ID" value="{{ inspection_id_filter }}">
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-3">
|
||||||
|
<label class="form-label small mb-1">Status</label>
|
||||||
|
<select name="status" class="form-select form-select-sm">
|
||||||
|
<option value="">All Statuses</option>
|
||||||
|
{% for s in ['in_progress','completed','flagged'] %}
|
||||||
|
<option value="{{ s }}" {% if status_filter == s %}selected{% endif %}>{{ 'Submitted' if s == 'completed' else s|replace('_',' ')|title }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
<option value="follow_up" {% if status_filter == 'follow_up' %}selected{% endif %}>Flagged Follow-up</option>
|
||||||
|
<option value="has_issues" {% if status_filter == 'has_issues' %}selected{% endif %}>Has Logged Issues</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-3">
|
||||||
|
<label class="form-label small mb-1">Contract</label>
|
||||||
|
<select name="contract_id" id="insp_filter_contract" class="form-select form-select-sm">
|
||||||
|
<option value="">All Contracts</option>
|
||||||
|
{% for p in projects %}
|
||||||
|
<option value="{{ p.id }}" {% if contract_filter == p.id|string %}selected{% endif %}>{{ p.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-4">
|
||||||
|
<label class="form-label small mb-1">Facility</label>
|
||||||
|
<select name="facility_id" id="insp_filter_facility" class="form-select form-select-sm">
|
||||||
|
<option value="">All Facilities</option>
|
||||||
|
{% for f in facilities %}
|
||||||
|
<option value="{{ f.id }}" {% if facility_filter == f.id|string %}selected{% endif %}>{{ f.name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Second row. The score fields absorb the Inspector column's width when
|
||||||
|
the viewer is an inspector (they only ever see their own work, so the
|
||||||
|
dropdown is not rendered for them) — the row always totals 12. #}
|
||||||
|
<div class="row g-2 align-items-end mt-2">
|
||||||
|
{% if inspectors %}
|
||||||
|
<div class="col-12 col-md-4">
|
||||||
|
<label class="form-label small mb-1">Inspector</label>
|
||||||
|
<select name="inspector_id" class="form-select form-select-sm">
|
||||||
|
<option value="">All Inspectors</option>
|
||||||
|
{% for u in inspectors %}
|
||||||
|
<option value="{{ u.id }}" {% if inspector_filter == u.id|string %}selected{% endif %}>{{ u.display_name }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="col-6 col-md-{{ 3 if inspectors else 4 }}">
|
||||||
|
<label class="form-label small mb-1">Date From</label>
|
||||||
|
<input type="date" name="date_from" class="form-control form-control-sm"
|
||||||
|
value="{{ date_from_filter }}">
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-{{ 3 if inspectors else 4 }}">
|
||||||
|
<label class="form-label small mb-1">Date To</label>
|
||||||
|
<input type="date" name="date_to" class="form-control form-control-sm"
|
||||||
|
value="{{ date_to_filter }}">
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-{{ 1 if inspectors else 2 }}">
|
||||||
|
<label class="form-label small mb-1">Min Score</label>
|
||||||
|
<input type="number" name="score_min" class="form-control form-control-sm"
|
||||||
|
min="0" max="100" placeholder="0" value="{{ score_min_filter }}">
|
||||||
|
</div>
|
||||||
|
<div class="col-6 col-md-{{ 1 if inspectors else 2 }}">
|
||||||
|
<label class="form-label small mb-1">Max Score</label>
|
||||||
|
<input type="number" name="score_max" class="form-control form-control-sm"
|
||||||
|
min="0" max="100" placeholder="100" value="{{ score_max_filter }}">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 col-md-2">
|
|
||||||
<label class="form-label small mb-1">Status</label>
|
{# ── Actions — spans both field rows ─────────────────────────────── #}
|
||||||
<select name="status" class="form-select form-select-sm">
|
<div class="d-flex gap-2 align-items-stretch flex-grow-1 flex-md-grow-0">
|
||||||
<option value="">All Statuses</option>
|
<button type="submit"
|
||||||
{% for s in ['in_progress','completed','flagged'] %}
|
class="btn btn-primary d-flex align-items-center justify-content-center flex-grow-1 flex-md-grow-0"
|
||||||
<option value="{{ s }}" {% if status_filter == s %}selected{% endif %}>{{ 'Submitted' if s == 'completed' else s|replace('_',' ')|title }}</option>
|
style="min-width:112px;">
|
||||||
{% endfor %}
|
<span><i class="bi bi-funnel"></i> Filter</span>
|
||||||
<option value="follow_up" {% if status_filter == 'follow_up' %}selected{% endif %}>Flagged Follow-up</option>
|
|
||||||
<option value="has_issues" {% if status_filter == 'has_issues' %}selected{% endif %}>Has Logged Issues</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-3">
|
|
||||||
<label class="form-label small mb-1">Contract</label>
|
|
||||||
<select name="contract_id" id="insp_filter_contract" class="form-select form-select-sm">
|
|
||||||
<option value="">All Contracts</option>
|
|
||||||
{% for p in projects %}
|
|
||||||
<option value="{{ p.id }}" {% if contract_filter == p.id|string %}selected{% endif %}>{{ p.name }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-3">
|
|
||||||
<label class="form-label small mb-1">Facility</label>
|
|
||||||
<select name="facility_id" id="insp_filter_facility" class="form-select form-select-sm">
|
|
||||||
<option value="">All Facilities</option>
|
|
||||||
{% for f in facilities %}
|
|
||||||
<option value="{{ f.id }}" {% if facility_filter == f.id|string %}selected{% endif %}>{{ f.name }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{% if inspectors %}
|
|
||||||
<div class="col-12 col-md-2">
|
|
||||||
<label class="form-label small mb-1">Inspector</label>
|
|
||||||
<select name="inspector_id" class="form-select form-select-sm">
|
|
||||||
<option value="">All Inspectors</option>
|
|
||||||
{% for u in inspectors %}
|
|
||||||
<option value="{{ u.id }}" {% if inspector_filter == u.id|string %}selected{% endif %}>{{ u.display_name }}</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="row g-2 align-items-end mt-1">
|
|
||||||
<div class="col-6 col-md-2">
|
|
||||||
<label class="form-label small mb-1">Date From</label>
|
|
||||||
<input type="date" name="date_from" class="form-control form-control-sm"
|
|
||||||
value="{{ date_from_filter }}">
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md-2">
|
|
||||||
<label class="form-label small mb-1">Date To</label>
|
|
||||||
<input type="date" name="date_to" class="form-control form-control-sm"
|
|
||||||
value="{{ date_to_filter }}">
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md-1">
|
|
||||||
<label class="form-label small mb-1">Min Score</label>
|
|
||||||
<input type="number" name="score_min" class="form-control form-control-sm"
|
|
||||||
min="0" max="100" placeholder="0" value="{{ score_min_filter }}">
|
|
||||||
</div>
|
|
||||||
<div class="col-6 col-md-1">
|
|
||||||
<label class="form-label small mb-1">Max Score</label>
|
|
||||||
<input type="number" name="score_max" class="form-control form-control-sm"
|
|
||||||
min="0" max="100" placeholder="100" value="{{ score_max_filter }}">
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-auto d-flex align-items-end gap-2 flex-wrap">
|
|
||||||
<button type="submit" class="btn btn-sm btn-primary px-3">
|
|
||||||
<i class="bi bi-funnel"></i> Filter
|
|
||||||
</button>
|
</button>
|
||||||
<a href="{{ url_for('inspections.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
|
<div class="d-flex flex-column gap-2 flex-grow-1 flex-md-grow-0">
|
||||||
<a id="exportPdfBtn"
|
<a href="{{ url_for('inspections.index') }}"
|
||||||
href="{{ url_for('inspections.export_list_pdf', **request.args) }}"
|
class="btn btn-sm btn-outline-secondary d-flex align-items-center justify-content-center flex-grow-1"
|
||||||
class="btn btn-sm btn-outline-danger">
|
style="min-width:124px;">Clear</a>
|
||||||
<i class="bi bi-file-earmark-pdf"></i> Export PDF
|
<a id="exportPdfBtn"
|
||||||
</a>
|
href="{{ url_for('inspections.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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user