feat: search paging user

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

@@ -298,11 +298,7 @@ async function onSubmit() {
       }
     }
 
-    userStore.fetchList({
-      includeBranch: true,
-      query: !!inputSearch.value ? inputSearch.value : undefined,
-      userType: selectorLabel.value ?? undefined,
-    });
+    await fetchUserList();
     typeStats.value = await userStore.typeStats();
     const res = await branchStore.userStats(formData.value.userType);
     if (res) {
@@ -337,11 +333,9 @@ async function onSubmit() {
     }
 
     selectorLabel.value = formData.value.userType;
-    userStore.fetchList({
-      includeBranch: true,
-      query: !!inputSearch.value ? inputSearch.value : undefined,
-      userType: selectorLabel.value ?? undefined,
-    });
+
+    await fetchUserList();
+
     typeStats.value = await userStore.typeStats();
     const res = await branchStore.userStats(formData.value.userType);
     if (res) {
@@ -362,11 +356,8 @@ async function onDelete(id: string) {
     message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
     action: async () => {
       await userStore.deleteById(id);
-      await userStore.fetchList({
-        includeBranch: true,
-        query: !!inputSearch.value ? inputSearch.value : undefined,
-        userType: selectorLabel.value ?? undefined,
-      });
+
+      await fetchUserList();
       typeStats.value = await userStore.typeStats();
       flowStore.rotate();
     },
@@ -474,11 +465,8 @@ async function assignFormData(idEdit: string) {
 }
 
 onMounted(async () => {
-  await userStore.fetchList({
-    includeBranch: true,
-    query: !!inputSearch.value ? inputSearch.value : undefined,
-    userType: selectorLabel.value ?? undefined,
-  });
+  await fetchUserList();
+
   userStore.userOption.roleOpts.length === 0
     ? await userStore.fetchRoleOption()
     : '';
@@ -501,11 +489,7 @@ watch(
   () => selectorLabel.value,
   async (label) => {
     mapUserType(label);
-    await userStore.fetchList({
-      includeBranch: true,
-      query: !!inputSearch.value ? inputSearch.value : undefined,
-      userType: selectorLabel.value ?? undefined,
-    });
+    await fetchUserList();
     const res = await branchStore.userStats(label);
     if (res) {
       userStats.value = res;
@@ -513,13 +497,6 @@ watch(
   },
 );
 
-watch(inputSearch, async () => {
-  await userStore.fetchList({
-    pageSize: 9999,
-    query: !!inputSearch.value ? inputSearch.value : undefined,
-  });
-});
-
 watch(
   () => formData.value.userType,
   async () => {
@@ -536,6 +513,24 @@ watch(
     agencyFile.value = [];
   },
 );
+
+const currentPage = ref(1);
+const currentMaxPage = computed(() =>
+  userData.value
+    ? Math.ceil(userData.value?.total / userData.value?.pageSize)
+    : 1,
+);
+
+async function fetchUserList() {
+  await userStore.fetchList({
+    includeBranch: true,
+    page: currentPage.value,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
+    userType: selectorLabel.value ?? undefined,
+  });
+}
+
+watch(inputSearch, async () => await fetchUserList());
 </script>
 
 <template>
@@ -688,7 +683,7 @@ watch(
         @enter-card="openDialog"
         @toggle-status="toggleStatus"
       />
-      <template v-if="userData && userData.total === 0">
+      <template v-if="userData && userData.total === 0 && !inputSearch">
         <div class="col-1 self-end">
           <div class="row">
             <TooltipComponent
@@ -709,6 +704,23 @@ watch(
           />
         </div>
       </template>
+
+      <div
+        v-if="userData?.total === 0"
+        class="row full-width items-center justify-center"
+        style="min-height: 250px"
+      >
+        <NoData :not-found="!!inputSearch" />
+      </div>
+      <div class="row flex-center q-pt-md" v-if="currentMaxPage > 0">
+        <q-pagination
+          v-model="currentPage"
+          :max="currentMaxPage"
+          direction-links
+          active-color="primary"
+          gutter="sm"
+        />
+      </div>
     </AppBox>
   </div>