From 04a68beae4e369b33d89c1b40145d2b84f6e71f4 Mon Sep 17 00:00:00 2001
From: Mstiekema <m.stiekema@students.uu.nl>
Date: Mon, 18 Mar 2024 18:56:56 +0100
Subject: [PATCH 1/2] Fixed searching a name with a single quote

---
 admin_board_view/static/AdminBoardView/script.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/admin_board_view/static/AdminBoardView/script.js b/admin_board_view/static/AdminBoardView/script.js
index ce11b22..0add64f 100644
--- a/admin_board_view/static/AdminBoardView/script.js
+++ b/admin_board_view/static/AdminBoardView/script.js
@@ -38,8 +38,9 @@ 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 {

From 1a46910c1609435ea26efdeec05b08ec95c09afc Mon Sep 17 00:00:00 2001
From: Mstiekema <m.stiekema@students.uu.nl>
Date: Mon, 18 Mar 2024 19:26:31 +0100
Subject: [PATCH 2/2] Added user paginator & improved search

---
 .../static/AdminBoardView/script.js           | 16 +++++++++++++
 admin_board_view/templates/user.html          | 23 +++++++++++++++++++
 admin_board_view/utils.py                     |  9 ++++++--
 admin_board_view/views.py                     |  8 ++++++-
 4 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/admin_board_view/static/AdminBoardView/script.js b/admin_board_view/static/AdminBoardView/script.js
index 0add64f..9aae789 100644
--- a/admin_board_view/static/AdminBoardView/script.js
+++ b/admin_board_view/static/AdminBoardView/script.js
@@ -33,6 +33,22 @@ 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) { 
diff --git a/admin_board_view/templates/user.html b/admin_board_view/templates/user.html
index d9aeeb6..6df9245 100644
--- a/admin_board_view/templates/user.html
+++ b/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 %}
diff --git a/admin_board_view/utils.py b/admin_board_view/utils.py
index 3f8fa83..7474e1b 100644
--- a/admin_board_view/utils.py
+++ b/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)
diff --git a/admin_board_view/views.py b/admin_board_view/views.py
index 248a200..e9b8bd4 100644
--- a/admin_board_view/views.py
+++ b/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