From 2e1e82b2bcd8ecb25d28b315e4155745f6e340ce Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 12 Nov 2024 09:06:26 +0700
Subject: [PATCH] refactor: by value visa

---
 src/pages/03_customer-management/MainPage.vue | 303 ++++++++++--------
 src/pages/05_quotation/QuotationForm.vue      |  18 +-
 2 files changed, 182 insertions(+), 139 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 90c52710..c8813ed2 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -3007,13 +3007,21 @@ const emptyCreateDialog = ref(false);
                     outlined
                     title="customerEmployee.form.group.visa"
                     :readonly="!isEdit"
-                    v-model:visa-type="meta.type"
-                    v-model:visa-number="meta.number"
+                    v-model:arrival-at="meta.arrivalAt"
+                    v-model:arrival-tm-no="meta.arrivalTMNo"
+                    v-model:arrival-tm="meta.arrivalTM"
+                    v-model:mrz="meta.mrz"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issueDate="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
                     v-model:visa-issue-date="meta.issueDate"
                     v-model:visa-expiry-date="meta.expireDate"
-                    v-model:visa-issuing-place="meta.issuePlace"
-                    v-model:entry-count="meta.entryCount"
-                    v-model:issue-country="meta.issueCountry"
+                    v-model:remark="meta.remark"
+                    v-model:worker-type="meta.workerType"
+                    v-model:number="meta.number"
                   />
 
                   <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@@ -4703,15 +4711,23 @@ const emptyCreateDialog = ref(false);
                     ocr
                     dense
                     outlined
-                    title="customerEmployee.form.group.visa"
+                    :title="$t('customerEmployee.form.group.visa')"
                     :readonly="!isEdit"
-                    v-model:visa-type="meta.type"
-                    v-model:visa-number="meta.number"
+                    v-model:arrival-at="meta.arrivalAt"
+                    v-model:arrival-tm-no="meta.arrivalTMNo"
+                    v-model:arrival-tm="meta.arrivalTM"
+                    v-model:mrz="meta.mrz"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issueDate="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
                     v-model:visa-issue-date="meta.issueDate"
                     v-model:visa-expiry-date="meta.expireDate"
-                    v-model:visa-issuing-place="meta.issuePlace"
-                    v-model:entry-count="meta.entryCount"
-                    v-model:issue-country="meta.issueCountry"
+                    v-model:remark="meta.remark"
+                    v-model:worker-type="meta.workerType"
+                    v-model:number="meta.number"
                   />
 
                   <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
@@ -4733,129 +4749,139 @@ const emptyCreateDialog = ref(false);
                   {{ $t('customerEmployee.form.group.passport') }}
                 </div>
 
-                <FormEmployeePassport
+                <template
                   v-for="(
                     value, index
                   ) in currentFromDataEmployee.employeePassport"
-                  prefix-id="drawer-info-employee"
-                  :key="index"
-                  id="form-passport"
-                  hide-title
-                  dense
-                  outlined
-                  separator
-                  :title="$t('customerEmployee.form.group.passport')"
-                  :readonly="employeeFormState.currentIndexPassport !== index"
-                  :full-name="employeeFormState.currentIndexPassport !== index"
-                  v-model:birth-country="value.birthCountry"
-                  v-model:previous-passportRef="value.previousPassportRef"
-                  v-model:issue-place="value.issuePlace"
-                  v-model:issue-country="value.issueCountry"
-                  v-model:issue-date="value.issueDate"
-                  v-model:type="value.type"
-                  v-model:expire-date="value.expireDate"
-                  v-model:birth-date="value.birthDate"
-                  v-model:worker-status="value.workerStatus"
-                  v-model:nationality="value.nationality"
-                  v-model:gender="value.gender"
-                  v-model:last-name-en="value.lastNameEN"
-                  v-model:last-name="value.lastName"
-                  v-model:middle-name-en="value.middleNameEN"
-                  v-model:middle-name="value.middleName"
-                  v-model:first-name-en="value.firstNameEN"
-                  v-model:first-name="value.firstName"
-                  v-model:name-prefix="value.namePrefix"
-                  v-model:passport-number="value.number"
                 >
-                  <template v-slot:expiryDate>
-                    {{ $t('general.expirationDate') }} :
-                    {{ dateFormat(value.expireDate) }}
-                    <ExpirationDate
-                      v-if="value.id !== undefined"
-                      :expiration-date="value.expireDate"
-                    />
-                  </template>
+                  <FormEmployeePassport
+                    v-if="value !== undefined"
+                    prefix-id="drawer-info-employee"
+                    id="form-passport"
+                    hide-title
+                    dense
+                    outlined
+                    separator
+                    :title="$t('customerEmployee.form.group.passport')"
+                    :readonly="employeeFormState.currentIndexPassport !== index"
+                    :full-name="
+                      employeeFormState.currentIndexPassport !== index
+                    "
+                    v-model:birth-country="value.birthCountry"
+                    v-model:previous-passportRef="value.previousPassportRef"
+                    v-model:issue-place="value.issuePlace"
+                    v-model:issue-country="value.issueCountry"
+                    v-model:issue-date="value.issueDate"
+                    v-model:type="value.type"
+                    v-model:expire-date="value.expireDate"
+                    v-model:birth-date="value.birthDate"
+                    v-model:worker-status="value.workerStatus"
+                    v-model:nationality="value.nationality"
+                    v-model:gender="value.gender"
+                    v-model:last-name-en="value.lastNameEN"
+                    v-model:last-name="value.lastName"
+                    v-model:middle-name-en="value.middleNameEN"
+                    v-model:middle-name="value.middleName"
+                    v-model:first-name-en="value.firstNameEN"
+                    v-model:first-name="value.firstName"
+                    v-model:name-prefix="value.namePrefix"
+                    v-model:passport-number="value.number"
+                  >
+                    <template v-slot:expiryDate>
+                      {{ $t('general.expirationDate') }} :
+                      {{ dateFormat(value.expireDate) }}
+                      <ExpirationDate
+                        v-if="value.id !== undefined"
+                        :expiration-date="value.expireDate"
+                      />
+                    </template>
 
-                  <template v-slot:button>
-                    <div class="surface-1 row rounded" style="min-height: 35px">
-                      <UndoButton
-                        v-if="
-                          employeeFormState.isEmployeeEdit &&
-                          !(employeeFormState.currentIndexPassport === -1) &&
-                          employeeFormState.currentIndexPassport === index
-                        "
-                        id="btn-info-basic-undo"
-                        icon-only
-                        @click="
-                          () => {
-                            employeeFormStore.resetFormDataEmployee();
-                            employeeFormState.isEmployeeEdit = false;
-                            employeeFormState.dialogType = 'info';
-                            employeeFormState.currentIndexPassport = -1;
-                          }
-                        "
-                        type="button"
-                      />
-                      <SaveButton
-                        v-if="
-                          (employeeFormState.isEmployeeEdit ||
-                            value.id === undefined) &&
-                          !(employeeFormState.currentIndexPassport === -1) &&
-                          employeeFormState.currentIndexPassport === index
-                        "
-                        id="btn-info-basic-save"
-                        icon-only
-                        @click="
-                          () => {
-                            employeeFormState.currentIndexPassport = index;
-                          }
-                        "
-                        type="submit"
-                      />
-
-                      <EditButton
-                        v-if="
-                          employeeFormState.currentIndexPassport === -1 ||
-                          (!employeeFormState.isEmployeeEdit &&
-                            value.id !== undefined &&
-                            employeeFormState.currentIndexPassport === index)
-                        "
-                        id="btn-info-basic-edit"
-                        icon-only
-                        @click="
-                          () => {
-                            employeeFormState.currentIndexPassport = index;
-                            employeeFormState.isEmployeeEdit = true;
-                            employeeFormState.dialogType = 'edit';
-                          }
-                        "
-                        type="button"
-                      />
-                      <DeleteButton
-                        v-if="
-                          employeeFormState.currentIndexPassport === -1 ||
-                          (!employeeFormState.isEmployeeEdit &&
-                            value.id !== undefined &&
+                    <template v-slot:button>
+                      <div
+                        class="surface-1 row rounded"
+                        style="min-height: 35px"
+                      >
+                        <UndoButton
+                          v-if="
+                            employeeFormState.isEmployeeEdit &&
                             !(employeeFormState.currentIndexPassport === -1) &&
-                            employeeFormState.currentIndexPassport === index)
-                        "
-                        id="btn-info-basic-delete"
-                        icon-only
-                        @click.stop="
-                          () => {
-                            employeeFormState.currentIndexPassport = index;
-                            deleteEmployeeById({ type: 'passport' });
-                          }
-                        "
-                        type="button"
-                        :disabled="
-                          !(employeeFormState.currentIndex === -1) &&
-                          !(employeeFormState.currentIndex === index)
-                        "
-                      />
-                    </div>
-                  </template>
-                </FormEmployeePassport>
+                            employeeFormState.currentIndexPassport === index
+                          "
+                          id="btn-info-basic-undo"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormStore.resetFormDataEmployee();
+                              employeeFormState.isEmployeeEdit = false;
+                              employeeFormState.dialogType = 'info';
+                              employeeFormState.currentIndexPassport = -1;
+                            }
+                          "
+                          type="button"
+                        />
+                        <SaveButton
+                          v-if="
+                            (employeeFormState.isEmployeeEdit ||
+                              value.id === undefined) &&
+                            !(employeeFormState.currentIndexPassport === -1) &&
+                            employeeFormState.currentIndexPassport === index
+                          "
+                          id="btn-info-basic-save"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormState.currentIndexPassport = index;
+                            }
+                          "
+                          type="submit"
+                        />
+
+                        <EditButton
+                          v-if="
+                            employeeFormState.currentIndexPassport === -1 ||
+                            (!employeeFormState.isEmployeeEdit &&
+                              value.id !== undefined &&
+                              employeeFormState.currentIndexPassport === index)
+                          "
+                          id="btn-info-basic-edit"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormState.currentIndexPassport = index;
+                              employeeFormState.isEmployeeEdit = true;
+                              employeeFormState.dialogType = 'edit';
+                            }
+                          "
+                          type="button"
+                        />
+                        <DeleteButton
+                          v-if="
+                            employeeFormState.currentIndexPassport === -1 ||
+                            (!employeeFormState.isEmployeeEdit &&
+                              value.id !== undefined &&
+                              !(
+                                employeeFormState.currentIndexPassport === -1
+                              ) &&
+                              employeeFormState.currentIndexPassport === index)
+                          "
+                          id="btn-info-basic-delete"
+                          icon-only
+                          @click.stop="
+                            () => {
+                              employeeFormState.currentIndexPassport = index;
+                              deleteEmployeeById({ type: 'passport' });
+                            }
+                          "
+                          type="button"
+                          :disabled="
+                            !(employeeFormState.currentIndex === -1) &&
+                            !(employeeFormState.currentIndex === index)
+                          "
+                        />
+                      </div>
+                    </template>
+                  </FormEmployeePassport>
+                </template>
               </div>
             </template>
 
@@ -4866,15 +4892,24 @@ const emptyCreateDialog = ref(false);
                 id="form-visa"
                 dense
                 outlined
-                title="customerEmployee.form.group.visa"
+                :title="$t('customerEmployee.form.group.visa')"
                 :readonly="employeeFormState.currentIndexVisa !== index"
-                v-model:visa-type="value.type"
-                v-model:visa-number="value.number"
+                :hide-title="index !== 0"
+                v-model:arrival-at="value.arrivalAt"
+                v-model:arrival-tm-no="value.arrivalTMNo"
+                v-model:arrival-tm="value.arrivalTM"
+                v-model:mrz="value.mrz"
+                v-model:entry-count="value.entryCount"
+                v-model:issue-place="value.issuePlace"
+                v-model:issue-country="value.issueCountry"
+                v-model:issueDate="value.issueDate"
+                v-model:type="value.type"
+                v-model:expire-date="value.expireDate"
                 v-model:visa-issue-date="value.issueDate"
                 v-model:visa-expiry-date="value.expireDate"
-                v-model:visa-issuing-place="value.issuePlace"
-                v-model:entry-count="value.entryCount"
-                v-model:issue-country="value.issueCountry"
+                v-model:remark="value.remark"
+                v-model:worker-type="value.workerType"
+                v-model:number="value.number"
               >
                 <template v-slot:expiryDate>
                   {{ $t('general.expirationDate') }} :
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index edeba4f0..e00dfc2c 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -2330,13 +2330,21 @@ async function getInvoiceCodeFullPay() {
                 outlined
                 title="customerEmployee.form.group.visa"
                 :readonly="!isEdit"
-                v-model:visa-type="meta.type"
-                v-model:visa-number="meta.number"
+                v-model:arrival-at="meta.arrivalAt"
+                v-model:arrival-tm-no="meta.arrivalTMNo"
+                v-model:arrival-tm="meta.arrivalTM"
+                v-model:mrz="meta.mrz"
+                v-model:entry-count="meta.entryCount"
+                v-model:issue-place="meta.issuePlace"
+                v-model:issue-country="meta.issueCountry"
+                v-model:issueDate="meta.issueDate"
+                v-model:type="meta.type"
+                v-model:expire-date="meta.expireDate"
                 v-model:visa-issue-date="meta.issueDate"
                 v-model:visa-expiry-date="meta.expireDate"
-                v-model:visa-issuing-place="meta.issuePlace"
-                v-model:entry-count="meta.entryCount"
-                v-model:issue-country="meta.issueCountry"
+                v-model:remark="meta.remark"
+                v-model:worker-type="meta.workerType"
+                v-model:number="meta.number"
               />
 
               <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />