fix: add search functionality single team page

desk/src/pages/desk/team/TeamSingle.vue

@@ -91,8 +91,14 @@
     <Dialog v-model="showDelete" :options="deleteDialogOptions" />
     <Dialog v-model="showAddMember" :options="addMemberDialogOptions">
       <template #body-content>
-        <div class="space-y-2">
-          <div v-if="agentStore.agents.data.length === 0">
+        <div class="space-y-4">
+          <FormControl
+            type="text"
+            v-model="query"
+            placeholder="Search agents"
+            @input="searchMembers()"
+          />
+          <div v-if="_agents.length === 0">
             <p class="text-base text-gray-600">
               No agents found, please add
               <span
@@ -103,25 +109,30 @@
               in the system.
             </p>
           </div>
-          <div
-            v-for="agent in agentStore.agents.data"
-            v-else
-            :key="agent.name"
-            class="flex items-center justify-between"
-          >
-            <div class="flex items-center gap-2">
-              <Avatar :label="agent.agent_name" :image="agent.user_image" />
-              <div class="text-base">
-                {{ agent.agent_name }}
+          <div v-else class="flex flex-col gap-4">
+            <div class="flex flex-col gap-2">
+              <div
+                v-for="agent in _agents"
+                :key="agent.name"
+                class="flex items-center justify-between"
+              >
+                <div class="flex items-center gap-2">
+                  <Avatar :label="agent.agent_name" :image="agent.user_image" />
+                  <div class="text-base">
+                    {{ agent.agent_name }}
+                  </div>
+                </div>
+                <Button
+                  :disabled="
+                    !!team.doc?.users.find((u) => u.user === agent.user)
+                  "
+                  label="Add"
+                  theme="gray"
+                  variant="outline"
+                  @click="addMember(agent.user)"
+                />
               </div>
             </div>
-            <Button
-              :disabled="!!team.doc?.users.find((u) => u.user === agent.user)"
-              label="Add"
-              theme="gray"
-              variant="outline"
-              @click="addMember(agent.user)"
-            />
           </div>
         </div>
       </template>
@@ -151,6 +162,7 @@ import IconMoreHorizontal from "~icons/lucide/more-horizontal";
 import IconPlus from "~icons/lucide/plus";
 import Pill from "@/components/Pill.vue";
 import LayoutHeader from "@/components/LayoutHeader.vue";
+import { onMounted } from "vue";
 
 const props = defineProps({
   teamId: {
@@ -262,6 +274,23 @@ function addMember(user: string) {
   });
 }
 
+// Search members
+const query = ref("");
+const searchedAgents = ref([]);
+const _agents = computed(() => {
+  return searchedAgents.value.length || query.value.length
+    ? searchedAgents.value
+    : agentStore.agents.data;
+});
+function searchMembers() {
+  const filteredAgents = agentStore.searchAgents(query.value);
+  searchedAgents.value = filteredAgents;
+}
+
+onMounted(() => {
+  agentStore.agents.reload();
+});
+
 function removeMember(member: string) {
   const users = team.doc.users.filter((u) => u.user !== member);
   team.setValue.submit({

desk/src/stores/agent.ts

@@ -7,7 +7,6 @@ export const useAgentStore = defineStore("agent", () => {
     doctype: "HD Agent",
     fields: ["name", "agent_name", "user", "user.user_image"],
     filters: { is_active: 1 },
-    auto: true,
     pageLength: 99999,
   });
 
@@ -18,8 +17,15 @@ export const useAgentStore = defineStore("agent", () => {
     }))
   );
 
+  function searchAgents(query: string) {
+    return agents.data.filter((a) =>
+      a.user?.toLowerCase().includes(query.toLowerCase())
+    );
+  }
+
   return {
     dropdown,
     agents,
+    searchAgents,
   };
 });