fix: แก้ layout แบ่งหน้า

src/components/03_customer-management/CustomerInfoComponent.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
-import AppBox from 'components/app/AppBox.vue';
+
-import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
+import { Status } from 'src/stores/types';
-import { onMounted } from 'vue';
 import useCustomerStore from 'src/stores/customer';
 import { CustomerBranch, CustomerType } from 'src/stores/customer/types';
-import { watch } from 'vue';
+
-import { Status } from 'src/stores/types';
+import AppBox from 'components/app/AppBox.vue';
+import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
+import NoData from 'components/NoData.vue';
 
 const userCustomer = useCustomerStore();
 const { fetchListBranch } = userCustomer;
@@ -21,6 +23,7 @@ const currentCustomerUrlImage = defineModel<string | null>(
 );
 
 const currentStatus = ref<Status | 'All'>('All');
+const totalBranch = ref(0);
 
 const currentPageBranch = ref<number>(1);
 const maxPageBranch = ref<number>(1);
@@ -29,6 +32,7 @@ const pageSizeBranch = ref<number>(30);
 const prop = withDefaults(
   defineProps<{
     color?: 'purple' | 'green';
+
     customerId: string;
     customerType: CustomerType;
   }>(),
@@ -43,17 +47,6 @@ const emit = defineEmits<{
   (e: 'dialog'): void;
 }>();
 
-async function searchBranch() {
-  const resultList = await fetchListBranch({
-    query: inputSearch.value,
-    includeCustomer: true,
-  });
-
-  if (resultList) {
-    branch.value = resultList.result;
-  }
-}
-
 onMounted(async () => {
   await fetchList();
 });
@@ -61,7 +54,8 @@ onMounted(async () => {
 async function fetchList() {
   const result = await fetchListBranch({
     customerId: prop.customerId,
-    page: 1,
+    query: !!inputSearch.value ? inputSearch.value : undefined,
+    page: currentPageBranch.value,
     pageSize: pageSizeBranch.value,
     includeCustomer: true,
     status:
@@ -72,27 +66,16 @@ async function fetchList() {
           : 'INACTIVE',
   });
   if (result) {
-    if (currentStatus.value !== 'INACTIVE') {
+    totalBranch.value = result.total;
-      currentCustomerName.value = result.result[0].customer?.customerName ?? '';
-    }
     maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
     branch.value = result.result;
+
+    console.log(branch.value);
   }
 }
 
-watch(currentPageBranch, async () => {
+watch(inputSearch, async () => {
-  const resultList = await fetchListBranch({
+  await fetchList();
-    customerId: prop.customerId,
-    page: currentPageBranch.value,
-    pageSize: pageSizeBranch.value,
-  });
-
-  if (resultList) {
-    currentPageBranch.value = resultList.page;
-
-    maxPageBranch.value = Math.ceil(resultList.total / pageSizeBranch.value);
-    branch.value = resultList.result;
-  }
 });
 
 watch(currentStatus, async () => {
@@ -162,7 +145,6 @@ watch(currentStatus, async () => {
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="inputSearch"
           debounce="500"
-          @update:model-value="searchBranch()"
         ></q-input>
         <q-btn
           icon="mdi-tune-vertical-variant"
@@ -200,7 +182,13 @@ watch(currentStatus, async () => {
         </q-btn>
       </div>
     </div>
-    <div class="row q-pa-lg q-col-gutter-xl" style="min-height: 350px">
+    <div
+      class="row q-pa-lg q-col-gutter-xl"
+      :class="{ 'justify-center': totalBranch === 0 }"
+      style="min-height: 350px"
+    >
+      <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />
+
       <div
         v-for="(br, i) in branch?.sort((a, b) => a.branchNo - b.branchNo)"
         :key="i"
@@ -224,12 +212,19 @@ watch(currentStatus, async () => {
       </div>
     </div>
 
-    <div class="row flex-center q-pb-md">
+    <div class="row justify-between q-pb-md q-px-lg">
-      <q-pagination
+      <div class="app-text-muted">
-        v-model="currentPageBranch"
+        {{
-        :max="maxPageBranch"
+          $t('recordsPage', {
-        direction-links
+            resultcurrentPage: branch?.length,
-        gutter="sm"
+            total: totalBranch,
+          })
+        }}
+      </div>
+      <PaginationComponent
+        v-model:current-page="currentPageBranch"
+        v-model:max-page="maxPageBranch"
+        :fetch-data="async () => await fetchList()"
       />
     </div>
   </AppBox>

src/pages/03_customer-management/MainPage.vue

@@ -1489,6 +1489,7 @@ watch([inputSearch, currentStatus], async () => {
               }"
               @enter-card="
                 () => {
+                  currentCustomerName = i.customerName;
                   customerType = i.customerType;
                   currentCustomerUrlImage = i.imageUrl;
                   currentCustomerId = i.id;
@@ -2158,7 +2159,12 @@ watch([inputSearch, currentStatus], async () => {
         onSubmitCustomerBranch();
       }
     "
-    :close="() => {}"
+    :close="
+      () => {
+        clearForm();
+        dialogInputCustomerBranchForm = false;
+      }
+    "
   >
     <template #address>
       <!-- <FormCustomerBranch separator dense outlined /> -->