From 03adabeabd4125530cefe4f9625c857dcb23aa6e Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 4 Jul 2025 16:24:55 +0700
Subject: [PATCH] refactor: add btn uploand file passport

---
 .../FormEmployeePassport.vue                  | 50 +++++++++++++------
 src/pages/03_customer-management/MainPage.vue |  2 +
 src/pages/03_customer-management/form.ts      | 13 +++--
 src/stores/employee/types.ts                  |  2 +-
 4 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index c87f13dd..040c9676 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -9,6 +9,8 @@ import useOptionStore from 'stores/options';
 
 import DatePicker from '../shared/DatePicker.vue';
 
+import { dateFormat } from 'src/utils/datetime';
+
 const optionStore = useOptionStore();
 const { locale } = useI18n();
 
@@ -32,6 +34,8 @@ const firstName = defineModel<string>('firstName');
 const namePrefix = defineModel<string>('namePrefix');
 const passportNumber = defineModel<string>('passportNumber');
 
+const file = defineModel<File>('file');
+
 const passportValidator = /[a-zA-Z]{1}[a-zA-Z0-9]{1}[0-9]{5,7}$/;
 
 const genderOptions = ref<Record<string, unknown>[]>([]);
@@ -177,6 +181,30 @@ watch(
   },
 );
 
+function browse() {
+  inputFile?.click();
+}
+
+const inputFile = (() => {
+  const _element = document.createElement('input');
+  _element.type = 'file';
+  _element.accept = 'image/jpeg,image/png';
+  _element.addEventListener('change', change);
+  return _element;
+})();
+
+async function change(e: Event) {
+  const _element = e.target as HTMLInputElement | null;
+  const _file = _element?.files?.[0];
+
+  if (_file) {
+    const newFileName = `passport-${dateFormat(new Date().toISOString())}-${_file.name}`;
+    const renamedFile = new File([_file], newFileName, { type: _file.type });
+
+    file.value = renamedFile;
+  }
+}
+
 watch(
   () => namePrefix.value,
   (v) => {
@@ -221,20 +249,14 @@ watch(
     </div>
 
     <div class="q-col-gutter-sm" :class="{ row: $q.screen.gt.sm }">
-      <div
-        class="col row justify-center q-col-gutter-sml"
-        style="max-height: 50%"
-        v-if="!ocr"
-      >
-        <q-avatar
-          style="border: 1px dashed; border-color: black"
-          square
-          size="100px"
-          font-size="50px"
-          color="grey-4"
-          text-color="grey"
-          icon="mdi-image-outline"
-        />
+      <div v-if="!ocr">
+        <q-btn
+          flat
+          color="primary"
+          icon="mdi-upload-box-outline"
+          @click="() => browse()"
+          :disable="readonly"
+        ></q-btn>
       </div>
       <div
         class="row q-col-gutter-sm"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 6363790c..d90e1234 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -3336,6 +3336,7 @@ const emptyCreateDialog = ref(false);
                 v-model:first-name="value.firstName"
                 v-model:name-prefix="value.namePrefix"
                 v-model:passport-number="value.number"
+                v-model:file="value.file"
               >
                 <template v-slot:expiryDate>
                   {{ $t('general.expirationDate') }} :
@@ -5432,6 +5433,7 @@ const emptyCreateDialog = ref(false);
                         v-model:first-name="value.firstName"
                         v-model:name-prefix="value.namePrefix"
                         v-model:passport-number="value.number"
+                        v-model:file="value.file"
                       >
                         <template v-slot:expiryDate>
                           {{ $t('general.expirationDate') }} :
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index a6592304..9c6da739 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -986,12 +986,16 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         state.value.currentIndexPassport
       ].id === undefined
     ) {
+      const { id, employeeId, updatedAt, createdAt, file, ...payload } =
+        currentFromDataEmployee.value.employeePassport?.[
+          state.value.currentIndexPassport
+        ];
+
       const res = await employeeStore.postMeta({
         parentId: currentFromDataEmployee.value.id || '',
         group: 'passport',
-        meta: currentFromDataEmployee.value.employeePassport?.[
-          state.value.currentIndexPassport
-        ],
+        meta: payload,
+        file: file,
       });
 
       if (res) {
@@ -1005,7 +1009,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         state.value.currentIndexPassport
       ].id !== undefined
     ) {
-      const { id, employeeId, updatedAt, createdAt, ...payload } =
+      const { id, employeeId, updatedAt, createdAt, file, ...payload } =
         currentFromDataEmployee.value.employeePassport?.[
           state.value.currentIndexPassport
         ];
@@ -1018,6 +1022,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
             state.value.currentIndexPassport
           ].id || '',
         meta: payload,
+        file: file || undefined,
       });
     }
 
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index b2983d61..c479f179 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -108,7 +108,7 @@ export type EmployeeCreate = {
   employeeWork?: EmployeeWorkCreate[];
   employeeInCountryNotice?: EmployeeInCountryNoticePayload[];
   employeeVisa?: EmployeeVisaPayload[];
-  employeePassport?: EmployeePassportPayload[];
+  employeePassport?: (EmployeePassportPayload & { file?: File })[];
 
   employeeOtherInfo?: EmployeeOtherCreate;