From 158db133b30fb0e501ebff9ab4740d1c0e6d4ee7 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 15 Dec 2025 11:54:21 +0000
Subject: [PATCH] Refactor CID user list rendering: consolidate user list into
 a single template and enhance toggle feedback with count updates

---
 generic/templates/generic/exam_cids_edit.html | 22 ++++++++------
 .../generic/partials/cid_user_li.html         | 29 +++++++++++--------
 .../generic/partials/cid_user_list.html       | 22 +++++++++-----
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/generic/templates/generic/exam_cids_edit.html b/generic/templates/generic/exam_cids_edit.html
index eaa33d8b..776fd184 100644
--- a/generic/templates/generic/exam_cids_edit.html
+++ b/generic/templates/generic/exam_cids_edit.html
@@ -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 */ }
         });
 
diff --git a/generic/templates/generic/partials/cid_user_li.html b/generic/templates/generic/partials/cid_user_li.html
index 48e201d5..9ed34e09 100644
--- a/generic/templates/generic/partials/cid_user_li.html
+++ b/generic/templates/generic/partials/cid_user_li.html
@@ -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>
diff --git a/generic/templates/generic/partials/cid_user_list.html b/generic/templates/generic/partials/cid_user_list.html
index 23b90962..0fe65130 100644
--- a/generic/templates/generic/partials/cid_user_list.html
+++ b/generic/templates/generic/partials/cid_user_list.html
@@ -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>