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
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 %}