feat: quotation view

src/pages/05_quotation/MainPage.vue

@@ -56,14 +56,16 @@ import PersonCard from 'src/components/shared/PersonCard.vue';
 import { useRouter } from 'vue-router';
 import ProductServiceForm from './ProductServiceForm.vue';
 
-const flowStore = useFlowStore();
-
 import {
   useCustomerForm,
   useEmployeeForm,
 } from 'src/pages/03_customer-management/form';
 import useCustomerStore from 'stores/customer';
+import { useQuotationStore } from 'src/stores/quotations';
+import QuotationView from './QuotationView.vue';
+import { watch } from 'vue';
 
+const flowStore = useFlowStore();
 const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
   {
     main: [],
@@ -290,13 +292,65 @@ function convertToTree() {
   // NOTE: this is meant to be used inside getService() and getProduct() before return and after return
 }
 
+const quotationStore = useQuotationStore();
+const {
+  data: quotationData,
+  page: quotationPage,
+  pageSize: quotationPageSize,
+  pageMax: quotationPageMax,
+} = storeToRefs(quotationStore);
+
 onMounted(async () => {
-  const ret = await productServiceStore.fetchListProductService({
-    page: 1,
-    pageSize: 9999,
-  });
-  if (ret) productGroup.value = ret.result;
+  {
+    const ret = await productServiceStore.fetchListProductService({
+      page: 1,
+      pageSize: 9999,
+    });
+    if (ret) productGroup.value = ret.result;
+  }
+
+  {
+    const ret = await quotationStore.getQuotationList({
+      page: quotationPage.value,
+      pageSize: quotationPageSize.value,
+    });
+
+    if (ret) {
+      quotationData.value = ret.result;
+      quotationPageMax.value = Math.floor(ret.total / quotationPageSize.value);
+    }
+  }
+
+  flowStore.rotate();
 });
+
+watch(
+  () => pageState.currentTab,
+  async () => {
+    const ret = await quotationStore.getQuotationList({
+      page: quotationPage.value,
+      pageSize: quotationPageSize.value,
+      payCondition:
+        pageState.currentTab !== 'all'
+          ? (
+              {
+                fullAmountCash: 'Full',
+                installmentsCash: 'Split',
+                fullAmountBill: 'BillFull',
+                installmentsBill: 'BillSplit',
+              } as const
+            )[pageState.currentTab]
+          : undefined,
+    });
+
+    if (ret) {
+      quotationData.value = ret.result;
+      quotationPageMax.value = Math.floor(ret.total / quotationPageSize.value);
+    }
+
+    flowStore.rotate();
+  },
+);
 </script>
 
 <template>
@@ -536,7 +590,7 @@ onMounted(async () => {
         </nav>
         <!-- SEC: body content -->
         <article
-          v-if="true"
+          v-if="false"
           class="col surface-2 flex items-center justify-center"
         >
           <CreateButton
@@ -547,20 +601,28 @@ onMounted(async () => {
         </article>
         <article v-else class="col q-pa-md surface-2 scroll">
           <div class="row q-col-gutter-md">
-            <div v-for="n in 5" :key="n" class="col-md-4 col-12">
+            <div v-for="n in quotationData" :key="n.id" class="col-md-4 col-12">
               <QuotationCard
                 :type="
                   pageState.currentTab !== 'all'
                     ? pageState.currentTab
-                    : 'fullAmountCash'
+                    : {
+                        Full: 'fullAmountCash',
+                        Split: 'installmentsCash',
+                        BillFull: 'fullAmountBill',
+                        BillSplit: 'installmentsBill',
+                      }[n.payCondition]
                 "
-                code="QT240120S0002"
-                title="ชื่อใบเสนอราคา"
-                date="20/01/2024 16:00:01"
-                :amount="2"
-                customer-name="เลด้า สวนลุม"
-                reporter="สตีเฟ่น สมัคร"
-                :total-price="1500"
+                :code="n.code"
+                :title="n.workName"
+                :date="new Date(n.createdAt).toLocaleString()"
+                :amount="n.workerCount"
+                :customer-name="
+                  n.customerBranch.registerName ||
+                  `${n.customerBranch.firstName || '-'} ${n.customerBranch.lastName}`
+                "
+                :reporter="n.actorName"
+                :total-price="n.totalPrice"
                 @view="console.log('view')"
                 @edit="console.log('edit')"
                 @link="console.log('link')"