feat: [#659] added search box for filtering users by username

Author: mario-nt

pages/admin/settings/users.vue

@@ -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="flex flex-wrap gap-2">
+        <input
+          v-model="searchQuery"
+          name="search"
+          type="text"
+          class="py-2 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) => {