feat: search user

src/pages/02_personnel-management/MainPage.vue

@@ -251,6 +251,7 @@ async function onSubmit() {
 
         userStore.fetchList({
           includeBranch: true,
+          query: !!inputSearch.value ? inputSearch.value : undefined,
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
@@ -281,6 +282,7 @@ async function onSubmit() {
         selectorLabel.value = formData.value.userType;
         userStore.fetchList({
           includeBranch: true,
+          query: !!inputSearch.value ? inputSearch.value : undefined,
           userType: selectorLabel.value ?? undefined,
         });
         typeStats.value = await userStore.typeStats();
@@ -302,6 +304,7 @@ async function onDelete(id: string) {
       await userStore.deleteById(id);
       await userStore.fetchList({
         includeBranch: true,
+        query: !!inputSearch.value ? inputSearch.value : undefined,
         userType: selectorLabel.value ?? undefined,
       });
       typeStats.value = await userStore.typeStats();
@@ -402,6 +405,7 @@ async function assignFormData(idEdit: string) {
 onMounted(async () => {
   await userStore.fetchList({
     includeBranch: true,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
     userType: selectorLabel.value ?? undefined,
   });
   userStore.userOption.roleOpts.length === 0
@@ -427,6 +431,7 @@ watch(
     mapUserType(label);
     await userStore.fetchList({
       includeBranch: true,
+      query: !!inputSearch.value ? inputSearch.value : undefined,
       userType: selectorLabel.value ?? undefined,
     });
     const res = await branchStore.userStats(label);
@@ -435,6 +440,13 @@ watch(
     }
   },
 );
+
+watch(inputSearch, async () => {
+  await userStore.fetchList({
+    pageSize: 9999,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
+  });
+});
 </script>
 
 <template>
@@ -531,6 +543,7 @@ watch(
           outlined
           dense
           label="ค้นหา"
+          debounce="500"
           v-model="inputSearch"
         ></q-input>
       </div>