Add filtering functionality for CID and User candidates in exam view

This commit is contained in:
Ross
2025-12-22 11:23:59 +00:00
parent 46313cf5bb
commit ff6b8a8a48
+37 -7
View File
@@ -15,6 +15,9 @@
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">CID candidates <small class="text-muted">({{ cid_user_count }})</small></h5>
<div class="mb-2">
<input id="cid-filter" class="form-control form-control-sm" placeholder="Filter CID candidates by CID, name, email or passcode">
</div>
<div id="htmx-info"></div>
{% if cid_users %}
<ul class="list-group list-group-flush">
@@ -37,13 +40,6 @@
<div class="small text-muted mt-1">{{ cid.name }}</div>
<div class="small">Email: {{ cid.email }}</div>
</div>
<div class="text-end small">
{% if cid.login_email_sent %}
<span class="badge bg-success">Email sent</span>
{% else %}
<span class="badge bg-secondary">Not sent</span>
{% endif %}
</div>
</div>
</li>
{% endfor %}
@@ -59,6 +55,9 @@
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">User candidates <small class="text-muted">({{ user_user_count }})</small></h5>
<div class="mb-2">
<input id="user-filter" class="form-control form-control-sm" placeholder="Filter User candidates by username or email">
</div>
{% if user_users %}
<ul class="list-group list-group-flush">
{% for user in user_users %}
@@ -148,6 +147,37 @@
}
}catch(e){ console.error(e); }
});
// Filtering helpers
function normalizeText(s){ return (s||'').toString().toLowerCase(); }
function filterList(inputElem, listSelector){
const q = normalizeText(inputElem.value.trim());
document.querySelectorAll(listSelector).forEach(function(li){
const text = normalizeText(li.textContent);
if(!q || text.indexOf(q) !== -1){
li.style.display = '';
} else {
li.style.display = 'none';
}
});
}
const cidFilter = document.getElementById('cid-filter');
if(cidFilter){
cidFilter.addEventListener('input', function(){
// target CID list items only (left column)
filterList(cidFilter, '.col-lg-6:first-of-type .list-group-item');
});
}
const userFilter = document.getElementById('user-filter');
if(userFilter){
userFilter.addEventListener('input', function(){
// target user list items only (right column)
filterList(userFilter, '.col-lg-6:nth-of-type(2) .list-group-item, .col-lg-6:nth-of-type(2) .list-group-item.d-flex');
});
}
});
</script>
{% endblock %}