From 668007b89955aad51b4e939e6525c62915208ec0 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 27 Oct 2025 14:32:03 +0000
Subject: [PATCH] Implement user search functionality with HTMX support for
 manual user selection in bulk updates

---
 .../generic/partials/user_search_results.html |  12 ++
 .../generic/trainees_bulk_update.html         | 184 ++++++++----------
 generic/views.py                              |  10 +-
 3 files changed, 101 insertions(+), 105 deletions(-)
 create mode 100644 generic/templates/generic/partials/user_search_results.html

diff --git a/generic/templates/generic/partials/user_search_results.html b/generic/templates/generic/partials/user_search_results.html
new file mode 100644
index 00000000..4ce73f20
--- /dev/null
+++ b/generic/templates/generic/partials/user_search_results.html
@@ -0,0 +1,12 @@
+{% if results %}
+  <ul style="list-style:none;padding:0;margin:0">
+    {% for item in results %}
+      <li style="margin:6px 0;">
+        <strong>{{ item.text|escape }}</strong>
+        <button type="button" onclick="setManualUser({{ row }}, {{ item.id }}, '{{ item.text|escapejs }}')" style="margin-left:8px;">Select</button>
+      </li>
+    {% endfor %}
+  </ul>
+{% else %}
+  <div><em>No users found</em></div>
+{% endif %}
diff --git a/generic/templates/generic/trainees_bulk_update.html b/generic/templates/generic/trainees_bulk_update.html
index 10b828ce..60d2bd8e 100644
--- a/generic/templates/generic/trainees_bulk_update.html
+++ b/generic/templates/generic/trainees_bulk_update.html
@@ -1,117 +1,93 @@
 {% extends 'generic/base.html' %}
 
 {% block content %}
-    <h2>Bulk update trainees (paste spreadsheet text)</h2>
+<h2>Bulk update trainees (paste spreadsheet text)</h2>
 
-    <p>Paste the spreadsheet rows below. Headings like "Year 1 - Group 1" are used to set the grade (Year N -> STN). Rows should contain "Name <tab or 2+spaces> Supervisor".</p>
+<p>Paste the spreadsheet rows below. Headings like "Year 1 - Group 1" are used to set the grade (Year N -> STN). Rows should contain "Name <tab or 2+spaces> Supervisor".</p>
 
-        <form method="post">
-            {% csrf_token %}
-            <textarea name="data" rows="18" style="width:100%">{% if request.POST.data %}{{ request.POST.data }}{% endif %}</textarea>
-            <div style="margin-top:8px">
-                <button type="submit" name="action" value="preview" class="btn btn-primary">Preview</button>
-                <button type="submit" name="action" value="apply" class="btn btn-danger" onclick="return confirm('This will apply updates to matched trainee profiles. Are you sure?')">Apply updates</button>
-            </div>
-        </form>
+<form method="post">
+    {% csrf_token %}
+    <textarea name="data" rows="18" style="width:100%">{% if request.POST.data %}{{ request.POST.data }}{% endif %}</textarea>
+    <div style="margin-top:8px">
+        <button type="submit" name="action" value="preview" class="btn btn-primary">Preview</button>
+        <button type="submit" name="action" value="apply" class="btn btn-danger" onclick="return confirm('This will apply updates to matched trainee profiles. Are you sure?')">Apply updates</button>
+    </div>
+</form>
 
-        {% if preview %}
-            <h3>Preview ({{ preview|length }} rows)</h3>
-            <table class="table table-sm">
-                <thead>
-                    <tr>
-                        <th>Raw</th>
-                        <th>Name</th>
-                        <th>Grade</th>
-                        <th>Matched user</th>
-                        <th>Supervisor text</th>
-                        <th>Matched supervisor</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for r in preview %}
-                        <tr>
-                            <td><pre style="margin:0">{{ r.raw }}</pre></td>
-                            <td>{{ r.norm_name }}</td>
-                            <td>{{ r.grade }}</td>
-                            <td>
-                                {% if r.matched_user %}
-                                    <a href="{% url 'account_profile' r.matched_user.username %}">{{ r.matched_user.first_name }} {{ r.matched_user.last_name }}</a>
-                                {% else %}
-                                    <div>
-                                        <span style="color:red">No match</span>
-                                        <div>
-                                            <input type="text" id="user-search-input-{{ r.row_index }}" placeholder="Search users..." style="width:220px" />
-                                            <button type="button" onclick="searchUsers({{ r.row_index }})">Search</button>
-                                        </div>
-                                        <div id="user-results-{{ r.row_index }}"></div>
-                                        <input type="hidden" name="manual_user_{{ r.row_index }}" id="manual_user_{{ r.row_index }}" />
-                                    </div>
-                                {% endif %}
-                            </td>
-                            <td>{{ r.supervisor_text }}</td>
-                            <td>{% if r.matched_supervisor %}<a href="{% url 'generic:supervisor_detail' r.matched_supervisor.pk %}">{{ r.matched_supervisor.name }}</a>{% else %}<span style="color:red">No match</span>{% endif %}</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
+{% if preview %}
+    <h3>Preview ({{ preview|length }} rows)</h3>
+    <table class="table table-sm">
+        <thead>
+            <tr>
+                <th>Raw</th>
+                <th>Name</th>
+                <th>Grade</th>
+                <th>Matched user</th>
+                <th>Supervisor text</th>
+                <th>Matched supervisor</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for r in preview %}
+                <tr>
+                    <td><pre style="margin:0">{{ r.raw }}</pre></td>
+                    <td>{{ r.norm_name }}</td>
+                    <td>{{ r.grade }}</td>
+                    <td>
+                        {% if r.matched_user %}
+                            <a href="{% url 'account_profile' r.matched_user.username %}">{{ r.matched_user.first_name }} {{ r.matched_user.last_name }}</a>
+                        {% else %}
+                            <div>
+                                <span style="color:red">No match</span>
+                                <div>
+                                    <form hx-get="{% url 'generic:user_search' %}" hx-target="#user-results-{{ r.row_index }}" hx-swap="innerHTML" onsubmit="return false;">
+                                        <input type="text" name="q" id="user-search-input-{{ r.row_index }}" placeholder="Search users..." style="width:220px" />
+                                        <input type="hidden" name="row" value="{{ r.row_index }}" />
+                                        <button type="submit">Search</button>
+                                    </form>
+                                </div>
+                                <div id="user-results-{{ r.row_index }}"></div>
+                                <input type="hidden" name="manual_user_{{ r.row_index }}" id="manual_user_{{ r.row_index }}" />
+                            </div>
+                        {% endif %}
+                    </td>
+                    <td>{{ r.supervisor_text }}</td>
+                    <td>{% if r.matched_supervisor %}<a href="{% url 'generic:supervisor_detail' r.matched_supervisor.pk %}">{{ r.matched_supervisor.name }}</a>{% else %}<span style="color:red">No match</span>{% endif %}</td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+{% endif %}
 
-        {% if report %}
-            <h3>Apply report</h3>
-            <p>Updated: {{ report.updated }}; Skipped (no user matched): {{ report.skipped }}</p>
-        {% endif %}
+{% if report %}
+    <h3>Apply report</h3>
+    <p>Updated: {{ report.updated }}; Skipped (no user matched): {{ report.skipped }}</p>
+{% endif %}
 
 {% endblock %}
 
 {% block extra_scripts %}
-    <script>
-        function searchUsers(rowIndex) {
-            const input = document.getElementById('user-search-input-' + rowIndex);
-            const q = input ? input.value.trim() : '';
-            const resultsDiv = document.getElementById('user-results-' + rowIndex);
-            const hiddenInput = document.getElementById('manual_user_' + rowIndex);
-            resultsDiv.innerHTML = 'Searching...';
-            fetch("{% url 'generic:user_search' %}?q=" + encodeURIComponent(q))
-                .then(r => r.json())
-                .then(data => {
-                    resultsDiv.innerHTML = '';
-                    if (!data || !data.results || data.results.length === 0) {
-                        resultsDiv.innerHTML = '<div><em>No users found</em></div>';
-                        return;
-                    }
-                    const ul = document.createElement('ul');
-                    ul.style.listStyle = 'none';
-                    ul.style.padding = '0';
-                    data.results.forEach(function(item){
-                        const li = document.createElement('li');
-                        li.style.margin = '4px 0';
-                        const btn = document.createElement('button');
-                        btn.type = 'button';
-                        btn.textContent = 'Select';
-                        btn.style.marginLeft = '8px';
-                        btn.onclick = function(){
-                            hiddenInput.value = item.id;
-                            resultsDiv.innerHTML = '<div>Selected: ' + escapeHtml(item.text) + '</div>';
-                        };
-                        li.innerHTML = '<strong>' + escapeHtml(item.text) + '</strong>';
-                        li.appendChild(btn);
-                        ul.appendChild(li);
-                    });
-                    resultsDiv.appendChild(ul);
-                })
-                .catch(function(err){
-                    resultsDiv.innerHTML = '<div style="color:red">Error searching users</div>';
-                    console.error(err);
-                });
-        }
+<script>
+// Called from the HTMX-rendered results fragment to set the manual selection
+function setManualUser(rowIndex, id, text) {
+    const hiddenInput = document.getElementById('manual_user_' + rowIndex);
+    const resultsDiv = document.getElementById('user-results-' + rowIndex);
+    if (hiddenInput) {
+        hiddenInput.value = id;
+    }
+    if (resultsDiv) {
+        resultsDiv.innerHTML = '<div>Selected: ' + escapeHtml(text) + '</div>';
+    }
+}
 
-        function escapeHtml(unsafe) {
-            return unsafe
-                .replace(/&/g, "&amp;")
-                .replace(/</g, "&lt;")
-                .replace(/>/g, "&gt;")
-                .replace(/\"/g, "&quot;")
-                .replace(/'/g, "&#039;");
-        }
-    </script>
+function escapeHtml(unsafe) {
+    if (!unsafe) return '';
+    return String(unsafe)
+         .replace(/&/g, "&amp;")
+         .replace(/</g, "&lt;")
+         .replace(/>/g, "&gt;")
+         .replace(/\"/g, "&quot;")
+         .replace(/'/g, "&#039;");
+}
+</script>
 {% endblock %}
diff --git a/generic/views.py b/generic/views.py
index e3512665..4efa8cc3 100644
--- a/generic/views.py
+++ b/generic/views.py
@@ -4412,7 +4412,15 @@ def user_search(request):
         for u in qs:
             results.append({"id": u.pk, "text": f"{u.first_name} {u.last_name} ({u.email})"})
 
-    return JsonResponse({"results": results})
+        # If this is an HTMX request (or a row param was provided) render an HTML fragment
+        # that can be swapped into the preview row's results container. Otherwise return JSON.
+        row = request.GET.get("row")
+        if request.headers.get("HX-Request") == "true" or row is not None:
+            # Render a small partial that lists results with Select buttons that call
+            # the setManualUser(row, id, text) function in the parent page.
+            return render(request, "generic/partials/user_search_results.html", {"results": results, "row": int(row) if row is not None else None})
+
+        return JsonResponse({"results": results})
 
 
 def create_trainee(request, context=None):