feat: Add user search functionality

- Remove search input from Team view
- Add search input to Users view
- Implement debounced search in Users view
- Update API to support user search by full name

Author: Mahmoud-Emad

client/src/views/TeamView.vue

@@ -25,15 +25,7 @@
         </v-card-title>
       </v-card>
     </div>
-
-    <div class="d-flex align-center justify-space-between mt-6 mb-4">
-      <h3>Team Members</h3>
-      <v-text-field v-model="searchQuery" label="Search by name" prepend-inner-icon="mdi-magnify" variant="outlined"
-        density="compact" hide-details clearable class="search-field" @update:model-value="onSearchChange"
-        style="max-width: 300px;">
-      </v-text-field>
-    </div>
-
+    <h3>Team Members</h3>
     <v-card class="" v-if="teamUsers.length">
       <v-row>
         <v-col class="d-flex flex-wrap justify-start">
@@ -50,8 +42,7 @@
         rounded="circle"></v-pagination>
     </v-card>
     <v-card v-else class="pa-15 mt-15 d-flex justify-center text-center" variant="plain">
-      <span v-if="searchQuery">No users found matching "{{ searchQuery }}". Try a different search.</span>
-      <span v-else>Seems like there are no users. Please try changing the filters and attempting again.</span>
+      Seems like there are no users. Please try changing the filters and attempting again.
     </v-card>
   </v-container>
 </template>
@@ -62,7 +53,6 @@ import { watch, ref, onMounted } from 'vue'
 import profileImage from '../components/profileImage.vue'
 import UserCard from '@/components/userCard.vue'
 import type { Api } from '@/types';
-import { debounce } from 'lodash';
 
 export default {
   name: 'TeamView',
@@ -85,19 +75,14 @@ export default {
     const teamPage = ref(1)
     const teamCount = ref<number>(0)
     const teamUsers = ref<any[]>([])
-    const searchQuery = ref('')
 
     function displayValue(value: any) {
       return value ?? '-'
     }
 
-    // Function to list team based on page and search query
+    // Function to list team based on page and itemsPerPage
     async function listTeam(): Promise<Api.User[]> {
-      const query: any = { page: teamPage.value }
-      if (searchQuery.value.trim()) {
-        query.search = searchQuery.value.trim()
-      }
-      const res = await $api.users.team.list(query)
+      const res = await $api.users.team.list({ page: teamPage.value })
       if (res && res.count) {
         teamCount.value = Math.ceil(res.count / 12)
       } else {
@@ -106,18 +91,6 @@ export default {
       return res!.results
     }
 
-    // Debounced search handler
-    const performSearch = debounce(async () => {
-      loading.value = true
-      teamPage.value = 1  // Reset to first page when searching
-      teamUsers.value = await listTeam()
-      loading.value = false
-    }, 300)
-
-    function onSearchChange() {
-      performSearch()
-    }
-
     watch(teamPage,
       async () => {
         loading.value = true
@@ -145,8 +118,6 @@ export default {
       teamPage,
       teamLeads,
       displayValue,
-      searchQuery,
-      onSearchChange,
     }
   }
 }

client/src/views/UsersView.vue

@@ -12,14 +12,18 @@
           You can change the selected office to discover the team in other offices.
         </v-alert>
       </v-col>
-      <v-col cols="6" sm="6" md="6" class="pa-1">
+      <v-col cols="12" sm="4" md="4" class="pa-1">
         <v-autocomplete clearable v-model="selectedOffice" :items="offices" label="Office" return-object
           item-title="country" @click:clear="clearFilter('office')" @update:model-value="applyFilters" />
       </v-col>
-      <v-col cols="6" sm="6" md="6" class="pa-1">
+      <v-col cols="12" sm="4" md="4" class="pa-1">
         <v-autocomplete clearable v-model="selectedTeam" :items="teams" label="Team" return-object item-title="name"
           item-value="id" @click:clear="clearFilter('team')" @update:model-value="applyFilters" />
       </v-col>
+      <v-col cols="12" sm="4" md="4" class="pa-1">
+        <v-text-field v-model="searchQuery" label="Search by name" prepend-inner-icon="mdi-magnify" clearable
+          @click:clear="clearFilter('search')" @update:model-value="onSearchChange" />
+      </v-col>
     </v-row>
 
     <template v-if="isLoading">
@@ -51,6 +55,7 @@ import { useRoute, useRouter } from "vue-router";
 import { $api } from "@/clients";
 import UserCard from "@/components/userCard.vue";
 import type { Api } from "@/types";
+import { debounce } from "lodash";
 
 export default {
   name: "UsersView",
@@ -63,6 +68,7 @@ export default {
     const users = ref<Api.User[]>([]);
     const selectedOffice = ref<Api.LocationType | null>(null);
     const selectedTeam = ref<{ name: string, id: number } | null>(null);
+    const searchQuery = ref("");
     const officePage = ref(1);
     const usersPage = ref(1);
     const officeCount = ref(0);
@@ -89,16 +95,18 @@ export default {
       const res = await $api.users.list({
         location_id: selectedOffice?.value?.id || "",
         team_name: selectedTeam?.value?.name || "",
+        search: searchQuery.value.trim() || "",
         page: usersPage.value,
       });
       usersCount.value = Math.ceil(res!.count / 12);
       users.value = res!.results;
       isLoading.value = false;
     };
 
-    const clearFilter = (filter: "office" | "team") => {
+    const clearFilter = (filter: "office" | "team" | "search") => {
       if (filter === "office") selectedOffice.value = null;
       if (filter === "team") selectedTeam.value = null;
+      if (filter === "search") searchQuery.value = "";
       applyFilters();
     };
 
@@ -108,10 +116,21 @@ export default {
         query: {
           location_id: selectedOffice.value?.id || "",
           team_name: selectedTeam.value?.name || "",
+          search: searchQuery.value.trim() || "",
         },
       });
     };
 
+    // Debounced search to avoid too many API calls
+    const performSearch = debounce(() => {
+      usersPage.value = 1;
+      applyFilters();
+    }, 300);
+
+    const onSearchChange = () => {
+      performSearch();
+    };
+
     const initialize = async () => {
       isLoading.value = true;
       await Promise.all([fetchOffices(), fetchUsers()]);
@@ -123,6 +142,9 @@ export default {
       if (route.query.team_name) {
         selectedTeam.value = teams.find((team) => team.name === route.query.team_name) as { name: string, id: number };
       }
+      if (route.query.search) {
+        searchQuery.value = route.query.search as string;
+      }
       isLoading.value = false;
     };
 
@@ -139,17 +161,24 @@ export default {
       await fetchUsers();
     });
 
+    // Watch for route query changes (e.g., when search is applied)
+    watch(() => route.query, () => {
+      fetchUsers();
+    }, { deep: true });
+
     return {
       offices,
       users,
       teams,
       selectedOffice,
       selectedTeam,
+      searchQuery,
       usersPage,
       usersCount,
       isLoading,
       clearFilter,
       applyFilters,
+      onSearchChange,
     };
   },
 };

server/cshr/views/users.py

@@ -49,17 +49,27 @@ def get_queryset(self) -> Response:
         """get all users in the system for a normal user"""
         location_id = ""
         team_name = ""
+        user_full_name = ""
+        
         if self.request.query_params.get("location_id"):
             location_id = self.request.query_params.get("location_id")
 
         if self.request.query_params.get("team_name"):
             team_name = self.request.query_params.get("team_name")
+        
+        if self.request.query_params.get("user_full_name"):
+            user_full_name = self.request.query_params.get("user_full_name").strip()
 
         if len(location_id) > 0 or len(team_name) > 0:
             options = {"location": {"id": location_id}, "team": {"name": team_name}}
             query_set = get_all_of_users(options)
         else:
             query_set = get_all_of_users()
+        
+        # Filter by search query (full name)
+        if user_full_name:
+            query_set = query_set.filter(full_name__icontains=user_full_name)
+        
         return query_set
 
 
@@ -70,17 +80,10 @@ class TeamAPIView(ListAPIView):
 
     def get_queryset(self) -> Response:
         """
-        Get all team information, Team leaders and team members.
-        Supports filtering by 'search' query parameter for full_name.
+        Get all team information, Team leaders and team members
         """
         user: User = self.request.user
         query_set: List[User] = get_user_team_members(user)
-        
-        # Filter by search query (full name)
-        search = self.request.query_params.get("search", "").strip()
-        if search:
-            query_set = query_set.filter(full_name__icontains=search)
-        
         return query_set