perf: make use of computed and use same var

src/pages/05_quotation/QuotationForm.vue

@@ -11,7 +11,7 @@ import {
 import { ProductTree, quotationProductTree } from './utils';
 
 // NOTE: Import stores
-import { dateFormat, calculateAge } from 'src/utils/datetime';
+import { dateFormat, calculateAge, dateFormatJS } from 'src/utils/datetime';
 import { useEmployeeForm } from 'src/pages/03_customer-management/form';
 import { useQuotationStore } from 'src/stores/quotations';
 import useProductServiceStore from 'stores/product-service';
@@ -29,7 +29,6 @@ import { runOcr, parseResultMRZ } from 'src/utils/ocr';
 import { View } from './types.ts';
 import {
   PayCondition,
-  PaySplit,
   ProductServiceList,
   QuotationPayload,
 } from 'src/stores/quotations/types';
@@ -86,7 +85,7 @@ import BadgeComponent from 'src/components/BadgeComponent.vue';
 import PaymentForm from './PaymentForm.vue';
 import { api } from 'src/boot/axios';
 import { RouterLink, useRoute } from 'vue-router';
-import { initLang, initTheme } from 'src/utils/ui';
+import { initLang, initTheme, Lang } from 'src/utils/ui';
 import { convertTemplate } from 'src/utils/string-template';
 
 type Node = {
@@ -166,6 +165,30 @@ const selectedWorker = ref<
     }[];
   })[]
 >([]);
+const selectedWorkerItem = computed(() =>
+  selectedWorker.value.map((e) => ({
+    foreignRefNo: e.employeePassport
+      ? e.employeePassport[0]?.number || '-'
+      : '-',
+    employeeName:
+      locale.value === Lang.English
+        ? `${e.firstNameEN} ${e.lastNameEN}`
+        : `${e.firstName} ${e.lastName}`,
+    birthDate: dateFormatJS({ date: e.dateOfBirth }),
+    gender: e.gender,
+    age: calculateAge(e.dateOfBirth),
+    nationality: optionStore.mapOption(e.nationality),
+    documentExpireDate:
+      e.employeePassport !== undefined &&
+      e.employeePassport[0]?.expireDate !== undefined
+        ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
+        : '-',
+    imgUrl: e.selectedImage
+      ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
+      : '',
+    status: e.status,
+  })),
+);
 const workerList = ref<Employee[]>([]);
 
 const selectedProductGroup = ref('');
@@ -460,6 +483,7 @@ async function assignToProductServiceList() {
 
     productServiceList.value = quotationFormData.value.productServiceList.map(
       (v) => ({
+        id: v.id!,
         installmentNo: v.installmentNo || 0,
         workerIndex: v.workerIndex || [0],
         vat: v.vat || 0,
@@ -1456,30 +1480,7 @@ async function getWorkerFromCriteria(
                   "
                   :readonly="readonly"
                   fallback-img="/images/employee-avatar.png"
-                  :rows="
+                  :rows="selectedWorkerItem"
-                    selectedWorker.map((e: Employee) => ({
-                      foreignRefNo: e.employeePassport
-                        ? e.employeePassport[0]?.number || '-'
-                        : '-',
-                      employeeName:
-                        $i18n.locale === 'eng'
-                          ? `${e.firstNameEN} ${e.lastNameEN}`
-                          : `${e.firstName} ${e.lastName}`,
-                      birthDate: dateFormat(e.dateOfBirth),
-                      gender: e.gender,
-                      age: calculateAge(e.dateOfBirth),
-                      nationality: optionStore.mapOption(e.nationality),
-                      documentExpireDate:
-                        e.employeePassport !== undefined &&
-                        e.employeePassport[0]?.expireDate !== undefined
-                          ? dateFormat(e.employeePassport[0]?.expireDate)
-                          : '-',
-                      imgUrl: e.selectedImage
-                        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
-                        : '',
-                      status: e.status,
-                    }))
-                  "
                   @delete="(i) => deleteItem(selectedWorker, i)"
                 />
               </div>
@@ -1521,29 +1522,7 @@ async function getWorkerFromCriteria(
                   :max-installment="quotationFormData.paySplitCount"
                   :readonly="readonly"
                   :agent-price="agentPrice"
-                  :employee-rows="
+                  :employee-rows="selectedWorkerItem"
-                    selectedWorker.map((e: Employee) => ({
-                      foreignRefNo:
-                        e.employeePassport !== undefined
-                          ? e.employeePassport[0]?.number || '-'
-                          : '-',
-                      employeeName:
-                        $i18n.locale === 'eng'
-                          ? `${e.firstNameEN} ${e.lastNameEN}`
-                          : `${e.firstName} ${e.lastName}`,
-                      birthDate: dateFormat(e.dateOfBirth),
-                      gender: e.gender,
-                      age: calculateAge(e.dateOfBirth),
-                      nationality: optionStore.mapOption(e.nationality),
-                      documentExpireDate:
-                        e.employeePassport !== undefined &&
-                        e.employeePassport[0]?.expireDate !== undefined
-                          ? dateFormat(e.employeePassport[0]?.expireDate) || '-'
-                          : '-',
-                      imgUrl: `${API_BASE_URL}/customer/${e.id}/image/${e.selectedImage}`,
-                      status: e.status,
-                    }))
-                  "
                   @delete="toggleDeleteProduct"
                   :rows="productService"
                   @update:rows="