Add supervisor search functionality with HTMX support for manual selection in bulk updates

This commit is contained in:
Ross
2025-10-27 14:43:41 +00:00
parent be94ed8d0f
commit fba8d5ab05
4 changed files with 71 additions and 9 deletions
@@ -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="setManualSupervisor({{ row }}, {{ item.id }}, '{{ item.text|escapejs }}')" style="margin-left:8px;">Select</button>
</li>
{% endfor %}
</ul>
{% else %}
<div><em>No supervisors found</em></div>
{% endif %}
@@ -40,19 +40,37 @@
<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 class="d-inline-flex align-items-center" style="gap:6px">
<form hx-get="{% url 'generic:user_search' %}" hx-target="#user-results-{{ r.row_index }}" hx-swap="innerHTML" onsubmit="return false;" class="d-inline-flex align-items-center">
<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" class="btn btn-sm btn-secondary">Search</button>
</form>
<div id="user-results-{{ r.row_index }}"></div>
</div>
<input type="hidden" name="manual_user_{{ r.row_index }}" id="manual_user_{{ r.row_index }}" />
</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>
<td>
{% if r.matched_supervisor %}
<a href="{% url 'generic:supervisor_detail' r.matched_supervisor.pk %}">{{ r.matched_supervisor.name }}</a>
{% else %}
<div>
<span style="color:red">No match</span>
<div class="d-inline-flex align-items-center" style="gap:6px">
<form hx-get="{% url 'generic:supervisor_search' %}" hx-target="#supervisor-results-{{ r.row_index }}" hx-swap="innerHTML" onsubmit="return false;" class="d-inline-flex align-items-center">
<input type="text" name="q" id="supervisor-search-input-{{ r.row_index }}" placeholder="Search supervisors..." style="width:220px" />
<input type="hidden" name="row" value="{{ r.row_index }}" />
<button type="submit" class="btn btn-sm btn-secondary">Search</button>
</form>
<div id="supervisor-results-{{ r.row_index }}"></div>
</div>
<input type="hidden" name="manual_supervisor_{{ r.row_index }}" id="manual_supervisor_{{ r.row_index }}" />
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
@@ -80,6 +98,17 @@
}
}
function setManualSupervisor(rowIndex, id, text) {
const hiddenInput = document.getElementById('manual_supervisor_' + rowIndex);
const resultsDiv = document.getElementById('supervisor-results-' + rowIndex);
if (hiddenInput) {
hiddenInput.value = id;
}
if (resultsDiv) {
resultsDiv.innerHTML = '<div>Selected: ' + escapeHtml(text) + '</div>';
}
}
function escapeHtml(unsafe) {
if (!unsafe) return '';
return String(unsafe)