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

Enhance user view and list UI with improved layout and functionality

Browse Source
This commit is contained in:
Ross
2026-06-15 11:28:57 +01:00
parent c50ace771e
commit 1f0877964b
2 changed files with 108 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
generic/templates/generic/user_view.html
+27 -13
View File
@@ -7,15 +7,31 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<a href='{% url "trainees" %}'>Trainees list</a> <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
<h2>Accounts</h2>
<div class="d-flex gap-2">
<a href='{% url "trainees" %}' class="btn btn-outline-info">
<i class="bi bi-list-ul me-1"></i>Trainees list
</a>
<a href="{% url 'create_user' %}" class="btn btn-primary">
<i class="bi bi-person-plus me-1"></i>Create single user
</a>
<a href="{% url 'accounts_bulk_create' %}" class="btn btn-outline-primary">
<i class="bi bi-people me-1"></i>Bulk create users
</a>
</div>
</div>
<details class="bulk-edit"> <details class="bulk-edit card mb-3">
<summary> <summary class="card-header cursor-pointer fw-bold">
Bulk edit Bulk edit
</summary> </summary>
<div id="htmx-info"></div> <div class="card-body">
<div id="htmx-options"></div> <div id="htmx-info" class="mb-2"></div>
<div id="htmx-options" class="mb-3"></div>
<div class="d-flex flex-wrap gap-2">
<button id="bulk-delete-supervisors-button" <button id="bulk-delete-supervisors-button"
class="btn btn-sm btn-danger"
title="Deletes the supervisors of all selected users" title="Deletes the supervisors of all selected users"
hx-post="{% url 'generic:users_bulk_delete_supervisors' %}" hx-post="{% url 'generic:users_bulk_delete_supervisors' %}"
hx-include="[name='selection']" hx-include="[name='selection']"
@@ -24,34 +40,36 @@
_='on click put "" into #htmx-options' _='on click put "" into #htmx-options'
>Delete supervisors</button> >Delete supervisors</button>
<button id="bulk-edit-grade-button" <button id="bulk-edit-grade-button"
class="btn btn-sm btn-secondary"
hx-post="{% url 'generic:users_bulk_edit' %}" hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']" hx-include="[name='selection']"
hx-target="#htmx-options" hx-target="#htmx-options"
title="Changes the selected users grade." title="Changes the selected users grade."
>Edit grade</button> >Edit grade</button>
<button id="bulk-add-group-button" <button id="bulk-add-group-button"
class="btn btn-sm btn-secondary"
hx-post="{% url 'generic:users_bulk_edit' %}" hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']" hx-include="[name='selection']"
hx-target="#htmx-options" hx-target="#htmx-options"
title="Adds the selected user to a group." title="Adds the selected user to a group."
>Add group</button> >Add group</button>
<button id="bulk-remove-group-button" <button id="bulk-remove-group-button"
class="btn btn-sm btn-secondary"
hx-post="{% url 'generic:users_bulk_edit' %}" hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']" hx-include="[name='selection']"
hx-target="#htmx-options" hx-target="#htmx-options"
title="Removes the selected user from a group." title="Removes the selected user from a group."
>Remove group</button> >Remove group</button>
<button id="bulk-deactivate-user-button" <button id="bulk-deactivate-user-button"
class="btn btn-sm btn-warning text-dark"
hx-post="{% url 'generic:users_bulk_edit' %}" hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']" hx-include="[name='selection']"
hx-target="#htmx-options" hx-target="#htmx-options"
hx-confirm="This will deactivate all selected users, are you sure you wish to continue?" hx-confirm="This will deactivate all selected users, are you sure you wish to continue?"
title="Deactivates the selected users" title="Deactivates the selected users"
>Deactivate</button> >Deactivate</button>
</div>
</div>
</details> </details>
<div id="table-div"> <div id="table-div">
@@ -61,8 +79,4 @@
</div> </div>
{% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %} {% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
<a href="{% url 'accounts_bulk_create' %}">Bulk create users</a>
<a href="{% url 'create_user' %}">Create single user</a>
{% endblock %} {% endblock %}
templates/user_list_view.html
+45 -31
View File
@@ -1,47 +1,61 @@
{% extends "generic/base.html" %} {% extends "generic/base.html" %}
{% load crispy_forms_tags %}
{% block content %} {% block content %}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
<h2>Users</h2> <h2>Users</h2>
<details class="filter"> <div class="d-flex gap-2">
<summary> <a href="{% url 'create_user' %}" class="btn btn-primary">
<i class="bi bi-person-plus me-1"></i>Create single user
</a>
<a href="{% url 'accounts_bulk_create' %}" class="btn btn-outline-primary">
<i class="bi bi-people me-1"></i>Bulk create users
</a>
</div>
</div>
<details class="filter card mb-3">
<summary class="card-header cursor-pointer fw-bold">
Filter users list Filter users list
</summary> </summary>
<form method="get"> <div class="card-body">
{{ filter.form.as_p }} <form method="get" class="row row-cols-lg-auto g-3 align-items-center">
<input type="submit" /> {{ filter.form|crispy }}
<div class="col-12 mt-3 mt-lg-0">
<button type="submit" class="btn btn-primary">Filter</button>
<a href="{% url 'accounts_list' %}" class="btn btn-outline-secondary ms-1">Reset</a>
</div>
</form> </form>
</div>
</details> </details>
{{object_list|length}} Users shown.
<ul id="user-list">
{% for list_user in object_list %}
<li><span class="username">Username: <a href="{% url 'account_profile' list_user.username %}">{{ list_user.username }}</a></span>
<span class="name">Name: {{list_user.first_name}} {{list_user.last_name}}</span>
{% if list_user.userprofile.grade %}<span class="grade">Grade: {{list_user.userprofile.grade}}</span>{% endif %} Supervisor: {{list_user.userprofile.supervisor}}
<br/> Registration number: {{list_user.userprofile.registration_number}}
<button class="small-url-button"><a href="{% url 'account_update' list_user.username %}">Edit user</a></button>
<button class="small-url-button"><a href="{% url 'account_profile_update' list_user.username %}">Edit profile</a></button>
{% if user.is_superuser %} <div class="mb-2 text-muted fw-semibold">
<button class="small-url-button"><a href="{% url 'admin:auth_user_change' list_user.id %}">Admin edit</a></button> {{ object_list|length }} Users shown.
<button class="small-url-button"><a href="{% url 'admin:auth_user_delete' list_user.id %}">Delete</a></button> </div>
<ul id="user-list" class="list-group mb-3">
{% for list_user in object_list %}
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap gap-2">
<div>
<span class="username fw-bold">@<a href="{% url 'account_profile' list_user.username %}">{{ list_user.username }}</a></span>
<span class="name ms-3 text-muted">Name: {{ list_user.first_name }} {{ list_user.last_name }}</span>
{% if list_user.userprofile.grade %}
<span class="badge bg-secondary ms-2">Grade: {{ list_user.userprofile.grade }}</span>
{% endif %} {% endif %}
<span class="ms-2 small text-muted">Supervisor: {{ list_user.userprofile.supervisor|default:"None" }}</span>
<div class="text-muted small mt-1">Registration number: {{ list_user.userprofile.registration_number|default:"N/A" }}</div>
</div>
<div class="btn-group btn-group-sm" role="group">
<a class="btn btn-outline-secondary" href="{% url 'account_update' list_user.username %}">Edit user</a>
<a class="btn btn-outline-secondary" href="{% url 'account_profile_update' list_user.username %}">Edit profile</a>
{% if user.is_superuser %}
<a class="btn btn-outline-info" href="{% url 'admin:auth_user_change' list_user.id %}">Admin edit</a>
<a class="btn btn-outline-danger" href="{% url 'admin:auth_user_delete' list_user.id %}">Delete</a>
{% endif %}
</div>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<a href="{% url 'accounts_bulk_create' %}">Bulk create users</a>
<a href="{% url 'create_user' %}">Create single user</a>
{% endblock %} {% endblock %}
{% block css %}
<style>
#user-list .name, #user-list .grade {
padding-left: 50px;
}
</style>
{% endblock css %}