From 8dbc39a317e764506d66d29e7facda77906ecf63 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Mon, 3 Nov 2025 10:34:07 +0000
Subject: [PATCH] Refactor filter bar implementation for consistency and
 improved usability across case and question views

---
 atlas/templates/atlas/case_view.html          |  14 +-
 .../generic/partials/filter_bar.html          | 165 ++++++++++++++++++
 templates/question_table_view.html            | 165 +-----------------
 3 files changed, 168 insertions(+), 176 deletions(-)
 create mode 100644 generic/templates/generic/partials/filter_bar.html

diff --git a/atlas/templates/atlas/case_view.html b/atlas/templates/atlas/case_view.html
index 0666e2c0..73faf58b 100755
--- a/atlas/templates/atlas/case_view.html
+++ b/atlas/templates/atlas/case_view.html
@@ -10,18 +10,7 @@
         <h2>Cases</h2>
         Quick filters:<br/>
         Show <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>my cases only</a>, <a href='{% url "atlas:case_view" %}'>all cases</a>
-        <details>
-            <summary>
-                <h4>Filter</h4>
-            </summary>
-            <div id="view-filter-options">
-                <form action="" method="get">
-                    {{ filter.form }}
-                    <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
-                </form>
-            </div>
-            View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
-        </details>
+        View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
         <form>
             <details id="actions-detail" class="mt-3">
                 <summary>
@@ -81,6 +70,7 @@
         </form>
 
         {% include "generic/partials/page_size_form.html" %}
+        {% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
 
         <div id="exam-options"></div>
 {% endblock %}
diff --git a/generic/templates/generic/partials/filter_bar.html b/generic/templates/generic/partials/filter_bar.html
new file mode 100644
index 00000000..ae66af45
--- /dev/null
+++ b/generic/templates/generic/partials/filter_bar.html
@@ -0,0 +1,165 @@
+
+    <div id="bottom-filter-minibar" class="bottom-filter-minibar">
+        <div class="position-relative">
+            <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="#bottom-filter-body">
+                <i class="bi bi-funnel-fill"></i>&nbsp;Filters
+            </button>
+                                                {# show active filters count if available via GET params #}
+                                                {% comment %} Compute active filters count (excluding 'page') using supported template tags {% endcomment %}
+            {% with request.GET|length as param_count %}
+                {% if param_count > 0 %}
+                    {% if request.GET.page %}
+                        {% with param_count|add:"-1" as active_count %}
+                                                                {# active_count may be a string; only show badge when not zero #}
+                            {% if active_count != "0" %}
+                                <span class="badge bg-primary filter-count-badge">{{ active_count }}</span>
+                            {% endif %}
+                        {% endwith %}
+                    {% else %}
+                        <span class="badge bg-primary filter-count-badge">{{ param_count }}</span>
+                    {% endif %}
+                {% endif %}
+            {% endwith %}
+        </div>
+    </div>
+
+    <button class="btn btn-primary filter-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="false" aria-controls="#bottom-filter-body">Filters</button>
+
+    <div class="floating-filter shadow-lg">
+        <div id="bottom-filter-body" class="collapse">
+            <div class="container-fluid">
+                <div class="d-flex justify-content-between align-items-start">
+                    <div class="fw-bold">Filters</div>
+                    <div>
+                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="true">Close</button>
+                    </div>
+                </div>
+
+                                                    <!-- filter body collapsible so minibar stays visible -->
+                <div class="filter-body mt-2">
+                    <form action="" method="get">
+                        <div class="row g-3">
+                            {% for field in filter.form.visible_fields %}
+                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
+                                    <div class="filter-card">
+                                        <div class="form-group mb-1">
+                                            {{ field.label_tag }}
+                                        </div>
+                                        <div class="form-group mb-1">
+                                            {{ field }}
+                                        </div>
+                                        {% if field.errors %}
+                                            <div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>
+                                        {% endif %}
+                                        {% if field.help_text %}
+                                            <div class="filter-help">{{ field.help_text }}</div>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        </div>
+                        <div class="mt-3 d-flex gap-2 filter-actions">
+                            <button class="btn btn-primary btn-sm" type="submit"><i class="bi bi-search"></i>&nbsp;Apply</button>
+                            <a class="btn btn-outline-secondary btn-sm" href="?"><i class="bi bi-arrow-counterclockwise"></i>&nbsp;Reset</a>
+                            <button class="btn btn-light btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body">Close</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+                                                <!-- Floating filter bar (fixed at bottom) -->
+    <style>
+        .floating-filter {
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1030;
+            background: var(--bs-body-bg);
+            border-top: 1px solid rgba(0,0,0,0.08);
+            padding: 0.5rem 0.75rem 1rem 0.75rem;
+        }
+        .floating-filter .filter-body {
+            max-height: 50vh;
+            overflow-y: auto;
+            padding-top: .5rem;
+        }
+        .floating-filter .filter-toggle {
+            position: fixed;
+            right: 1rem;
+            bottom: 1rem;
+            z-index: 1040;
+        }
+                                            /* minibar/tab styling - small visible handle so panel isn't fully hidden */
+        .bottom-filter-minibar {
+            position: fixed;
+            right: 1rem;
+            bottom: 1rem;
+            z-index: 1045;
+            background: transparent;
+        }
+        .bottom-filter-minibar .btn { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
+
+                                            /* pretty filter cards */
+        .filter-card {
+            background: var(--bs-white);
+            border: 1px solid rgba(0,0,0,0.04);
+            border-radius: .5rem;
+            padding: .5rem;
+            height: 100%;
+        }
+        .filter-card .form-group { margin-bottom: 0; }
+        .filter-card label { font-weight: 600; font-size: .9rem; }
+        .filter-help { font-size: .8rem; color: #6c757d; }
+        .filter-actions { padding-top: .5rem; }
+
+                                            /* active filter count badge on minibar */
+        .filter-count-badge {
+            position: absolute;
+            top: -6px;
+            right: -6px;
+        }
+
+                                            /* Dark mode overrides */
+        .floating-filter {
+            background: #0f1720; /* near-black */
+            color: #e6eef6;
+            border-top-color: rgba(255,255,255,0.06);
+        }
+        .bottom-filter-minibar .btn {
+            background: rgba(255,255,255,0.02);
+            color: #e6eef6;
+            border-color: rgba(255,255,255,0.06);
+        }
+        .filter-card {
+            background: #0b1220;
+            border-color: rgba(255,255,255,0.04);
+            color: #e6eef6;
+        }
+                                                /* target common form-control/form-select/select/textarea so native selects and bootstrap styles
+                                                   are overridden for dark theme inside filter cards */
+        .filter-card .form-control,
+        .filter-card .form-select,
+        .filter-card input,
+        .filter-card select,
+        .filter-card textarea {
+            background: #07101a !important;
+            color: #f1f5f9 !important;
+            border-color: rgba(255,255,255,0.06) !important;
+        }
+                                                /* options in native multi-selects */
+        .filter-card select option,
+        .filter-card .form-select option {
+            background: #07101a !important;
+            color: #f1f5f9 !important;
+        }
+                                                /* placeholder color */
+        .filter-card .form-control::placeholder { color: rgba(255,255,255,0.5) !important; }
+        .filter-help { color: #9fb0c7; }
+        .badge.bg-primary.filter-count-badge { background: #0d6efd; color: #fff; }
+        .btn-outline-secondary { color: #e6eef6; border-color: rgba(255,255,255,0.06); }
+        .btn-light { background: #111827; color: #e6eef6; border-color: rgba(255,255,255,0.04); }
+        .filter-card label { color: #e6eef6; }
+    </style>
\ No newline at end of file
diff --git a/templates/question_table_view.html b/templates/question_table_view.html
index b93c85cd..e6f9dd36 100644
--- a/templates/question_table_view.html
+++ b/templates/question_table_view.html
@@ -37,172 +37,9 @@
     </div>
 
 
+{% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
 
                                                 <!-- Minibar: small visible strip when panel is collapsed -->
-    <div id="bottom-filter-minibar" class="bottom-filter-minibar">
-        <div class="position-relative">
-            <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="#bottom-filter-body">
-                <i class="bi bi-funnel-fill"></i>&nbsp;Filters
-            </button>
-                                                {# show active filters count if available via GET params #}
-                                                {% comment %} Compute active filters count (excluding 'page') using supported template tags {% endcomment %}
-            {% with request.GET|length as param_count %}
-                {% if param_count > 0 %}
-                    {% if request.GET.page %}
-                        {% with param_count|add:"-1" as active_count %}
-                                                                {# active_count may be a string; only show badge when not zero #}
-                            {% if active_count != "0" %}
-                                <span class="badge bg-primary filter-count-badge">{{ active_count }}</span>
-                            {% endif %}
-                        {% endwith %}
-                    {% else %}
-                        <span class="badge bg-primary filter-count-badge">{{ param_count }}</span>
-                    {% endif %}
-                {% endif %}
-            {% endwith %}
-        </div>
-    </div>
-
-    <button class="btn btn-primary filter-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="false" aria-controls="#bottom-filter-body">Filters</button>
-
-    <div class="floating-filter shadow-lg">
-        <div id="bottom-filter-body" class="collapse">
-            <div class="container-fluid">
-                <div class="d-flex justify-content-between align-items-start">
-                    <div class="fw-bold">Filters</div>
-                    <div>
-                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="true">Close</button>
-                    </div>
-                </div>
-
-                                                    <!-- filter body collapsible so minibar stays visible -->
-                <div class="filter-body mt-2">
-                    <form action="" method="get">
-                        <div class="row g-3">
-                            {% for field in filter.form.visible_fields %}
-                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
-                                    <div class="filter-card">
-                                        <div class="form-group mb-1">
-                                            {{ field.label_tag }}
-                                        </div>
-                                        <div class="form-group mb-1">
-                                            {{ field }}
-                                        </div>
-                                        {% if field.errors %}
-                                            <div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>
-                                        {% endif %}
-                                        {% if field.help_text %}
-                                            <div class="filter-help">{{ field.help_text }}</div>
-                                        {% endif %}
-                                    </div>
-                                </div>
-                            {% endfor %}
-                        </div>
-                        <div class="mt-3 d-flex gap-2 filter-actions">
-                            <button class="btn btn-primary btn-sm" type="submit"><i class="bi bi-search"></i>&nbsp;Apply</button>
-                            <a class="btn btn-outline-secondary btn-sm" href="?"><i class="bi bi-arrow-counterclockwise"></i>&nbsp;Reset</a>
-                            <button class="btn btn-light btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body">Close</button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-
-                                                <!-- Floating filter bar (fixed at bottom) -->
-    <style>
-        .floating-filter {
-            position: fixed;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 1030;
-            background: var(--bs-body-bg);
-            border-top: 1px solid rgba(0,0,0,0.08);
-            padding: 0.5rem 0.75rem 1rem 0.75rem;
-        }
-        .floating-filter .filter-body {
-            max-height: 50vh;
-            overflow-y: auto;
-            padding-top: .5rem;
-        }
-        .floating-filter .filter-toggle {
-            position: fixed;
-            right: 1rem;
-            bottom: 1rem;
-            z-index: 1040;
-        }
-                                            /* minibar/tab styling - small visible handle so panel isn't fully hidden */
-        .bottom-filter-minibar {
-            position: fixed;
-            right: 1rem;
-            bottom: 1rem;
-            z-index: 1045;
-            background: transparent;
-        }
-        .bottom-filter-minibar .btn { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
-
-                                            /* pretty filter cards */
-        .filter-card {
-            background: var(--bs-white);
-            border: 1px solid rgba(0,0,0,0.04);
-            border-radius: .5rem;
-            padding: .5rem;
-            height: 100%;
-        }
-        .filter-card .form-group { margin-bottom: 0; }
-        .filter-card label { font-weight: 600; font-size: .9rem; }
-        .filter-help { font-size: .8rem; color: #6c757d; }
-        .filter-actions { padding-top: .5rem; }
-
-                                            /* active filter count badge on minibar */
-        .filter-count-badge {
-            position: absolute;
-            top: -6px;
-            right: -6px;
-        }
-
-                                            /* Dark mode overrides */
-        .floating-filter {
-            background: #0f1720; /* near-black */
-            color: #e6eef6;
-            border-top-color: rgba(255,255,255,0.06);
-        }
-        .bottom-filter-minibar .btn {
-            background: rgba(255,255,255,0.02);
-            color: #e6eef6;
-            border-color: rgba(255,255,255,0.06);
-        }
-        .filter-card {
-            background: #0b1220;
-            border-color: rgba(255,255,255,0.04);
-            color: #e6eef6;
-        }
-                                                /* target common form-control/form-select/select/textarea so native selects and bootstrap styles
-                                                   are overridden for dark theme inside filter cards */
-        .filter-card .form-control,
-        .filter-card .form-select,
-        .filter-card input,
-        .filter-card select,
-        .filter-card textarea {
-            background: #07101a !important;
-            color: #f1f5f9 !important;
-            border-color: rgba(255,255,255,0.06) !important;
-        }
-                                                /* options in native multi-selects */
-        .filter-card select option,
-        .filter-card .form-select option {
-            background: #07101a !important;
-            color: #f1f5f9 !important;
-        }
-                                                /* placeholder color */
-        .filter-card .form-control::placeholder { color: rgba(255,255,255,0.5) !important; }
-        .filter-help { color: #9fb0c7; }
-        .badge.bg-primary.filter-count-badge { background: #0d6efd; color: #fff; }
-        .btn-outline-secondary { color: #e6eef6; border-color: rgba(255,255,255,0.06); }
-        .btn-light { background: #111827; color: #e6eef6; border-color: rgba(255,255,255,0.04); }
-        .filter-card label { color: #e6eef6; }
-    </style>
 {% endblock %}
 
 {% block js %}