Refactor CID user list rendering: consolidate user list into a single template and enhance toggle feedback with count updates

This commit is contained in:
Ross
2025-12-15 11:54:21 +00:00
parent 83a009e31b
commit 158db133b3
3 changed files with 44 additions and 29 deletions
+13 -9
View File
@@ -33,14 +33,7 @@
</div> </div>
</div> </div>
<ul class="list-group list-group-flush" id="cid-users-list"> {% include 'generic/partials/cid_user_list.html' with exam=exam current_cid_users=current_cid_users available_cid_users=available_cid_users %}
{% for cid in current_cid_users %}
{% include 'generic/partials/cid_user_li.html' with cid=cid current=True exam=exam %}
{% endfor %}
{% for cid in available_cid_users %}
{% include 'generic/partials/cid_user_li.html' with cid=cid current=False exam=exam %}
{% endfor %}
</ul>
</div> </div>
</div> </div>
@@ -159,7 +152,7 @@
}); });
}); });
// HTMX: listen for server HX-Trigger to show toasts for toggles // HTMX: listen for server HX-Trigger to show toasts for toggles and update counts
document.body.addEventListener('cid_toggled', function(evt){ document.body.addEventListener('cid_toggled', function(evt){
try { try {
const detail = evt.detail || {}; const detail = evt.detail || {};
@@ -168,6 +161,17 @@
if (added) toastr.info(`User added to exam`); if (added) toastr.info(`User added to exam`);
else toastr.info(`User removed from exam`); else toastr.info(`User removed from exam`);
} }
// Update counts for single-item toggles (bulk swaps replace the whole wrapper)
const addedEl = document.getElementById('cid-count-added');
const availEl = document.getElementById('cid-count-available');
if (addedEl && availEl){
let addedCount = parseInt(addedEl.textContent || '0') || 0;
let availCount = parseInt(availEl.textContent || '0') || 0;
if (added){ addedCount += 1; availCount = Math.max(0, availCount - 1); }
else { addedCount = Math.max(0, addedCount - 1); availCount += 1; }
addedEl.textContent = String(addedCount);
availEl.textContent = String(availCount);
}
} catch(e) { /* ignore */ } } catch(e) { /* ignore */ }
}); });
@@ -6,17 +6,22 @@
</div> </div>
<div class="small text-muted">{{cid.name}} &middot; {{cid.email}}</div> <div class="small text-muted">{{cid.name}} &middot; {{cid.email}}</div>
</div> </div>
<div class="btn-group ms-2"> <div class="d-flex align-items-center ms-2">
<a href="{% url 'generic:update_cid' cid.pk %}" class="btn btn-sm btn-outline-light">Edit</a> {% if cid.group and cid.group in exam.cid_user_groups.all %}
<form method="post" class="d-inline m-0 p-0" <div class="small text-muted me-2"><span class="badge bg-info text-dark">{{ cid.group.name }}</span></div>
action="{% url exam.app_name|add:':exam_json_edit' exam.pk %}" {% endif %}
hx-post="{% url exam.app_name|add:':exam_json_edit' exam.pk %}" <div class="btn-group">
hx-target="closest li" <a href="{% url 'generic:update_cid' cid.pk %}" class="btn btn-sm btn-outline-light">Edit</a>
hx-swap="outerHTML"> <form method="post" class="d-inline m-0 p-0"
{% csrf_token %} action="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
<input type="hidden" name="edit_cid_user" value="{{cid.pk}}"> hx-post="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
<input type="hidden" name="add" value="{% if current %}false{% else %}true{% endif %}"> hx-target="closest li"
<button type="submit" class="btn btn-sm btn-outline-light toggle-btn">Toggle</button> hx-swap="outerHTML">
</form> {% csrf_token %}
<input type="hidden" name="edit_cid_user" value="{{cid.pk}}">
<input type="hidden" name="add" value="{% if current %}false{% else %}true{% endif %}">
<button type="submit" class="btn btn-sm btn-outline-light toggle-btn">Toggle</button>
</form>
</div>
</div> </div>
</li> </li>
@@ -1,8 +1,14 @@
<ul class="list-group list-group-flush" id="cid-users-list"> <div id="cid-users-wrap">
{% for cid in current_cid_users %} <div class="d-flex justify-content-between align-items-center mb-2 small text-muted">
{% include 'generic/partials/cid_user_li.html' with cid=cid current=True exam=exam %} <div>Added: <span id="cid-count-added">{{ current_cid_users|length }}</span></div>
{% endfor %} <div>Available: <span id="cid-count-available">{{ available_cid_users|length }}</span></div>
{% for cid in available_cid_users %} </div>
{% include 'generic/partials/cid_user_li.html' with cid=cid current=False exam=exam %} <ul class="list-group list-group-flush" id="cid-users-list">
{% endfor %} {% for cid in current_cid_users %}
</ul> {% include 'generic/partials/cid_user_li.html' with cid=cid current=True exam=exam %}
{% endfor %}
{% for cid in available_cid_users %}
{% include 'generic/partials/cid_user_li.html' with cid=cid current=False exam=exam %}
{% endfor %}
</ul>
</div>