This commit is contained in:
Ross
2025-12-15 21:54:55 +00:00
parent 6674306306
commit cf966573de
@@ -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>