From 86c422b28a8ea426eb7f6db1f98b1333414079ff Mon Sep 17 00:00:00 2001
From: bsilkyn <brent.silkyn@ugent.be>
Date: Sun, 7 Apr 2024 22:15:16 +0200
Subject: [PATCH] chore: add filters + rework display of roles #198

---
 backend/api/views/user_view.py          |  14 ++-
 frontend/package-lock.json              | 154 ++++++++++++------------
 frontend/src/types/filter/Filter.ts     |   1 +
 frontend/src/views/admins/UsersView.vue | 142 +++++++++++-----------
 4 files changed, 159 insertions(+), 152 deletions(-)

diff --git a/backend/api/views/user_view.py b/backend/api/views/user_view.py
index 33c25831..238e7c29 100644
--- a/backend/api/views/user_view.py
+++ b/backend/api/views/user_view.py
@@ -23,14 +23,26 @@ def search(self, request: Request) -> Response:
         self.pagination_class = BasicPagination
 
         search = request.query_params.get("search", "")
+        identifier = request.query_params.get("id", "")
         username = request.query_params.get("username", "")
         email = request.query_params.get("email", "")
 
+        queryset1 = self.get_queryset().filter(
+            id__icontains=search
+        )
+        queryset2 = self.get_queryset().filter(
+            username__icontains=search
+        )
+        queryset3 = self.get_queryset().filter(
+            email__icontains=search
+        )
+        queryset1 = queryset1.union(queryset2, queryset3)
         queryset = self.get_queryset().filter(
-            id__icontains=search,
+            id__icontains=identifier,
             username__icontains=username,
             email__icontains=email
         )
+        queryset = queryset.intersection(queryset1)
 
         serializer = self.serializer_class(self.paginate_queryset(queryset), many=True, context={
             "request": request
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3ee083eb..6ddc0362 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -655,11 +655,11 @@
             "dev": true
         },
         "node_modules/@inquirer/confirm": {
-            "version": "3.1.1",
-            "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-3.1.1.tgz",
-            "integrity": "sha512-epf2RVHJJxX5qF85U41PBq9qq2KTJW9sKNLx6+bb2/i2rjXgeoHVGUm8kJxZHavrESgXgBLKCABcfOJYIso8cQ==",
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-3.1.2.tgz",
+            "integrity": "sha512-xQeRxRpVOQdBinIyOHX9+/nTrvt84NnaP8hym5ARdLr6a5T1ckowx70sEaItgULBHlxSIJL970BoRfFxlzO2IA==",
             "dependencies": {
-                "@inquirer/core": "^7.1.1",
+                "@inquirer/core": "^7.1.2",
                 "@inquirer/type": "^1.2.1"
             },
             "engines": {
@@ -667,13 +667,13 @@
             }
         },
         "node_modules/@inquirer/core": {
-            "version": "7.1.1",
-            "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-7.1.1.tgz",
-            "integrity": "sha512-rD1UI3eARN9qJBcLRXPOaZu++Bg+xsk0Tuz1EUOXEW+UbYif1sGjr0Tw7lKejHzKD9IbXE1CEtZ+xR/DrNlQGQ==",
+            "version": "7.1.2",
+            "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-7.1.2.tgz",
+            "integrity": "sha512-ne5VhDqruYYzx8mmjDZ9F58ymrLJGxmSHJUcJGiW3tifzvl3goAm6gNX11w6+zUnGE54vgQ6ALDXL3IOSezMRw==",
             "dependencies": {
                 "@inquirer/type": "^1.2.1",
                 "@types/mute-stream": "^0.0.4",
-                "@types/node": "^20.11.30",
+                "@types/node": "^20.12.4",
                 "@types/wrap-ansi": "^3.0.0",
                 "ansi-escapes": "^4.3.2",
                 "chalk": "^4.1.2",
@@ -870,9 +870,9 @@
             }
         },
         "node_modules/@rollup/rollup-android-arm-eabi": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz",
-            "integrity": "sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
+            "integrity": "sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==",
             "cpu": [
                 "arm"
             ],
@@ -883,9 +883,9 @@
             ]
         },
         "node_modules/@rollup/rollup-android-arm64": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.0.tgz",
-            "integrity": "sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.1.tgz",
+            "integrity": "sha512-Y/9OHLjzkunF+KGEoJr3heiD5X9OLa8sbT1lm0NYeKyaM3oMhhQFvPB0bNZYJwlq93j8Z6wSxh9+cyKQaxS7PQ==",
             "cpu": [
                 "arm64"
             ],
@@ -896,9 +896,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-arm64": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.0.tgz",
-            "integrity": "sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.1.tgz",
+            "integrity": "sha512-+kecg3FY84WadgcuSVm6llrABOdQAEbNdnpi5X3UwWiFVhZIZvKgGrF7kmLguvxHNQy+UuRV66cLVl3S+Rkt+Q==",
             "cpu": [
                 "arm64"
             ],
@@ -909,9 +909,9 @@
             ]
         },
         "node_modules/@rollup/rollup-darwin-x64": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.0.tgz",
-            "integrity": "sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.1.tgz",
+            "integrity": "sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==",
             "cpu": [
                 "x64"
             ],
@@ -922,9 +922,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.0.tgz",
-            "integrity": "sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.1.tgz",
+            "integrity": "sha512-mS6wQ6Do6/wmrF9aTFVpIJ3/IDXhg1EZcQFYHZLHqw6AzMBjTHWnCG35HxSqUNphh0EHqSM6wRTT8HsL1C0x5g==",
             "cpu": [
                 "arm"
             ],
@@ -935,9 +935,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.0.tgz",
-            "integrity": "sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.1.tgz",
+            "integrity": "sha512-p9rGKYkHdFMzhckOTFubfxgyIO1vw//7IIjBBRVzyZebWlzRLeNhqxuSaZ7kCEKVkm/kuC9fVRW9HkC/zNRG2w==",
             "cpu": [
                 "arm64"
             ],
@@ -948,9 +948,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-arm64-musl": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.0.tgz",
-            "integrity": "sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.1.tgz",
+            "integrity": "sha512-nDY6Yz5xS/Y4M2i9JLQd3Rofh5OR8Bn8qe3Mv/qCVpHFlwtZSBYSPaU4mrGazWkXrdQ98GB//H0BirGR/SKFSw==",
             "cpu": [
                 "arm64"
             ],
@@ -961,9 +961,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.0.tgz",
-            "integrity": "sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.1.tgz",
+            "integrity": "sha512-im7HE4VBL+aDswvcmfx88Mp1soqL9OBsdDBU8NqDEYtkri0qV0THhQsvZtZeNNlLeCUQ16PZyv7cqutjDF35qw==",
             "cpu": [
                 "ppc64le"
             ],
@@ -974,9 +974,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.0.tgz",
-            "integrity": "sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.1.tgz",
+            "integrity": "sha512-RWdiHuAxWmzPJgaHJdpvUUlDz8sdQz4P2uv367T2JocdDa98iRw2UjIJ4QxSyt077mXZT2X6pKfT2iYtVEvOFw==",
             "cpu": [
                 "riscv64"
             ],
@@ -987,9 +987,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-s390x-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.0.tgz",
-            "integrity": "sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.1.tgz",
+            "integrity": "sha512-VMgaGQ5zRX6ZqV/fas65/sUGc9cPmsntq2FiGmayW9KMNfWVG/j0BAqImvU4KTeOOgYSf1F+k6at1UfNONuNjA==",
             "cpu": [
                 "s390x"
             ],
@@ -1000,9 +1000,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-gnu": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.0.tgz",
-            "integrity": "sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.1.tgz",
+            "integrity": "sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==",
             "cpu": [
                 "x64"
             ],
@@ -1013,9 +1013,9 @@
             ]
         },
         "node_modules/@rollup/rollup-linux-x64-musl": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.0.tgz",
-            "integrity": "sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.1.tgz",
+            "integrity": "sha512-JNEG/Ti55413SsreTguSx0LOVKX902OfXIKVg+TCXO6Gjans/k9O6ww9q3oLGjNDaTLxM+IHFMeXy/0RXL5R/g==",
             "cpu": [
                 "x64"
             ],
@@ -1026,9 +1026,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-arm64-msvc": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.0.tgz",
-            "integrity": "sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.1.tgz",
+            "integrity": "sha512-ryS22I9y0mumlLNwDFYZRDFLwWh3aKaC72CWjFcFvxK0U6v/mOkM5Up1bTbCRAhv3kEIwW2ajROegCIQViUCeA==",
             "cpu": [
                 "arm64"
             ],
@@ -1039,9 +1039,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-ia32-msvc": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.0.tgz",
-            "integrity": "sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.1.tgz",
+            "integrity": "sha512-TdloItiGk+T0mTxKx7Hp279xy30LspMso+GzQvV2maYePMAWdmrzqSNZhUpPj3CGw12aGj57I026PgLCTu8CGg==",
             "cpu": [
                 "ia32"
             ],
@@ -1052,9 +1052,9 @@
             ]
         },
         "node_modules/@rollup/rollup-win32-x64-msvc": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.0.tgz",
-            "integrity": "sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.1.tgz",
+            "integrity": "sha512-wQGI+LY/Py20zdUPq+XCem7JcPOyzIJBm3dli+56DJsQOHbnXZFEwgmnC6el1TPAfC8lBT3m+z69RmLykNUbew==",
             "cpu": [
                 "x64"
             ],
@@ -1108,9 +1108,9 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "20.12.4",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz",
-            "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==",
+            "version": "20.12.5",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
+            "integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
             "dependencies": {
                 "undici-types": "~5.26.4"
             }
@@ -5624,9 +5624,9 @@
             "dev": true
         },
         "node_modules/path-to-regexp": {
-            "version": "6.2.1",
-            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-            "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
+            "version": "6.2.2",
+            "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
+            "integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw=="
         },
         "node_modules/path-type": {
             "version": "4.0.0",
@@ -6112,9 +6112,9 @@
             }
         },
         "node_modules/rollup": {
-            "version": "4.14.0",
-            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.0.tgz",
-            "integrity": "sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==",
+            "version": "4.14.1",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz",
+            "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==",
             "dev": true,
             "dependencies": {
                 "@types/estree": "1.0.5"
@@ -6127,21 +6127,21 @@
                 "npm": ">=8.0.0"
             },
             "optionalDependencies": {
-                "@rollup/rollup-android-arm-eabi": "4.14.0",
-                "@rollup/rollup-android-arm64": "4.14.0",
-                "@rollup/rollup-darwin-arm64": "4.14.0",
-                "@rollup/rollup-darwin-x64": "4.14.0",
-                "@rollup/rollup-linux-arm-gnueabihf": "4.14.0",
-                "@rollup/rollup-linux-arm64-gnu": "4.14.0",
-                "@rollup/rollup-linux-arm64-musl": "4.14.0",
-                "@rollup/rollup-linux-powerpc64le-gnu": "4.14.0",
-                "@rollup/rollup-linux-riscv64-gnu": "4.14.0",
-                "@rollup/rollup-linux-s390x-gnu": "4.14.0",
-                "@rollup/rollup-linux-x64-gnu": "4.14.0",
-                "@rollup/rollup-linux-x64-musl": "4.14.0",
-                "@rollup/rollup-win32-arm64-msvc": "4.14.0",
-                "@rollup/rollup-win32-ia32-msvc": "4.14.0",
-                "@rollup/rollup-win32-x64-msvc": "4.14.0",
+                "@rollup/rollup-android-arm-eabi": "4.14.1",
+                "@rollup/rollup-android-arm64": "4.14.1",
+                "@rollup/rollup-darwin-arm64": "4.14.1",
+                "@rollup/rollup-darwin-x64": "4.14.1",
+                "@rollup/rollup-linux-arm-gnueabihf": "4.14.1",
+                "@rollup/rollup-linux-arm64-gnu": "4.14.1",
+                "@rollup/rollup-linux-arm64-musl": "4.14.1",
+                "@rollup/rollup-linux-powerpc64le-gnu": "4.14.1",
+                "@rollup/rollup-linux-riscv64-gnu": "4.14.1",
+                "@rollup/rollup-linux-s390x-gnu": "4.14.1",
+                "@rollup/rollup-linux-x64-gnu": "4.14.1",
+                "@rollup/rollup-linux-x64-musl": "4.14.1",
+                "@rollup/rollup-win32-arm64-msvc": "4.14.1",
+                "@rollup/rollup-win32-ia32-msvc": "4.14.1",
+                "@rollup/rollup-win32-x64-msvc": "4.14.1",
                 "fsevents": "~2.3.2"
             }
         },
diff --git a/frontend/src/types/filter/Filter.ts b/frontend/src/types/filter/Filter.ts
index f98dbf45..70f85046 100644
--- a/frontend/src/types/filter/Filter.ts
+++ b/frontend/src/types/filter/Filter.ts
@@ -1,5 +1,6 @@
 export const USER_FILTER = {
     search: '',
+    id: '',
     username: '',
     email: ''
 };
diff --git a/frontend/src/views/admins/UsersView.vue b/frontend/src/views/admins/UsersView.vue
index 18b04cd9..aa788ef1 100644
--- a/frontend/src/views/admins/UsersView.vue
+++ b/frontend/src/views/admins/UsersView.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
 import DataTable, {
     DataTableFilterEvent,
-    DataTablePageEvent,
-    DataTableSelectAllChangeEvent,
-    DataTableSortEvent,
+    DataTableSelectAllChangeEvent, DataTableSortEvent,
 } from 'primevue/datatable';
 import Column from 'primevue/column';
 import Dialog from 'primevue/dialog';
-import InputText from 'primevue/inputtext';
 import InputSwitch from 'primevue/inputswitch';
 import Button from 'primevue/button';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import InputText from 'primevue/inputtext';
 import AdminLayout from '@/components/layout/admin/AdminLayout.vue';
 import Title from '@/components/layout/Title.vue';
 import { ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { watchDebounced } from '@vueuse/core'
 import { useUser } from '@/composables/services/users.service.ts';
 import { useFilter } from '@/composables/filters/filter.ts';
 import { usePaginator } from '@/composables/filters/paginator.ts';
@@ -24,18 +23,20 @@ import { USER_FILTER } from '@/types/filter/Filter.ts';
 
 /* Composable injections */
 const { t } = useI18n();
-const { pagination, users, getUsers, searchUsers, createUser } = useUser();
+const { pagination, users, getUsers, searchUsers } = useUser();
 const { filter } = useFilter(USER_FILTER);
 const { paginate, page, first, pageSize } = usePaginator();
 
 onMounted(async () => {
-    await getUsers()
+    await loadLazyData();
 
     watch(
         filter,
-        () => {
-            paginate(0);
-            pagination.value = null;
+        async () => {
+            await paginate(0).then(() => {
+                pagination.value = null;
+            });
+            await loadLazyData();
         },
         { deep: true },
     );
@@ -43,17 +44,9 @@ onMounted(async () => {
     watch(
         page,
         async () => {
-            await searchUsers(filter.value, page.value, pageSize.value)
+            await loadLazyData();
         }
     )
-
-    watchDebounced(
-        filter,
-        async () => {
-            await searchUsers(filter.value, page.value, pageSize.value)
-        },
-        { debounce: 500, immediate: true, deep: true}
-    );
 });
 
 const dt = ref();
@@ -63,51 +56,34 @@ const selectedStudents = ref();
 const selectAll = ref(false);
 const editItem = ref<User>(User.blankUser());
 const popupEdit = ref<boolean>(false);
-const filters = ref({
-    'name': {value: '', matchMode: 'contains'},
-    'country.name': {value: '', matchMode: 'contains'},
-    'company': {value: '', matchMode: 'contains'},
-    'representative.name': {value: '', matchMode: 'contains'},
-});
-const lazyParams: {[key: string]: any} = ref({});
 
 
 const columns = ref([
-    {field: 'id', header: 'ID'},
-    {field: 'username', header: 'Username'},
-    {field: 'email', header: 'Email'},
-    {field: 'roles', header: 'Roles'},
-]);
-
-
-const popupAdd = ref<boolean>(false);
-const admin = ref<User>(User.blankUser());
-const adminColumns = ref([
-    {field: 'username', header: 'Username'},
-    {field: 'email', header: 'Email'},
-    {field: 'first_name', header: 'First name'},
-    {field: 'last_name', header: 'Last name'},
+    {field: 'id', header: 'ID', width: '5rem'},
+    {field: 'username', header: 'Username', width: '6rem'},
+    {field: 'email', header: 'Email', width: '10rem'},
+    {field: 'roles', header: 'Roles', width: '5rem'},
 ]);
 
-const loadLazyData = (event?: DataTablePageEvent | DataTableSortEvent | DataTableFilterEvent) => {
+const loadLazyData = async () => {
     loading.value = true;
-    lazyParams.value = { ...lazyParams.value, first: event?.first || first.value };
 
-    setTimeout(() => {
-        getUsers().then(() => {
+    setTimeout(async () => {
+        await searchUsers(filter.value, page.value, pageSize.value).then(() => {
             loading.value = false;
-            totalRecords.value = users.value?.length ?? 0
-        });
-    }, Math.random() * 1000 + 250);
-};
-const onSort = (event: DataTableSortEvent) => {
-    lazyParams.value = event;
-    loadLazyData(event);
+        })
+    },
+        500
+    )
 };
-const onFilter = (event: DataTableFilterEvent) => {
-    lazyParams.value.filters = filters.value;
-    loadLazyData(event);
+const onFilter = async (event: DataTableFilterEvent) => {
+    await paginate(event.first);
+    await loadLazyData();
 };
+const onSort = async (event: DataTableSortEvent) => {
+    await paginate(event.first);
+    await loadLazyData();
+}
 const onSelectAllChange = (event: DataTableSelectAllChangeEvent) => {
     selectAll.value = event.checked;
 
@@ -143,13 +119,13 @@ const updateRole = (role: Role) => {
 };
 
 const saveItem = () => {
-    if (users.value != null) {
+    if (pagination.value != null) {
         if (editItem.value.roles.includes("student") && editItem.value.roles.includes("teacher")) {
             // this is not allowed TODO
         } else {
             // update locally
-            const index = users.value.findIndex((row: User) => row.id == editItem.value.id);
-            users.value.splice(index, 1, {...editItem.value});
+            const index = pagination.value.results.findIndex((row: User) => row.id == editItem.value.id);
+            pagination.value.results.splice(index, 1, {...editItem.value});
             // update remotely TODO
         }
     } else {
@@ -158,20 +134,10 @@ const saveItem = () => {
     popupEdit.value = false;
 };
 
-const showAdminAddPopup = () => {
-    admin.value = User.blankUser();
-    admin.value.is_staff = true;
-    popupAdd.value = true;
+const searchText = (header: string) => {
+    return `${header} search`
 }
 
-const addAdmin = () => {
-    // local
-    loadLazyData();
-    // remote
-    createUser(admin.value);
-    popupAdd.value = false;
-};
-
 </script>
 
 <template>
@@ -179,12 +145,41 @@ const addAdmin = () => {
         <Title>
             <div class="gap-3 mb-3">{{ t('admin.users.title') }}</div>
             <div class="card p-fluid">
-                <DataTable :value="users" lazy paginator :first="first" :rows="pageSize" v-model:filters="filters" ref="dt" dataKey="id"
-                    :totalRecords="pagination?.count" :loading="loading" @update:first="paginate($event)" @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
+                <DataTable :value="pagination?.results" lazy paginator v-model:first="first" :rows="pageSize" ref="dt" dataKey="id" auto-layout
+                    :totalRecords="pagination?.count" :loading="loading" @page="loadLazyData"
+                           @sort="onSort($event)" @filter="onFilter($event)" filterDisplay="row"
                     :globalFilterFields="['name','country.name', 'company', 'representative.name']"
                     v-model:selection="selectedStudents" :selectAll="selectAll" @select-all-change="onSelectAllChange" @row-select="onRowSelect" @row-unselect="onRowUnselect" tableStyle="min-width: 75rem">
+                    <template #header>
+                        <div class="flex justify-content-end">
+                            <IconField iconPosition="left">
+                                <InputIcon>
+                                    <i class="pi pi-search" />
+                                </InputIcon>
+                                <InputText v-model="filter['search']"
+                                           placeholder="Keyword Search" />
+                            </IconField>
+                        </div>
+                    </template>
+                    <template #empty>No matching data.</template>
+                    <template #loading>Loading data. Please wait.</template>
                     <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-                    <Column v-for="column in columns" :field="column.field" :header="column.header"></Column>
+                    <Column v-for="column in columns" :field="column.field" :header="column.header"
+                            :show-filter-menu="false" :style="{ minWidth: '14rem' }">
+                        <template #filter>
+                            <IconField v-if="column.field != 'roles'"
+                                       iconPosition="left" class="flex align-items-center">
+                                <InputIcon>
+                                    <i class="pi pi-search" />
+                                </InputIcon>
+                                <InputText v-model="filter[column.field]"
+                                           :placeholder="searchText(column.header)" />
+                            </IconField>
+                        </template>
+                        <template #body="{ data }" v-if="column.field == 'roles'">
+                            {{ data.roles.join(', ') }}
+                        </template>
+                    </Column>
                     <Column>
                         <template #body="{ data }">
                             <Button @click="() => showPopup(data)">Edit</Button>
@@ -192,7 +187,6 @@ const addAdmin = () => {
                     </Column>
                 </DataTable>
             </div>
-            <Button @click="showAdminAddPopup">Add admin</Button>
         </Title>
     </AdminLayout>
     <Dialog v-model:visible="popupEdit" header="Edit user" :style="{ width: '25rem' }" class="flex" id="editDialog">
@@ -201,7 +195,7 @@ const addAdmin = () => {
             <label class="font-semibold w-6rem">{{ data.header }}</label>
             <span>{{ editItem[data.field] }}</span>
         </div>
-        <div v-for="role in roles" class="flex align-items-center gap-3 mb-3">
+        <div v-for="role in roles.toSpliced(0, 1)" class="flex align-items-center gap-3 mb-3">
             <label class="font-semibold w-6rem">{{ role }}</label>
             <InputSwitch :model-value="editItem.roles.includes(role)" @click="() => updateRole(role)"/>
         </div>