Merge #697: Admins should be able to search users

6697a99 deps: [#659] updated dependencies (Mario)
b1859fa refactor: [#659] moved search box slightly to the left (Mario)
d426d93 refactor: [#659] adjusted styling for the search box (Mario)
74cbcd5 feat: [#659] added search box for filtering users by username (Mario)

Pull request description:

  Resolves #659

ACKs for top commit:
  josecelano:
    ACK 6697a99

Tree-SHA512: ce016171e9f5269b1e8457f813bb95e58150f4c6f70674b608a9a704c2b6634b51037dc55462d8c5e9872e7714959c0a4d96426a28d3e7e10e70df4eaedcb600

Author: josecelano

package-lock.json

@@ -48,7 +48,7 @@
     "dompurify": "^3.1.6",
     "marked": "^12.0.2",
     "notiwind-ts": "^2.0.2",
-    "torrust-index-api-lib": "^3.1.0",
+    "torrust-index-api-lib": "^3.2.0",
     "torrust-index-types-lib": "^3.1.0",
     "uuid": "^9.0.1"
   }

package.json

@@ -1,6 +1,16 @@
 <template>
   <div class="flex flex-col max-w-md gap-2 mx-auto">
     <div class="flex flex-col gap-2">
+      <div class="pl-0.5 flex flex-wrap gap-2">
+        <input
+          v-model="searchQuery"
+          name="search"
+          type="text"
+          class="h-8 border-2 input input-bordered rounded-2xl placeholder-neutral-content"
+          :placeholder="`Filter by username`"
+        >
+
+      </div>
       <UserTable :user-profiles="userProfiles" />
       <Pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total-results="userProfilesTotal" />
     </div>
@@ -24,15 +34,18 @@ const pageSize: Ref<number> = ref(isNaN(queryPageSize) ? defaultPageSize : query
 const userProfiles: Ref<Array<UserProfile>> = ref([]);
 const userProfilesTotal = ref(0);
 const currentPage: Ref<number> = ref(Number(route.query?.page as string) || 1);
+const searchQuery: Ref<string> = ref(null);
 
 watch(() => route.fullPath, () => {
+  searchQuery.value = route.query.search as string ?? null;
   currentPage.value = isNaN(route.query.page) ? 1 : parseInt(route.query.page);
   pageSize.value = isNaN(route.query.pageSize) ? defaultPageSize : parseInt(route.query.pageSize);
 });
 
-watch(currentPage, () => {
+watch([searchQuery, currentPage], () => {
   router.push({
     query: {
+      search: searchQuery.value,
       pageSize: pageSize.value,
       page: currentPage.value
     }
@@ -45,6 +58,7 @@ watch(currentPage, () => {
 watch(pageSize, () => {
   router.push({
     query: {
+      search: searchQuery.value,
       pageSize: pageSize.value,
       page: 1
     }
@@ -54,19 +68,22 @@ watch(pageSize, () => {
 });
 
 onActivated(() => {
+  searchQuery.value = route.query.search as string ?? null;
   pageSize.value = route.query.pageSize as number ?? defaultPageSize;
   currentPage.value = route.query.page as number ?? 1;
 });
 
 onMounted(() => {
+  searchQuery.value = route.query.search as string ?? null;
   loadUserProfiles();
 });
 
 function loadUserProfiles () {
   rest.value.user.getUserProfiles(
     {
       pageSize: pageSize.value,
-      page: currentPage.value
+      page: currentPage.value,
+      searchQuery: searchQuery.value
     }
   )
     .then((v) => {