feat: ทำแบ่งหน้า

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

@@ -4,22 +4,34 @@ import AppBox from 'components/app/AppBox.vue';
 import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
 import { onMounted } from 'vue';
 import useCustomerStore from 'src/stores/customer';
-import { CustomerBranch, Customer } from 'src/stores/customer/types';
+import {
+  CustomerBranch,
+  Customer,
+  CustomerType,
+} from 'src/stores/customer/types';
+import { watch } from 'vue';
 
 const userCustomer = useCustomerStore();
-const { fetchListById } = userCustomer;
+const { fetchListById, fetchListBranch } = userCustomer;
 
 const inputSearch = ref<string>('');
 
 const branch = defineModel<CustomerBranch[]>('branch');
 const currentCustomerName = defineModel<string>('currentCustomerName');
-const currentCustomerUrlImage = ref<string | null>();
 
-const returnCustomer = ref<Customer & { branch: CustomerBranch[] }>();
+const currentCustomerUrlImage = defineModel<string | null>(
+  'currentCustomerUrlImage',
+);
+
+const currentPageBranch = ref<number>(1);
+const maxPageBranch = ref<number>(1);
+const pageSizeBranch = ref<number>(30);
+
 const prop = withDefaults(
   defineProps<{
     color?: 'purple' | 'green';
     customerId: string;
+    customerType: CustomerType;
   }>(),
   {
     color: 'green',
@@ -28,21 +40,44 @@ const prop = withDefaults(
 
 const emit = defineEmits<{
   (e: 'back'): void;
-  (
+  (e: 'viewDetail', branch: CustomerBranch[]): void;
-    e: 'viewDetail',
-    returnCustomer: Customer & { branch: CustomerBranch[] },
-  ): void;
-
   (e: 'dialog'): void;
 }>();
 
+async function searchBranch() {
+  const resultList = await fetchListBranch({
+    query: inputSearch.value,
+    includeCustomer: true,
+  });
+
+  if (resultList) {
+    branch.value = resultList.result;
+  }
+}
+
 onMounted(async () => {
-  const result = await fetchListById(prop.customerId);
+  const result = await fetchListBranch({
+    customerId: prop.customerId,
+    page: 1,
+    pageSize: pageSizeBranch.value,
+  });
   if (result) {
-    returnCustomer.value = result;
+    currentCustomerName.value = 'dasd';
-    currentCustomerName.value = result.customerName;
+
-    currentCustomerUrlImage.value = result.imageUrl;
+    branch.value = result.result;
-    branch.value = result.branch;
+  }
+});
+
+watch(currentPageBranch, async () => {
+  const resultList = await fetchListBranch({
+    page: currentPageBranch.value,
+    pageSize: pageSizeBranch.value,
+  });
+
+  if (resultList) {
+    currentPageBranch.value = resultList.page;
+    maxPageBranch.value = Math.ceil(resultList.total / pageSizeBranch.value);
+    branch.value = resultList.result;
   }
 });
 </script>
@@ -59,6 +94,7 @@ onMounted(async () => {
           @click="$emit('back')"
           class="q-mr-md"
         />
+
         <q-card-section
           class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
           :class="{
@@ -113,6 +149,7 @@ onMounted(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"
@@ -150,15 +187,32 @@ onMounted(async () => {
         </q-btn>
       </div>
     </div>
-    <div class="row q-pa-lg q-col-gutter-xl" v-if="!!returnCustomer">
+    <div class="row q-pa-lg q-col-gutter-xl" style="min-height: 350px">
       <div v-for="(br, i) in branch" :key="i" class="col-4">
         <BranchCardCustomer
           :data="br"
-          @view-detail="emit('viewDetail', { ...returnCustomer, branch: [br] })"
+          @view-detail="emit('viewDetail', [br])"
         />
       </div>
     </div>
+
+    <div class="row flex-center q-pb-md">
+      <q-pagination
+        v-model="currentPageBranch"
+        :max="maxPageBranch"
+        direction-links
+        gutter="sm"
+      />
+    </div>
   </AppBox>
 </template>
 
-<style scoped></style>
+<style scoped>
+.color__purple {
+  background: hsl(var(--purple-11-hsl));
+}
+
+.color__green {
+  background: hsl(var(--teal-9-hsl));
+}
+</style>