refactor: by value at viewHeader

src/pages/05_quotation/peview/ViewForm.vue

@@ -15,7 +15,11 @@ import { commaInput } from 'stores/utils';
 
 // NOTE  Import Types
 import { BankBook, Branch } from 'stores/branch/types';
-import { QuotationPayload } from 'src/stores/quotations/types';
+import {
+  QuotationPayload,
+  CustomerBranchRelation,
+  Details,
+} from 'src/stores/quotations/types';
 
 // NOTE: Import Components
 import ViewHeader from './ViewHeader.vue';
@@ -49,13 +53,16 @@ type SummaryPrice = {
   finalPrice: number;
 };
 
+const customer = ref<CustomerBranchRelation>();
 const branch = ref<Branch>();
 const productList = ref<Product[]>([]);
 const bankList = ref<BankBook[]>([]);
 
 const elements = ref<HTMLElement[]>([]);
 const chunks = ref<Product[][]>([[]]);
-const data = ref<QuotationPayload>();
+const data = ref<
+  QuotationPayload & { customerBranch: CustomerBranchRelation }
+>();
 
 const summaryPrice = ref<SummaryPrice>({
   totalPrice: 0,
@@ -102,6 +109,8 @@ function getHeight(el: HTMLElement) {
   return height;
 }
 
+const details = ref<Details>();
+
 onMounted(async () => {
   let str =
     localStorage.getItem('quotation-preview') ||
@@ -119,15 +128,29 @@ onMounted(async () => {
 
   data.value = 'data' in parsed ? parsed.data : undefined;
 
+  customer.value = parsed.meta.source.customerBranch;
+
   if (data.value) {
-    const res = await branchStore.fetchById(data.value?.registeredBranchId);
+    details.value = {
+      code: parsed.meta.source.code,
+      createdAt: parsed.meta.source.createdAt,
+      createdBy: `${parsed.meta.createdBy} ${parsed.meta.source.createdBy.telephoneNo}`,
+      payCondition: parsed.meta.source.payCondition,
+      contactName: parsed.meta.source.contactName,
+      contactTel: parsed.meta.source.contactTel,
+      workName: parsed.meta.source.workName,
+    };
 
-    if (res) {
+    const resBranch = await branchStore.fetchById(
-      branch.value = res;
+      data.value?.registeredBranchId,
+    );
 
-      bankList.value = res.bank.map((v) => ({
+    if (resBranch) {
+      branch.value = resBranch;
+
+      bankList.value = resBranch.bank.map((v) => ({
         ...v,
-        bankUrl: `${baseUrl}/branch/${res.id}/bank-qr/${v.id}?ts=${Date.now()}`,
+        bankUrl: `${baseUrl}/branch/${resBranch.id}/bank-qr/${v.id}?ts=${Date.now()}`,
       }));
     }
 
@@ -200,7 +223,12 @@ function print() {
   </div>
   <div class="row justify-between container">
     <section class="content" v-for="chunk in chunks">
-      <ViewHeader />
+      <ViewHeader
+        v-if="!!branch && !!customer && !!details"
+        :branch="branch"
+        :customer="customer"
+        :details="details"
+      />
 
       <span
         class="q-mb-sm q-mt-md"
@@ -344,7 +372,12 @@ function print() {
     </section>
 
     <section class="content">
-      <ViewHeader class="q-mb-lg" />
+      <ViewHeader
+        v-if="!!branch && !!customer && !!details"
+        :branch="branch"
+        :customer="customer"
+        :details="details"
+      />
 
       <span
         class="q-mb-sm q-mt-md"
@@ -368,7 +401,12 @@ function print() {
     </section>
 
     <section class="content">
-      <ViewHeader class="q-mb-lg" />
+      <ViewHeader
+        v-if="!!branch && !!customer && !!details"
+        :branch="branch"
+        :customer="customer"
+        :details="details"
+      />
 
       <span
         class="q-mb-sm"

src/pages/05_quotation/peview/ViewHeader.vue

@@ -1,8 +1,18 @@
 <script lang="ts" setup>
+import { dateFormat } from 'src/utils/datetime';
+
 // NOTE: Import stores
 
 // NOTE  Import Types
+import { Branch } from 'src/stores/branch/types';
+import { CustomerBranchRelation, Details } from 'src/stores/quotations/types';
 // NOTE: Import Components
+
+defineProps<{
+  branch: Branch;
+  customer: CustomerBranchRelation;
+  details: Details;
+}>();
 </script>
 
 <template>
@@ -21,53 +31,62 @@
   <article class="detail-card">
     <section class="detail-customer-info">
       <article>
-        <b>
+        <b>บริษัท {{ branch.name }}</b>
-          บริษัท นำคนต่างด้าวมาทำงานในประเทศ จ๊อบส์ เวิร์คเกอร์ เซอร์วิส จำกัด
-          (สำนักงานใหญ่)
-        </b>
         <span>
-          49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
+          หมู่.{{ branch.moo }} ต.{{ branch.subDistrict?.name }} อ.{{
-          10140
+            branch.district?.name
+          }}
+          จ.{{ branch.province?.name }} {{ branch.subDistrict?.zipCode }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>เบอร์โทร 02-018-8688</span>
+        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
-        <span>https://www.jobsworkerservice.com</span>
+        <span>{{ branch.webUrl }}</span>
       </article>
       <article>
         <b>ลูกค้า</b>
         <span>
-          49,51,53 ถ.สุขสวัสดิ์ แขวงราษฏร์บูรณะ เขตราษฏร์บูรณะ กรุงเทพมหานคร
+          ต.{{ customer.subDistrict?.name }} อ.{{
-          10140
+            customer.district?.name
+          }}
+          จ.{{ customer.province?.name }} {{ customer.subDistrict?.zipCode }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี 0225566001988</span>
+        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
-        <span>เบอร์โทร 02-018-8688</span>
+        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
-        <span>https://www.jobsworkerservice.com</span>
       </article>
     </section>
     <section class="detail-quotation-info">
       <div>
         <div>เลขที่ใบเสนอราคา</div>
-        <div>QT240120S0003</div>
+        <div>{{ details.code }}</div>
       </div>
       <div>
         <div>วันที่ใบเสนอราคา</div>
-        <div>20/01/2024 10:36</div>
+        <div>{{ dateFormat(details.createdAt, true, false, true) }}</div>
       </div>
       <div>
         <div>ผู้ขาย</div>
-        <div>นายสดใส ใจงาม 084-363-5222</div>
+        <div>{{ details.createdBy }}</div>
       </div>
       <div>
         <div>เงื่อนไขการชำระ</div>
-        <div>เงินสด - เต็มจำนวน</div>
+        <div>
+          {{
+            {
+              Full: $t('quotation.type.fullAmountCash'),
+              Split: $t('quotation.type.installmentsCash'),
+              BillFull: $t('quotation.type.fullAmountBill'),
+              BillSplit: $t('quotation.type.installmentsBill'),
+            }[details.payCondition]
+          }}
+        </div>
       </div>
       <div>
         <div>ชื่องาน</div>
-        <div>MOU Myanmar (Re-turn)</div>
+        <div>{{ details.workName }}</div>
       </div>
       <div>
         <div>ผู้ติดต่อ</div>
-        <div>สุนี เจริญงาม</div>
+        <div>{{ details.contactName }}</div>
       </div>
       <div>
         <div>วันครบกำหนดชำระ</div>