From cf966573de610fd74cbe309d439ee738eb930d01 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Mon, 15 Dec 2025 21:54:55 +0000
Subject: [PATCH] .

---
 .../templates/rota/rota_detail.html           | 40 ++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/djangorota/djangorota/templates/rota/rota_detail.html b/djangorota/djangorota/templates/rota/rota_detail.html
index c63f1a7..beed00a 100644
--- a/djangorota/djangorota/templates/rota/rota_detail.html
+++ b/djangorota/djangorota/templates/rota/rota_detail.html
@@ -45,10 +45,16 @@
           <p class="help">Configure typed rota constraint options. Click Edit to open the form showing typed fields and descriptions.</p>
           <p><button class="button is-link" hx-get="{% url 'rota:rota_options' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Edit constraint options</button></p>
           <hr />
-          <h3 class="subtitle is-6">Configured constraint values</h3>
-          <div style="max-height:200px; overflow:auto; margin-bottom:0.75em;">
-            {% if configured_constraints %}
-              <table class="table is-fullwidth is-striped is-narrow">
+          <details class="constraints-details" style="margin-top:0.5rem;">
+            <summary class="subtitle is-6" style="cursor:pointer; outline:none;">Configured constraint values{% if configured_constraints %} ({{ configured_constraints|length }}){% endif %}</summary>
+            <div style="margin-top:0.5rem;">
+              <div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem;">
+                <input id="constraint-filter-{{ rota.id }}" class="input is-small" type="search" placeholder="Filter constraints (key or value)..." aria-label="Filter constraints" />
+                <button id="constraint-clear-{{ rota.id }}" class="button is-small is-light" type="button">Clear</button>
+              </div>
+              <div class="constraints-scroll" style="max-height:600px; overflow:auto; margin-bottom:0.75em;">
+              {% if configured_constraints %}
+              <table class="table is-fullwidth is-striped is-narrow" id="constraint-table-{{ rota.id }}">
                 <thead><tr><th>Key</th><th>Value</th><th></th></tr></thead>
                 <tbody>
                   {% for key, info in configured_constraints.items %}
@@ -71,7 +77,31 @@
             {% else %}
               <p class="help">No typed constraint options have been configured for this rota.</p>
             {% endif %}
-          </div>
+              </div>
+            </div>
+            <script>
+              (function(){
+                const input = document.getElementById('constraint-filter-{{ rota.id }}');
+                const clearBtn = document.getElementById('constraint-clear-{{ rota.id }}');
+                const table = document.getElementById('constraint-table-{{ rota.id }}');
+                if(!input || !table) return;
+                const rows = Array.from(table.tBodies[0].rows);
+                function normalize(s){ return (s||'').toString().toLowerCase(); }
+                function applyFilter(){
+                  const q = normalize(input.value.trim());
+                  if(!q){ rows.forEach(r => r.style.display=''); return; }
+                  rows.forEach(r => {
+                    const key = normalize(r.cells[0].innerText);
+                    const val = normalize(r.cells[1].innerText);
+                    r.style.display = (key.indexOf(q) !== -1 || val.indexOf(q) !== -1) ? '' : 'none';
+                  });
+                }
+                let debounce;
+                input.addEventListener('input', ()=>{ clearTimeout(debounce); debounce = setTimeout(applyFilter, 150); });
+                clearBtn.addEventListener('click', ()=>{ input.value=''; applyFilter(); input.focus(); });
+              })();
+            </script>
+          </details>
         </div>
       </div>