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
+60 -46
View File
@@ -7,51 +7,69 @@
{% endblock %}
{% 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">
<summary>
<details class="bulk-edit card mb-3">
<summary class="card-header cursor-pointer fw-bold">
Bulk edit
</summary>
<div id="htmx-info"></div>
<div id="htmx-options"></div>
<button id="bulk-delete-supervisors-button"
title="Deletes the supervisors of all selected users"
hx-post="{% url 'generic:users_bulk_delete_supervisors' %}"
hx-include="[name='selection']"
hx-confirm="This will delete supervisors from all selected users, are you sure you wish to continue?"
hx-target="#htmx-info"
_='on click put "" into #htmx-options'
>Delete supervisors</button>
<button id="bulk-edit-grade-button"
hx-post="{% url 'generic:users_bulk_edit' %}"
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 class="card-body">
<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"
class="btn btn-sm btn-danger"
title="Deletes the supervisors of all selected users"
hx-post="{% url 'generic:users_bulk_delete_supervisors' %}"
hx-include="[name='selection']"
hx-confirm="This will delete supervisors from all selected users, are you sure you wish to continue?"
hx-target="#htmx-info"
_='on click put "" into #htmx-options'
>Delete supervisors</button>
<button id="bulk-edit-grade-button"
class="btn btn-sm btn-secondary"
hx-post="{% url 'generic:users_bulk_edit' %}"
hx-include="[name='selection']"
hx-target="#htmx-options"
title="Changes the selected users grade."
>Edit grade</button>
<button id="bulk-add-group-button"
class="btn btn-sm btn-secondary"
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"
class="btn btn-sm btn-secondary"
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"
class="btn btn-sm btn-warning text-dark"
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>
</div>
</details>
<div id="table-div">
@@ -61,8 +79,4 @@
</div>
{% 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 %}
templates/user_list_view.html
+48 -34
View File
@@ -1,47 +1,61 @@
{% extends "generic/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<h2>Users</h2>
<details class="filter">
<summary>
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
<h2>Users</h2>
<div class="d-flex gap-2">
<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
</summary>
<form method="get">
{{ filter.form.as_p }}
<input type="submit" />
</form>
<div class="card-body">
<form method="get" class="row row-cols-lg-auto g-3 align-items-center">
{{ 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>
</div>
</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 %}
<button class="small-url-button"><a href="{% url 'admin:auth_user_change' list_user.id %}">Admin edit</a></button>
<button class="small-url-button"><a href="{% url 'admin:auth_user_delete' list_user.id %}">Delete</a></button>
{% endif %}
<div class="mb-2 text-muted fw-semibold">
{{ object_list|length }} Users shown.
</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 %}
<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>
{% endfor %}
</ul>
<a href="{% url 'accounts_bulk_create' %}">Bulk create users</a>
<a href="{% url 'create_user' %}">Create single user</a>
{% endblock %}
{% block css %}
<style>
#user-list .name, #user-list .grade {
padding-left: 50px;
}
</style>
{% endblock css %}