refactor: by value

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

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
 import { onMounted, nextTick, ref, watch } from 'vue';
+import ThaiBahtText from 'thai-baht-text';
 
 // NOTE: Import stores
 import useOptionStore from 'stores/options';
+import { formatNumberDecimal } from 'stores/utils';
+import { commaInput } from 'stores/utils';
 
 // NOTE  Import Types
 import { BankBook } from 'stores/branch/types';
@@ -10,12 +13,76 @@ import { BankBook } from 'stores/branch/types';
 // NOTE: Import Components
 import ViewHeader from './ViewHeader.vue';
 import BankComponents from './BankComponents.vue';
+import { readonly } from 'vue';
 
 const optionStore = useOptionStore();
 let count = 50;
 
+type Product = {
+  id: string;
+  code: string;
+  detail: string;
+  amount: number;
+  priceUnit: number;
+  discount: number;
+  vat: number;
+  value: number;
+};
+
+type SummaryPrice = {
+  totalPrice: number;
+  totalDiscount: number;
+  vat: number;
+  vatExcluded: number;
+  finalPrice: number;
+};
+
+const summaryPrice = ref<SummaryPrice>({
+  totalPrice: 0,
+  totalDiscount: 0,
+  vat: 0,
+  vatExcluded: 0,
+  finalPrice: 15525,
+});
+
+const note = ref<string>('asdasd\d    dasdasd');
+const productList = ref<Product[]>([
+  {
+    id: 'cm14grwo30002z8ch55keto89',
+    code: 'PG01T01S01001',
+    detail: 'ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
+    amount: 3,
+    priceUnit: 2000.0,
+    discount: 0.0,
+    vat: 7,
+    value: 12750.0,
+  },
+  {
+    id: 'cm14grwo30112z8ch55keto00',
+    code: 'PG01T01S01002',
+    detail:
+      'ค่าบริการและค่าดำเนินงานยื่นขอบัญชีรายชื่อ (Name list) สัญชาติเมียนมา',
+    amount: 3,
+    priceUnit: 7100.0,
+    discount: 0.0,
+    vat: 7,
+    value: 4750.0,
+  },
+  {
+    id: 'Am14grwo30112z8ch55keto00',
+    code: 'PG01T01S01002',
+    detail:
+      'ค่าบริการและค่าดำเนินงานยื่นแจ้งที่พักอาศัยและยื่นแบบแจ้งการจ้างคนต่างด้าว',
+    amount: 1,
+    priceUnit: 14100.0,
+    discount: 100.0,
+    vat: 7,
+    value: 1050.0,
+  },
+]);
+
 const elements = ref<HTMLElement[]>([]);
-const chunks = ref<number[][]>([[]]);
+const chunks = ref<Product[][]>([[]]);
 
 const bankList = ref<BankBook[]>([
   {
@@ -33,13 +100,13 @@ const bankList = ref<BankBook[]>([
 ]);
 
 async function assignData() {
-  for (let i = 0; i < count; i++) {
+  for (let i = 0; i < productList.value.length; i++) {
     let el = elements.value.at(-1);
 
     if (!el) return;
 
     if (getHeight(el) < 500) {
-      chunks.value.at(-1)?.push(1);
+      chunks.value.at(-1)?.push(productList.value[i]);
     } else {
       chunks.value.push([]);
       i--;
@@ -105,20 +172,20 @@ watch(elements, () => {
             <th>{{ $t('peview.productCode') }}</th>
             <th>{{ $t('general.detail') }}</th>
             <th>{{ $t('general.amount') }}</th>
-            <th>{{ $t('peview.pric') }}</th>
+            <th>{{ $t('peview.pricePerUnit') }}</th>
             <th>{{ $t('peview.discount') }}</th>
             <th>{{ $t('peview.vat') }}</th>
             <th>{{ $t('peview.value') }}</th>
           </tr>
-          <tr class="color-tr" v-for="(_, i) in chunk">
+          <tr class="color-tr" v-for="(v, i) in chunk">
             <td class="text-center">{{ i + 1 }}</td>
-            <td>PG01T01S01001</td>
+            <td>{{ v.code }}</td>
-            <td>ค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)</td>
+            <td>{{ v.detail }}</td>
-            <td>3</td>
+            <td>{{ v.amount }}</td>
-            <td>2,000.00</td>
+            <td>{{ formatNumberDecimal(v.priceUnit, 2) }}</td>
-            <td>0.00</td>
+            <td>{{ formatNumberDecimal(v.discount, 2) }}</td>
-            <td>7%</td>
+            <td>{{ formatNumberDecimal(v.vat, 2) }}</td>
-            <td>12,750.00</td>
+            <td>{{ formatNumberDecimal(v.value, 2) }}</td>
           </tr>
         </tbody>
       </table>
@@ -130,32 +197,60 @@ watch(elements, () => {
       >
         <tbody>
           <tr>
-            <td>ยอดรวม</td>
+            <td>{{ $t('general.total') }}</td>
-            <td class="text-right">11,900.00</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.totalPrice, 2) }}
+              ฿
+            </td>
           </tr>
 
           <tr class="bg-color-orange">
-            <td>ส่วนลด</td>
+            <td>{{ $t('general.discount') }}</td>
-            <td class="text-right">100.00</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.totalDiscount, 2) || 0 }} ฿
+            </td>
           </tr>
           <tr>
-            <td>จำนวนเงินหลังหักส่วนลด</td>
+            <td>{{ $t('general.totalAfterDiscount') }}</td>
-            <td class="text-right">0</td>
+            <td class="text-right">
+              {{
+                formatNumberDecimal(
+                  summaryPrice.totalPrice - summaryPrice.totalDiscount,
+                  2,
+                )
+              }}
+              ฿
+            </td>
           </tr>
 
           <tr class="bg-color-orange">
-            <td>จำนวนเงินยกเว้นภาษี</td>
+            <td>{{ $t('general.totalVatExcluded') }}</td>
-            <td class="text-right">0</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.vatExcluded, 2) || 0 }}
+              ฿
+            </td>
           </tr>
 
           <tr>
-            <td>จำนวนเงินยกภาษี</td>
+            <td>{{ $t('general.totalVatIncluded') }}</td>
-            <td class="text-right">100.00</td>
+            <td class="text-right">
+              {{
+                formatNumberDecimal(
+                  summaryPrice.totalPrice -
+                    summaryPrice.totalDiscount +
+                    summaryPrice.vat,
+                  2,
+                )
+              }}
+              ฿
+            </td>
           </tr>
 
           <tr class="bg-color-orange">
-            <td>ภาษีมูลค่าเพิ่ม 7%</td>
+            <td>{{ $t('general.vat', { msg: '7%' }) }}</td>
-            <td class="text-right">100.00</td>
+            <td class="text-right">
+              {{ formatNumberDecimal(summaryPrice.vat, 2) }} ฿
+            </td>
           </tr>
         </tbody>
       </table>
@@ -165,7 +260,7 @@ watch(elements, () => {
           class="column set-width bg-color-orange full-height"
           style="padding: 12px"
         >
-          (หนึ่งหมื่นเจ็ดพันหกร้อยห้าสิบห้าบาท)
+          ({{ ThaiBahtText(summaryPrice.finalPrice) }})
         </div>
         <div
           class="column text-right border-5"
@@ -180,7 +275,10 @@ watch(elements, () => {
               padding: 4px;
             "
           >
-            11,800.00
+            {{
+              formatNumberDecimal(Math.max(summaryPrice.finalPrice, 0), 2) || 0
+            }}
+            ฿
           </span>
         </div>
       </div>
@@ -202,30 +300,14 @@ watch(elements, () => {
         หมายเหตุ
       </span>
 
-      <div
+      <div class="border-5 q-mb-md" style="width: 100%">
-        class="surface-0 border-5 q-mb-md"
+        <q-input
-        style="width: 100%; padding: 8px 16px"
+          v-model="note"
-      >
+          readonly
-        <table style="width: 30%" class="q-mb-md" cellpadding="0">
+          filled
-          <tbody>
+          type="textarea"
-            <tr v-for="(_, i) in Array(5)">
+          style="background: none"
-              <td class="text-center">{{ i + 1 }}</td>
+        />
-              <td>1CC6613334</td>
-              <td>MR. ZAYAR LIN</td>
-            </tr>
-          </tbody>
-        </table>
-
-        สิ่งที่ลูกค้าได้รับ
-
-        <table style="width: 30%" class="q-mt-md" cellpadding="0">
-          <tbody>
-            <tr v-for="(_, i) in Array(5)">
-              <td class="text-center">{{ i + 1 }}</td>
-              <td>ใบอนุญาตทำงาน 2 ปี</td>
-            </tr>
-          </tbody>
-        </table>
       </div>
 
       <span