ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
generic/templates/generic/exam_cids_edit.html
+13 -9
View File
@@ -33,14 +33,7 @@
</div>
</div>
<ul class="list-group list-group-flush" id="cid-users-list">
{% 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>
{% include 'generic/partials/cid_user_list.html' with exam=exam current_cid_users=current_cid_users available_cid_users=available_cid_users %}
</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){
try {
const detail = evt.detail || {};
@@ -168,6 +161,17 @@
if (added) toastr.info(`User added to 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 */ }
});
generic/templates/generic/partials/cid_user_li.html
+17 -12
View File
@@ -6,17 +6,22 @@
</div>
<div class="small text-muted">{{cid.name}} &middot; {{cid.email}}</div>
</div>
<div class="btn-group ms-2">
<a href="{% url 'generic:update_cid' cid.pk %}" class="btn btn-sm btn-outline-light">Edit</a>
<form method="post" class="d-inline m-0 p-0"
action="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
hx-post="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
hx-target="closest li"
hx-swap="outerHTML">
{% 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 class="d-flex align-items-center ms-2">
{% if cid.group and cid.group in exam.cid_user_groups.all %}
<div class="small text-muted me-2"><span class="badge bg-info text-dark">{{ cid.group.name }}</span></div>
{% endif %}
<div class="btn-group">
<a href="{% url 'generic:update_cid' cid.pk %}" class="btn btn-sm btn-outline-light">Edit</a>
<form method="post" class="d-inline m-0 p-0"
action="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
hx-post="{% url exam.app_name|add:':exam_json_edit' exam.pk %}"
hx-target="closest li"
hx-swap="outerHTML">
{% 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>
</li>
generic/templates/generic/partials/cid_user_list.html
+14 -8
View File
@@ -1,8 +1,14 @@
<ul class="list-group list-group-flush" id="cid-users-list">
{% 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 id="cid-users-wrap">
<div class="d-flex justify-content-between align-items-center mb-2 small text-muted">
<div>Added: <span id="cid-count-added">{{ current_cid_users|length }}</span></div>
<div>Available: <span id="cid-count-available">{{ available_cid_users|length }}</span></div>
</div>
<ul class="list-group list-group-flush" id="cid-users-list">
{% 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>