From 0471cf56ae250cb2b3dbd1c10412550614086672 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 29 Aug 2024 11:39:09 +0700
Subject: [PATCH] refactor(03): employee visa passport

---
 .../FormEmployeePassport.vue                  |  49 ++-----
 .../FormEmployeeVisa.vue                      |  20 +--
 src/components/upload-file/UploadFile.vue     |   6 +-
 src/pages/03_customer-management/MainPage.vue | 124 +++++++++++++++++-
 4 files changed, 148 insertions(+), 51 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index e5543eea..9f62f3b2 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -85,36 +85,8 @@ watch(
 </script>
 
 <template>
-  <div class="row col-12" v-if="ocr">
-    <div class="col-12 row">
-      <div class="col-6 flex flex-center">
-        <q-img
-          src="/images/customer-CORP-avartar.png "
-          style="height: 100px; max-width: 50%"
-        />
-      </div>
-      <div class="col-6 column">
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-input-passport-no`"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-md-3 col-6"
-          :label="$t('customerEmployee.form.passportNo')"
-          v-model="passportNumber"
-          :rules="[
-            (val: string) =>
-              !!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
-          ]"
-        />
-      </div>
-    </div>
-  </div>
-
-  <div class="row col-12" v-else>
-    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+  <div class="row col-12">
+    <div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
       <q-icon
         flat
         size="xs"
@@ -141,7 +113,8 @@ watch(
         option-label="label"
         lazy-rules="ondemand"
         v-model="passportType"
-        class="col-md-3 col-12"
+        class="col-12"
+        :class="{ 'col-md-3': !ocr }"
         :dense="dense"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
@@ -169,7 +142,7 @@ watch(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md-3 col-6"
+        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
         :label="$t('customerEmployee.form.passportNo')"
         v-model="passportNumber"
         :rules="[
@@ -184,7 +157,7 @@ watch(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
+        :class="{ 'col-12': ocr, 'col-6': !ocr }"
         :label="$t('customerEmployee.form.passportRef')"
         :model-value="
           readonly
@@ -202,7 +175,7 @@ watch(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md-3 col-6"
+        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
         :label="$t('customerEmployee.form.passportPlace')"
         v-model="passportIssuingPlace"
         :rules="[
@@ -223,7 +196,7 @@ watch(
         option-value="value"
         option-label="label"
         lazy-rules="ondemand"
-        class="col-md-3 col-6"
+        :class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
         v-model="passportIssuingCountry"
         :dense="dense"
         :readonly="readonly"
@@ -250,7 +223,8 @@ watch(
         :id="`${prefixId}-date-picker-passport-issueance`"
         :label="$t('customerEmployee.form.passportIssueDate')"
         v-model="passportIssueDate"
-        class="col-md-3 col-6"
+        class="col-6"
+        :class="{ 'col-md-3': !ocr }"
         :readonly="readonly"
         :rules="[
           (val: string) =>
@@ -262,7 +236,8 @@ watch(
         :id="`${prefixId}-date-picker-passport-expire`"
         :label="$t('customerEmployee.form.passportExpireDate')"
         v-model="passportExpiryDate"
-        class="col-md-3 col-6"
+        class="col-6"
+        :class="{ 'col-md-3': !ocr }"
         :readonly="readonly"
         :rules="[
           (val: string) =>
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index d63c33f8..90708552 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -46,6 +46,8 @@ defineProps<{
   separator?: boolean;
   typeCustomer?: string;
   prefixId: string;
+
+  ocr?: boolean;
 }>();
 
 async function fetchProvince() {
@@ -86,7 +88,7 @@ watch(
 
 <template>
   <div class="row">
-    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+    <div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
       <q-icon
         flat
         size="xs"
@@ -111,7 +113,7 @@ watch(
         option-value="value"
         option-label="label"
         lazy-rules="ondemand"
-        class="col-4"
+        :class="{ 'col-4': !ocr, 'col-6': ocr }"
         :dense="dense"
         :readonly="readonly"
         :options="visaTypeOptions"
@@ -144,7 +146,7 @@ watch(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-4"
+        :class="{ 'col-4': !ocr, 'col-6': ocr }"
         :label="$t('customerEmployee.form.visaNo')"
         :model-value="readonly ? visaNumber || '-' : visaNumber"
         @update:model-value="
@@ -156,7 +158,7 @@ watch(
           !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
       ]" -->
       <DatePicker
-        class="col-2"
+        :class="{ 'col-2': !ocr, 'col-6': ocr }"
         :id="`${prefixId}-date-picker-visa-issuance`"
         :readonly="readonly"
         :label="$t('customerEmployee.form.visaIssuance')"
@@ -164,7 +166,7 @@ watch(
         clearable
       />
       <DatePicker
-        class="col-2"
+        :class="{ 'col-2': !ocr, 'col-6': ocr }"
         :id="`${prefixId}-date-picker-visa-expire`"
         :readonly="readonly"
         :label="$t('customerEmployee.form.visaExpire')"
@@ -179,7 +181,7 @@ watch(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-5"
+        :class="{ 'col-5': !ocr, 'col-6': ocr }"
         :label="$t('customerEmployee.form.visaPlace')"
         :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
         @update:model-value="
@@ -191,7 +193,7 @@ watch(
           !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
       ]" -->
       <DatePicker
-        class="col-4"
+        :class="{ 'col-4': !ocr, 'col-6': ocr }"
         :id="`${prefixId}-date-picker-visa-until`"
         :readonly="readonly"
         :label="$t('customerEmployee.form.visaStayUntil')"
@@ -206,7 +208,7 @@ watch(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-5"
+        :class="{ 'col-5': !ocr, 'col-6': ocr }"
         :label="$t('customerEmployee.form.visaTM6')"
         :model-value="readonly ? tm6Number || '-' : tm6Number"
         @update:model-value="
@@ -219,7 +221,7 @@ watch(
           !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
       ]" -->
       <DatePicker
-        class="col-4"
+        :class="{ 'col-4': !ocr, 'col-6': ocr }"
         :id="`${prefixId}-date-picker-visa-enter`"
         :readonly="readonly"
         :label="$t('customerEmployee.form.visaEnter')"
diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 5f20736d..0bc1610a 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -110,7 +110,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
 
 <template>
   <div class="full-width row no-wrap wrapper">
-    <div class="col column no-wrap">
+    <div class="col full-height column no-wrap">
       <div class="q-pa-sm text-center bordered" style="height: 50px">
         <q-btn-dropdown
           :disable="readonly"
@@ -168,7 +168,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       </div>
     </div>
 
-    <div class="col column no-wrap">
+    <div class="col full-height column no-wrap">
       <div
         class="bordered row items-center justify-evenly q-pa-sm no-wrap"
         style="height: 50px"
@@ -243,7 +243,7 @@ const { pdf, pages } = usePDF(computed(() => currentFile.value?.url));
       </div>
     </div>
 
-    <div class="col-5 column no-wrap">
+    <div class="col-5 full-height column no-wrap">
       <div
         class="bordered row items-center justify-between q-pa-sm"
         style="height: 50px"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 321c7702..c69d762b 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2324,7 +2324,66 @@ const emptyCreateDialog = ref(false);
                     employeeFormState.ocr = false;
                   }
                 "
-              />
+              >
+                <template #form="{ mode }">
+                  <FormEmployeePassport
+                    v-if="mode === 'passport'"
+                    prefix-id="drawer-info-employee"
+                    id="form-passport"
+                    dense
+                    outlined
+                    separator
+                    ocr
+                    :title="$t('customerEmployee.form.group.passport')"
+                    :readonly="!employeeFormState.isEmployeeEdit"
+                    v-model:passport-type="currentFromDataEmployee.passportType"
+                    v-model:passport-number="
+                      currentFromDataEmployee.passportNumber
+                    "
+                    v-model:passport-issue-date="
+                      currentFromDataEmployee.passportIssueDate
+                    "
+                    v-model:passport-expiry-date="
+                      currentFromDataEmployee.passportExpiryDate
+                    "
+                    v-model:passport-issuing-place="
+                      currentFromDataEmployee.passportIssuingPlace
+                    "
+                    v-model:passport-issuing-country="
+                      currentFromDataEmployee.passportIssuingCountry
+                    "
+                    v-model:previous-passport-reference="
+                      currentFromDataEmployee.previousPassportReference
+                    "
+                  />
+                  <FormEmployeeVisa
+                    v-if="mode === 'visa'"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    ocr
+                    dense
+                    outlined
+                    title="customerEmployee.form.group.visa"
+                    :readonly="!employeeFormState.isEmployeeEdit"
+                    v-model:visa-type="currentFromDataEmployee.visaType"
+                    v-model:visa-number="currentFromDataEmployee.visaNumber"
+                    v-model:visa-issue-date="
+                      currentFromDataEmployee.visaIssueDate
+                    "
+                    v-model:visa-expiry-date="
+                      currentFromDataEmployee.visaExpiryDate
+                    "
+                    v-model:visa-issuing-place="
+                      currentFromDataEmployee.visaIssuingPlace
+                    "
+                    v-model:visa-stay-until-date="
+                      currentFromDataEmployee.visaStayUntilDate
+                    "
+                    v-model:tm6-number="currentFromDataEmployee.tm6Number"
+                    v-model:entry-date="currentFromDataEmployee.entryDate"
+                  />
+                </template>
+              </UploadFile>
             </div>
           </template>
 
@@ -3271,7 +3330,68 @@ const emptyCreateDialog = ref(false);
                       employeeFormState.ocr = false;
                     }
                   "
-                />
+                >
+                  <template #form="{ mode }">
+                    <FormEmployeePassport
+                      v-if="mode === 'passport'"
+                      prefix-id="drawer-info-employee"
+                      id="drawer-form-passport"
+                      dense
+                      outlined
+                      separator
+                      ocr
+                      :title="'customerEmployee.form.group.passport'"
+                      :readonly="!employeeFormState.isEmployeeEdit"
+                      v-model:passport-type="
+                        currentFromDataEmployee.passportType
+                      "
+                      v-model:passport-number="
+                        currentFromDataEmployee.passportNumber
+                      "
+                      v-model:passport-issue-date="
+                        currentFromDataEmployee.passportIssueDate
+                      "
+                      v-model:passport-expiry-date="
+                        currentFromDataEmployee.passportExpiryDate
+                      "
+                      v-model:passport-issuing-place="
+                        currentFromDataEmployee.passportIssuingPlace
+                      "
+                      v-model:passport-issuing-country="
+                        currentFromDataEmployee.passportIssuingCountry
+                      "
+                      v-model:previous-passport-reference="
+                        currentFromDataEmployee.previousPassportReference
+                      "
+                    />
+                    <FormEmployeeVisa
+                      v-if="mode === 'visa'"
+                      prefix-id="drawer-info-employee"
+                      id="drawer-form-visa"
+                      dense
+                      outlined
+                      ocr
+                      title="customerEmployee.form.group.visa"
+                      :readonly="!employeeFormState.isEmployeeEdit"
+                      v-model:visa-type="currentFromDataEmployee.visaType"
+                      v-model:visa-number="currentFromDataEmployee.visaNumber"
+                      v-model:visa-issue-date="
+                        currentFromDataEmployee.visaIssueDate
+                      "
+                      v-model:visa-expiry-date="
+                        currentFromDataEmployee.visaExpiryDate
+                      "
+                      v-model:visa-issuing-place="
+                        currentFromDataEmployee.visaIssuingPlace
+                      "
+                      v-model:visa-stay-until-date="
+                        currentFromDataEmployee.visaStayUntilDate
+                      "
+                      v-model:tm6-number="currentFromDataEmployee.tm6Number"
+                      v-model:entry-date="currentFromDataEmployee.entryDate"
+                    />
+                  </template>
+                </UploadFile>
               </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">