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

Enhance trainee management UI and functionality

Browse Source 
- Improved bulk edit options for user groups with success alerts.
- Updated trainee selection count display.
- Refined HTMX responses for user actions, providing better feedback.
- Enhanced checkbox toggle functionality for trainee selection.
This commit is contained in:
Ross
2026-06-15 09:53:21 +01:00
parent afd4cc3b87
commit fc9f2ed6af
3 changed files with 162 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
generic/templates/generic/trainees.html
+42 -7
View File
@@ -27,15 +27,15 @@
<th class="sortable" data-col="3">Supervisor <span class="sort-indicator"></span></th>
<th>Edit</th>
<th class="trainee-bulk-edit">Bulk Edit<br/>
<span _="on click log 'test' then log 'hello' then repeat for i in <input/>
-- set i.checked to not i.checked
toggle [@checked] on i
<span _="on click repeat for i in .trainee-checkbox
toggle [@checked] on i
end then call updateSelectedCount()
">Toggle All</span>
</th>
</tr>
{% for trainee in trainees %}
<tr class="trainee" _="on click log 'test' then log the next <input/> then toggle [@checked] on <input/> in me">
<tr class="trainee" _="on click if target.tagName is not 'INPUT' and target.tagName is not 'A' toggle [@checked] on <input/> in me end then call updateSelectedCount()">
<td>{{trainee.user.first_name}} {{trainee.user.last_name}}
<a href="{% url 'account_profile' trainee.username %}" class="opacity-25"><i class="bi bi-link"></i></a>
</td>
@@ -61,7 +61,10 @@
</td>
<td><a href="{% url 'account_update' trainee.user.username %}?redirect={{request.path}}">User</a>/<a href="{% url 'account_profile_update' trainee.user.username %}?redirect={{request.path}}">Profile</a>
<span class="hover-highlight remove-trainee"><i class="bi bi-x-circle" title="Click to remove trainee status"
hx-get = "{% url 'generic:user_not_trainee' trainee.user.pk %}"
hx-get="{% url 'generic:user_not_trainee' trainee.user.pk %}"
hx-target="closest tr"
hx-swap="outerHTML swap:0.5s"
hx-confirm="Are you sure you want to remove trainee status for this user?"
></i></span>
</td>
<td class="trainee-bulk-edit">
@@ -85,6 +88,7 @@
<div id="bulk-edit" class="trainee-bulk-edit">
<h3>Bulk edit options</h3>
<p class="text-muted small mb-2">Selected trainees: <span id="selected-count" class="fw-bold">0</span></p>
These actions will act on all the selected trainees. Refresh the page to cancel / clear.
<div id="htmx-info"></div>
<div id="htmx-options"></div>
@@ -101,15 +105,25 @@
hx-include="[name='selection']"
hx-target="#htmx-options"
title="Changes the selected users grade."
>Edit grade</button>
<button id="bulk-add-group-button"
hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']"
hx-target="#htmx-options"
title="Adds the selected user to a group."
>Add group</button>
<button id="bulk-remove-group-button"
hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']"
hx-target="#htmx-options"
title="Removes the selected user from a group."
>Remove group</button>
<button id="bulk-deactivate-user-button"
hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']"
hx-target="#htmx-options"
hx-confirm="This will deactivate all selected users, are you sure you wish to continue?"
title="Deactivates the selected users"
>Deactivate</button>
</div>
@@ -203,6 +217,27 @@
lastSorted = {idx, asc};
});
});
// Update selection count
const updateSelectedCount = () => {
const checkedCount = table.querySelectorAll('.trainee-checkbox:checked').length;
const countEl = document.getElementById('selected-count');
if (countEl) {
countEl.textContent = checkedCount;
}
};
// Listen for checkbox changes directly
table.addEventListener('change', function(e) {
if (e.target.classList.contains('trainee-checkbox')) {
updateSelectedCount();
}
});
// Expose to window so hyperscript can call it
window.updateSelectedCount = updateSelectedCount;
updateSelectedCount();
})();
</script>
{% endblock %}