From 30c78ef269176c91b83de44e1df67cd7ba68b0b4 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 8 Oct 2024 13:45:06 +0700
Subject: [PATCH] refactor: add upload file of employee

---
 src/pages/05_quotation/QuotationForm.vue | 189 +++++++++++------------
 src/pages/05_quotation/form.ts           |  85 ++++++++--
 2 files changed, 162 insertions(+), 112 deletions(-)

diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 8f070375..cf5a50fc 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -15,6 +15,7 @@ import useOptionStore from 'stores/options';
 import { useQuotationForm } from './form';
 import useOcrStore from 'stores/ocr';
 import { deleteItem } from 'stores/utils';
+import { runOcr, parseResultMRZ } from 'src/utils/ocr';
 
 // NOTE  Import Types
 import { QuotationPayload } from 'src/stores/quotations/types';
@@ -49,6 +50,7 @@ import {
   uploadFileListEmployee,
   columnsAttachment,
 } from 'src/pages/03_customer-management/constant';
+import { group } from 'node:console';
 
 defineProps<{
   readonly?: boolean;
@@ -80,9 +82,12 @@ const $q = useQuasar();
 const {
   currentFormData: quotationFormData,
   currentFormState: quotationFormState,
+  newWorkerList,
+  fileItemNewWorker,
 } = storeToRefs(quotationForm);
 
 const refSelectZoneEmployee = ref<InstanceType<typeof SelectZone>>();
+const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 const selectedBranchIssuer = ref('');
 const selectedCustomer = ref('');
 const toggleWorker = ref(true);
@@ -91,9 +96,18 @@ const branchId = ref('');
 const date = ref();
 
 const preSelectedWorker = ref<Employee[]>([]);
-const selectedWorker = ref<Employee[]>([]);
+const selectedWorker = ref<
+  (Employee & {
+    attachment?: {
+      name?: string;
+      group?: string;
+      url?: string;
+      file?: File;
+      _meta?: Record<string, any>;
+    }[];
+  })[]
+>([]);
 const workerList = ref<Employee[]>([]);
-const newWorkerList = ref<EmployeeWorker[]>([]);
 
 const agentPrice = ref(false);
 const summaryPrice = ref<{
@@ -141,8 +155,18 @@ const selectedGroup = ref<ProductGroup | null>(null);
 
 const selectedProductServiceId = ref('');
 
-const formDataEmployee = ref<EmployeeWorker>({
-  alienReferencNumber: '',
+const formDataEmployee = ref<
+  EmployeeWorker & {
+    attachment?: {
+      name?: string;
+      group?: string;
+      url?: string;
+      file?: File;
+      _meta?: Record<string, any>;
+    }[];
+  }
+>({
+  passportNo: '',
   documentExpireDate: new Date(),
   lastNameEN: '',
   lastName: '',
@@ -154,6 +178,7 @@ const formDataEmployee = ref<EmployeeWorker>({
   nationality: '',
   gender: '',
   dateOfBirth: new Date(),
+  attachment: [],
 });
 
 const productServiceList = ref<
@@ -163,7 +188,7 @@ const productServiceList = ref<
 function convertDataToFormSubmit() {
   quotationFormData.value.productServiceList = JSON.parse(
     JSON.stringify(
-      productServiceList.value.map((v, i) => ({
+      productServiceList.value.map((v) => ({
         workerIndex: [0, 1],
         discount: 1,
         amount: 1,
@@ -174,11 +199,27 @@ function convertDataToFormSubmit() {
     ),
   );
 
+  selectedWorker.value.forEach((v, i) => {
+    if (v.attachment !== undefined) {
+      v.attachment.forEach((value) => {
+        fileItemNewWorker.value.push({
+          employeeIndex: i,
+          name: value.name,
+          group: value.group as 'passport' | 'visa' | 'in-country-notice',
+          url: value.url,
+          file: value.file,
+          _meta: value._meta,
+        });
+      });
+    }
+  });
+
   quotationFormData.value.worker = JSON.parse(
     JSON.stringify(
-      selectedWorker.value.map((v, i) => {
+      selectedWorker.value.map((v) => {
         if (v.id === undefined) {
-          return v;
+          const { attachment, ...payload } = v;
+          return payload;
         } else {
           return v.id;
         }
@@ -205,7 +246,7 @@ async function getAllProduct(
 
 function setDefaultFormEmployee() {
   formDataEmployee.value = {
-    alienReferencNumber: '',
+    passportNo: '',
     documentExpireDate: new Date(),
     lastNameEN: '',
     lastName: '',
@@ -217,6 +258,7 @@ function setDefaultFormEmployee() {
     nationality: '',
     gender: '',
     dateOfBirth: new Date(),
+    attachment: [],
   };
 
   employeeFormState.value.dialogModal = false;
@@ -769,8 +811,7 @@ watch(
     :title="$t('form.title.create', { name: $t('customer.employee') })"
     :submit="
       () => {
-        newWorkerList.push(formDataEmployee);
-        quotationForm.injectNewEmployee(formDataEmployee, () =>
+        quotationForm.injectNewEmployee({ data: formDataEmployee }, () =>
           setDefaultFormEmployee(),
         );
       }
@@ -899,9 +940,7 @@ watch(
             title="form.field.basicInformation"
             prefixId="dialog"
             dense
-            v-model:alien-reference-number="
-              formDataEmployee.alienReferencNumber
-            "
+            v-model:passport-no="formDataEmployee.passportNo"
             v-model:document-expire-date="formDataEmployee.documentExpireDate"
             class="q-mb-md"
           />
@@ -927,108 +966,68 @@ watch(
 
           <UploadFileGroup
             show-title
-            v-model:current-id="currentFromDataEmployee.id"
-            v-model="currentFromDataEmployee.file"
+            v-model="formDataEmployee.attachment"
             hide-action
-            :group-list="uploadFileListEmployee"
             :menu="uploadFileListEmployee"
             :columns="columnsAttachment"
             :ocr="
               async (group, file) => {
-                const res = await ocrStore.sendOcr({
-                  file: file,
-                  category: group,
-                });
+                if (group === 'passport') {
+                  mrz = await runOcr(file, parseResultMRZ);
 
-                if (res) {
-                  const tempValue = {
-                    status: true,
-                    group,
-                    meta: res.fields,
-                  };
+                  if (mrz !== null) {
+                    const mapMrz = Object.entries(mrz.result).map(
+                      ([key, value]) => ({
+                        name: key,
+                        value: value,
+                      }),
+                    );
+                    const tempValue = {
+                      status: true,
+                      group,
+                      meta: mapMrz,
+                    };
 
-                  return tempValue;
+                    return tempValue;
+                  }
+                } else {
+                  const res = await ocrStore.sendOcr({
+                    file: file,
+                    category: group,
+                  });
+
+                  if (res) {
+                    const tempValue = {
+                      status: true,
+                      group,
+                      meta: res.fields,
+                    };
+
+                    return tempValue;
+                  }
                 }
-                return { status: false, group, meta: [] };
-              }
-            "
-            :auto-save="currentFromDataEmployee.id !== ''"
-            :download="
-              (obj) => {
-                employeeStore.getFile({
-                  parentId: currentFromDataEmployee.id || '',
-                  group: obj.group,
-                  fileId: obj._meta.id,
-                });
+
+                return { status: true, group, meta: [] };
               }
             "
             :delete-item="
-              async (obj) => {
-                const res = await employeeStore.delMeta({
-                  parentId: currentFromDataEmployee.id || '',
-                  group: obj.group,
-                  metaId: obj._meta.id,
-                });
-
-                if (res) {
-                  return true;
-                }
-                return false;
-              }
-            "
-            :save="
-              async (
-                group: 'passport' | 'visa',
-                _meta: any,
-                file: File | undefined,
-              ) => {
-                if (file !== undefined && currentFromDataEmployee.id) {
-                  const res = await employeeStore.postMeta({
-                    parentId: currentFromDataEmployee.id || '',
-                    group,
-                    meta: _meta,
-                    file,
-                  });
-
-                  if (res) {
-                    return true;
-                  }
-                } else {
-                  const { id, employeeId, createdAt, updatedAt, ...payload } =
-                    _meta;
-                  const res = await employeeStore.putMeta({
-                    parentId: currentFromDataEmployee.id || '',
-                    group,
-                    metaId: _meta.id,
-                    meta: payload,
-                    file,
-                  });
-                  if (res) {
-                    return true;
-                  }
-                }
-
-                return false;
+              async () => {
+                return true;
               }
             "
             :get-file-list="
               async (group: 'passport' | 'visa') => {
-                if (!!currentFromDataEmployee.id) {
-                  const resMeta = await employeeStore.getMetaList({
-                    parentId: currentFromDataEmployee.id,
-                    group,
-                  });
+                if (formDataEmployee.attachment !== undefined) {
+                  const resMeta = formDataEmployee.attachment.filter(
+                    (v) => v.group === group,
+                  );
 
                   const tempValue = resMeta.map(async (i: any) => {
                     return {
-                      _meta: { ...i },
+                      _meta: { ...i._meta },
                       name: i.id || '',
                       group: group,
-                      url: await employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
-                        group,
-                        fileId: i.id,
-                      }),
+                      url: i.url,
                       file: undefined,
                     };
                   });
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index 11dfe0ff..392cd79c 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -8,6 +8,7 @@ import { QuotationPayload, EmployeeWorker } from 'src/stores/quotations/types';
 
 // NOTE: Import stores
 import { useQuotationStore } from 'stores/quotations';
+import useEmployeeStore from 'stores/employee';
 
 const DEFAULT_DATA: QuotationPayload = {
   productServiceList: [],
@@ -32,9 +33,30 @@ export const useQuotationForm = defineStore('form-quotation', () => {
   const { t } = useI18n();
 
   const quotationStore = useQuotationStore();
+  const employeeStore = useEmployeeStore();
+  const newWorkerList = ref<
+    (EmployeeWorker & {
+      attachment?: {
+        name?: string;
+        group?: string;
+        url?: string;
+        file?: File;
+        _meta?: Record<string, any>;
+      }[];
+    })[]
+  >([]);
 
   let resetFormData = structuredClone(DEFAULT_DATA);
-
+  const fileItemNewWorker = ref<
+    {
+      employeeIndex: number;
+      name?: string;
+      group: 'passport' | 'visa' | 'in-country-notice';
+      url?: string;
+      file?: File;
+      _meta?: Record<string, any>;
+    }[]
+  >([]);
   const currentTreeData = ref();
   const currentFormData = ref<QuotationPayload & { id?: string }>(
     structuredClone(resetFormData),
@@ -56,7 +78,8 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     if (clean) {
       currentFormData.value = structuredClone(DEFAULT_DATA);
       resetFormData = structuredClone(DEFAULT_DATA);
-
+      fileItemNewWorker.value = [];
+      newWorkerList.value = [];
       return;
     }
 
@@ -92,7 +115,19 @@ export const useQuotationForm = defineStore('form-quotation', () => {
 
   async function submitQuotation() {
     if (currentFormState.value.mode === 'create') {
-      await quotationStore.createQuotation(currentFormData.value);
+      const res = await quotationStore.createQuotation(currentFormData.value);
+
+      if (res !== null) {
+        fileItemNewWorker.value.forEach(async (v) => {
+          if (v.group === undefined) return;
+          await employeeStore.postMeta({
+            group: v.group,
+            parentId: res.worker[v.employeeIndex].employeeId,
+            meta: v._meta,
+            file: v.file,
+          });
+        });
+      }
     }
     if (currentFormState.value.mode === 'edit' && currentFormData.value.id) {
       await quotationStore.editQuotation({
@@ -104,20 +139,34 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     currentFormState.value.mode = 'info';
   }
 
-  function injectNewEmployee(data: EmployeeWorker, callback?: () => void) {
-    currentFormData.value.worker.push({
-      alienReferencNumber: data.alienReferencNumber,
-      documentExpireDate: data.documentExpireDate,
-      lastNameEN: data.lastNameEN,
-      lastName: data.lastName,
-      middleNameEN: data.middleNameEN,
-      middleName: data.middleName,
-      firstNameEN: data.firstNameEN,
-      firstName: data.firstName,
-      namePrefix: data.namePrefix,
-      nationality: data.nationality,
-      gender: data.gender,
-      dateOfBirth: data.dateOfBirth,
+  function injectNewEmployee(
+    obj: {
+      data: EmployeeWorker & {
+        attachment?: {
+          name?: string;
+          group?: string;
+          url?: string;
+          file?: File;
+          _meta?: Record<string, any>;
+        }[];
+      };
+    },
+    callback?: () => void,
+  ) {
+    newWorkerList.value.push({
+      // passportNo: obj.data.passportNo, wait api add
+      //documentExpireDate: obj.data.documentExpireDate,
+      lastNameEN: obj.data.lastNameEN,
+      lastName: obj.data.lastName,
+      middleNameEN: obj.data.middleNameEN,
+      middleName: obj.data.middleName,
+      firstNameEN: obj.data.firstNameEN,
+      firstName: obj.data.firstName,
+      namePrefix: obj.data.namePrefix,
+      nationality: obj.data.nationality,
+      gender: obj.data.gender,
+      dateOfBirth: obj.data.dateOfBirth,
+      attachment: obj.data.attachment,
     });
 
     callback?.();
@@ -141,6 +190,8 @@ export const useQuotationForm = defineStore('form-quotation', () => {
   return {
     currentFormState,
     currentFormData,
+    newWorkerList,
+    fileItemNewWorker,
 
     isFormDataDifferent,
     injectNewEmployee,