Fixes and improvements for user page

admin_board_view/static/AdminBoardView/script.js

@@ -33,13 +33,30 @@ function showConfirmation(title, body, id) {
   modal.show();
 }
 
+// Filter user page
+document.getElementById("user").addEventListener("keypress", e => {
+  if (e.key === "Enter") {
+    const name = document.getElementById("user").value;
+    const escapedName = name.replace("'", "\\'");
+    const user_options = document.getElementById("userOptions");
+    const selected_user = user_options.querySelector(`[value='${escapedName}']`);
+    if (!selected_user) {
+      window.location = `/users?name=${name}`;
+    } else {
+      const userId = selected_user.id;
+      window.location = `/users/${userId}`;
+    }
+  }
+});
+
 // Show user page
 const showUser = document.getElementById("show-user");
 if (showUser) { 
   document.getElementById("show-user").addEventListener("click", e => {
     const name = document.getElementById("user").value;
+    const escapedName = name.replace("'", "\\'");
     const user_options = document.getElementById("userOptions");
-    const selected_user = user_options.querySelector(`[value='${name}']`);
+    const selected_user = user_options.querySelector(`[value='${escapedName}']`);
     if (!selected_user) {
       showToast("Show user - Failed", "User not found");
     } else {

admin_board_view/templates/user.html

@@ -138,6 +138,29 @@ <h5 class="card-header">Find user</h5>
     <btn class="btn btn-primary" id="show-user">Show user</btn>
   </div>
 </div>
+<div class="card w-100 mt-3">
+  <table class="table table-striped table-hover text-center align-middle">
+    <thead>
+      <tr>
+        <th>User</th>
+        <th>Email</th>
+        <th>Birthdate</th>
+        <th>Balance</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for user in user_page %}
+      <tr id="{{ user.id }}">
+        <td><a href="/users/{{ user.id }}">{{ user.name }}</a></td>
+        <td>{{ user.email }}</td>
+        <td>{{ user.birthday }}</td>
+        <td>€{{ user.balance }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  {% include "pagination_footer.html" with page=user_page page_name='users' %}
+</div>
 {% endif %}
 <script type="text/javascript" src="{% static 'AdminBoardView/user.js' %}" defer></script>
 {% endblock %}

admin_board_view/utils.py

@@ -11,8 +11,13 @@ def create_paginator(data, page_n, p_len=5):
         p_len: Length of the page, defaults to 5
     """
     if isinstance(data, QuerySet):
-        # Order data, most recent date first
-        data = data.order_by('date', 'id').reverse()
+        if hasattr(data.model, 'date'):
+            # Order data, most recent date first
+            data = data.order_by('date', 'id').reverse()
+        elif hasattr(data.model, 'name'):
+            data = data.order_by('name', 'id')
+        else:
+            data = data.order_by('id')
 
     page = None
     paginator = Paginator(data, p_len)

admin_board_view/views.py

@@ -110,7 +110,13 @@ def users(request, user_id=None):
         return render(request, "user.html", { "user_info": user, "cards": cards, "top_ups": top_up_page, "sales": sales_page, "top_types": top_up_types })
     else:
         users = User.objects.all()
-        return render(request, "user.html", { "users": users })
+
+        # Only filter on user name if a name is given
+        if request.GET.get('name'):
+            users = users.filter(name__icontains=request.GET.get('name'))
+
+        user_page = create_paginator(users, request.GET.get('users'), p_len=15)
+        return render(request, "user.html", { "users": users, "user_page": user_page })
 
 
 @dashboard_admin