From 601537049d368ea219ef9c5b495326f522d00e35 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 16 Aug 2024 17:36:25 +0700
Subject: [PATCH] refactor: edit div of DialogForm

---
 src/pages/03_customer-management/MainPage.vue | 611 ++++++++++--------
 1 file changed, 339 insertions(+), 272 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 1bd925de..9127e3f7 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -213,7 +213,9 @@ const fieldDisplayEmployee = ref<
 
 const fieldSelected = ref<
   (
+    | 'orderNumber'
     | 'customerName'
+    | 'businessTypePure'
     | 'type'
     | 'personName'
     | 'telephoneNo'
@@ -228,7 +230,9 @@ const fieldSelected = ref<
     | 'action'
   )[]
 >([
+  'orderNumber',
   'customerName',
+  'businessTypePure',
   'personName',
   'telephoneNo',
   'branchEmail',
@@ -1793,6 +1797,7 @@ const emptyCreateDialog = ref(false);
         }
 
         employeeFormState.isEmployeeEdit = false;
+        employeeFormState.currentIndex = -1;
 
         await fetchListEmployee();
       }
@@ -1813,7 +1818,7 @@ const emptyCreateDialog = ref(false);
       }
     "
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div class="q-px-lg q-pt-lg surface-2">
       <ProfileBanner
         active
         useToggle
@@ -1859,293 +1864,357 @@ const emptyCreateDialog = ref(false);
     </div>
 
     <div
-      class="col surface-1 q-ma-lg rounded bordered scroll row"
-      id="personnel-form"
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
+      id="drawer-employee-form"
     >
-      <div class="col">
-        <div style="position: sticky; top: 0" class="q-pa-sm">
-          <SideMenu
-            :menu="
-              employeeFormState.currentTab === 'personalInfo'
-                ? [
-                    {
-                      name: $t('formDialogTitleInformation'),
-                      anchor: 'form-information',
-                    },
-                    {
-                      name: $t('formDialogTitlePersonal'),
-                      anchor: 'form-personal',
-                    },
-                    {
-                      name: $t('formDialogTitlePersonnelAddress'),
-                      anchor: 'form-personal-address',
-                    },
-                    {
-                      name: $t('formDialogTitlePassport'),
-                      anchor: 'form-passport',
-                    },
-                    {
-                      name: $t('formDialogTitleVisa'),
-                      anchor: 'form-visa',
-                    },
-                  ]
-                : employeeFormState.currentTab === 'healthCheck'
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
+        >
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <SideMenu
+              :menu="
+                employeeFormState.currentTab === 'personalInfo'
                   ? [
                       {
-                        name: $t('formDialogInputCheckupRes'),
-                        anchor: 'form-checkup',
+                        name: $t('formDialogTitleInformation'),
+                        anchor: 'form-information',
+                      },
+                      {
+                        name: $t('formDialogTitlePersonal'),
+                        anchor: 'form-personal',
+                      },
+                      {
+                        name: $t('formDialogTitlePersonnelAddress'),
+                        anchor: 'form-personal-address',
+                      },
+                      {
+                        name: $t('formDialogTitlePassport'),
+                        anchor: 'form-passport',
+                      },
+                      {
+                        name: $t('formDialogTitleVisa'),
+                        anchor: 'form-visa',
                       },
                     ]
-                  : employeeFormState.currentTab === 'workHistory'
+                  : employeeFormState.currentTab === 'healthCheck'
                     ? [
                         {
-                          name: $t('workHistory'),
-                          anchor: 'form-workHistory',
+                          name: $t('formDialogInputCheckupRes'),
+                          anchor: 'form-checkup',
                         },
                       ]
-                    : employeeFormState.currentTab === 'other'
+                    : employeeFormState.currentTab === 'workHistory'
                       ? [
                           {
-                            name: $t('other'),
-                            anchor: 'form-other',
+                            name: $t('workHistory'),
+                            anchor: 'form-workHistory',
                           },
                         ]
-                      : []
-            "
-            background="transparent"
-            :active="{
-              background: 'hsla(var(--blue-6-hsl) / .2)',
-              foreground: 'var(--blue-6)',
-            }"
-            scroll-element="#employee-form"
-          />
+                      : employeeFormState.currentTab === 'other'
+                        ? [
+                            {
+                              name: $t('other'),
+                              anchor: 'form-other',
+                            },
+                          ]
+                        : []
+              "
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#employee-form-content"
+            />
+          </div>
         </div>
-      </div>
 
-      <div
-        v-if="employeeFormState.currentTab === 'personalInfo'"
-        class="col-10 q-pa-md q-gutter-y-xl"
-      >
-        <BasicInformation
-          id="form-information"
-          prefix-id="form-employee"
-          :show-btn-save="employeeFormState.dialogType === 'create'"
-          employee
-          dense
-          outlined
-          separator
-          :title="$t('formDialogTitleInformation')"
-          :readonly="!employeeFormState.isEmployeeEdit"
-          :employee-owner-option="employeeStore.ownerOption"
-          v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
-          v-model:employee-id="employeeFormState.currentEmployeeCode"
-          v-model:nrc-no="currentFromDataEmployee.nrcNo"
-          v-model:code="currentFromDataEmployee.code"
-          @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
-          @undo="
-            () => {
-              employeeFormStore.resetFormDataEmployee();
-              employeeFormState.isEmployeeEdit = false;
-              employeeFormState.dialogType = 'info';
-            }
-          "
-          @edit="
-            () => {
-              employeeFormState.isEmployeeEdit = true;
-              employeeFormState.dialogType = 'edit';
-            }
-          "
-          @save="() => {}"
-          @delete="() => deleteEmployeeById({ id: currentFromDataEmployee.id })"
-        />
-        <FormPerson
-          id="form-personal"
-          prefix-id="form-employee"
-          dense
-          outlined
-          employee
-          separator
-          :title="$t('personalInfo')"
-          v-model:open="employeeFormState.dialogModal"
-          v-model:firstName="currentFromDataEmployee.firstName"
-          v-model:lastName="currentFromDataEmployee.lastName"
-          v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
-          v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
-          v-model:gender="currentFromDataEmployee.gender"
-          v-model:birthDate="currentFromDataEmployee.dateOfBirth"
-          v-model:nationality="currentFromDataEmployee.nationality"
-        />
-        <AddressForm
-          id="form-personal-address"
-          prefix-id="form-employee"
-          v-model:same-with-employer="
-            employeeFormState.formDataEmployeeSameAddr
-          "
-          v-model:address="currentFromDataEmployee.address"
-          v-model:addressEN="currentFromDataEmployee.addressEN"
-          v-model:provinceId="currentFromDataEmployee.provinceId"
-          v-model:districtId="currentFromDataEmployee.districtId"
-          v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
-          v-model:zipCode="currentFromDataEmployee.zipCode"
-          employee
-          dense
-        />
+        <div
+          class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+          id="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+        >
+          <template v-if="employeeFormState.currentTab === 'personalInfo'">
+            <div
+              class="q-pt-sm row"
+              style="position: absolute; z-index: 999; right: 4%"
+            >
+              <UndoButton
+                v-if="
+                  employeeFormState.isEmployeeEdit &&
+                  employeeFormState.dialogType !== 'create'
+                "
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormStore.resetFormDataEmployee();
+                    employeeFormState.isEmployeeEdit = false;
+                    employeeFormState.dialogType = 'info';
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormState.isEmployeeEdit = true;
+                    employeeFormState.dialogType = 'edit';
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="
+                  () => deleteEmployeeById({ id: currentFromDataEmployee.id })
+                "
+                type="button"
+              />
+            </div>
 
-        <FormEmployeePassport
-          prefix-id="drawer-info-employee"
-          id="form-passport"
-          dense
-          outlined
-          separator
-          :title="$t('formDialogTitlePassport')"
-          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
-          "
-        />
+            <BasicInformation
+              no-action
+              id="form-information"
+              prefix-id="form-employee"
+              :show-btn-save="employeeFormState.dialogType === 'create'"
+              employee
+              dense
+              outlined
+              separator
+              :title="$t('formDialogTitleInformation')"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              :employee-owner-option="employeeStore.ownerOption"
+              v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
+              v-model:employee-id="employeeFormState.currentEmployeeCode"
+              v-model:nrc-no="currentFromDataEmployee.nrcNo"
+              v-model:code="currentFromDataEmployee.code"
+              @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
+            />
+            <FormPerson
+              id="form-personal"
+              prefix-id="form-employee"
+              dense
+              outlined
+              employee
+              separator
+              :title="$t('personalInfo')"
+              v-model:open="employeeFormState.dialogModal"
+              v-model:firstName="currentFromDataEmployee.firstName"
+              v-model:lastName="currentFromDataEmployee.lastName"
+              v-model:firstNameEN="currentFromDataEmployee.firstNameEN"
+              v-model:lastNameEN="currentFromDataEmployee.lastNameEN"
+              v-model:gender="currentFromDataEmployee.gender"
+              v-model:birthDate="currentFromDataEmployee.dateOfBirth"
+              v-model:nationality="currentFromDataEmployee.nationality"
+            />
+            <AddressForm
+              id="form-personal-address"
+              prefix-id="form-employee"
+              v-model:same-with-employer="
+                employeeFormState.formDataEmployeeSameAddr
+              "
+              v-model:address="currentFromDataEmployee.address"
+              v-model:addressEN="currentFromDataEmployee.addressEN"
+              v-model:provinceId="currentFromDataEmployee.provinceId"
+              v-model:districtId="currentFromDataEmployee.districtId"
+              v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
+              v-model:zipCode="currentFromDataEmployee.zipCode"
+              employee
+              dense
+            />
 
-        <FormEmployeeVisa
-          prefix-id="drawer-info-employee"
-          id="form-visa"
-          dense
-          outlined
-          :title="$t(`formDialogTitleVisa`)"
-          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"
-        />
-      </div>
+            <FormEmployeePassport
+              prefix-id="drawer-info-employee"
+              id="form-passport"
+              dense
+              outlined
+              separator
+              :title="$t('formDialogTitlePassport')"
+              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
+              "
+            />
 
-      <div class="col-10 q-pa-md q-gutter-y-xl" v-else>
-        <FormEmployeeHealthCheck
-          v-if="employeeFormState.currentTab === 'healthCheck'"
-          id="form-checkup"
-          prefix-id="form-employee"
-          dense
-          outlined
-          v-model:current-index="employeeFormState.currentIndex"
-          v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
-          v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
-          v-model:medicalBenefitOption="optionStore.globalOption.typeInsurance"
-          v-model:insuranceCompanyOption="
-            optionStore.globalOption.insurancePlace
-          "
-          @delete="
-            (index) => {
-              employeeFormState.currentIndex = index;
-              deleteEmployeeById({ type: 'healthCheck' });
-            }
-          "
-          @save="
-            (index) => {
-              employeeFormState.currentIndex = index;
-              notify('create', $t('success'));
-            }
-          "
-          @undo="
-            (index) => {
-              if (
-                currentFromDataEmployee.employeeCheckup?.[index].statusSave ===
-                false
-              ) {
-                currentFromDataEmployee.employeeCheckup[index].statusSave =
-                  true;
-              }
-            }
-          "
-          @edit="
-            (index) => {
-              if (currentFromDataEmployee.employeeCheckup?.[index].statusSave) {
-                currentFromDataEmployee.employeeCheckup[index].statusSave =
-                  false;
-              }
-            }
-          "
-        />
-        <FormEmployeeWorkHistory
-          v-if="employeeFormState.currentTab === 'workHistory'"
-          id="form-work-history"
-          prefix-id="form-employee"
-          dense
-          outlined
-          v-model:current-index="employeeFormState.currentIndex"
-          v-model:employee-work="currentFromDataEmployee.employeeWork"
-          v-model:position-name-option="optionStore.globalOption.position"
-          v-model:job-type-option="optionStore.globalOption.businessType"
-          v-model:workplace-option="optionStore.globalOption.area"
-          @delete="
-            (index) => {
-              employeeFormState.currentIndex = index;
-              deleteEmployeeById({ type: 'work' });
-            }
-          "
-          @save="
-            (index) => {
-              employeeFormState.currentIndex = index;
-            }
-          "
-          @undo="
-            (index) => {
-              if (
-                currentFromDataEmployee.employeeWork?.[index].statusSave ===
-                false
-              ) {
-                currentFromDataEmployee.employeeWork[index].statusSave = true;
-              }
-            }
-          "
-          @edit="
-            (index) => {
-              if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
-                currentFromDataEmployee.employeeWork[index].statusSave = false;
-              }
-            }
-          "
-        />
-        <FormEmployeeOther
-          v-if="employeeFormState.currentTab === 'other'"
-          id="form-other"
-          prefix-id="form-employee"
-          dense
-          outlined
-          v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
-          @undo="
-            () => {
-              if (
-                currentFromDataEmployee.employeeOtherInfo?.statusSave === false
-              ) {
-                currentFromDataEmployee.employeeOtherInfo.statusSave = true;
-              }
-            }
-          "
-          @edit="
-            () => {
-              if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
-                currentFromDataEmployee.employeeOtherInfo.statusSave = false;
-              }
-            }
-          "
-        />
+            <FormEmployeeVisa
+              prefix-id="drawer-info-employee"
+              id="form-visa"
+              dense
+              outlined
+              :title="$t(`formDialogTitleVisa`)"
+              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>
+
+          <template v-if="employeeFormState.currentTab === 'healthCheck'">
+            <FormEmployeeHealthCheck
+              v-if="employeeFormState.currentTab === 'healthCheck'"
+              id="form-checkup"
+              prefix-id="form-employee"
+              dense
+              outlined
+              v-model:current-index="employeeFormState.currentIndex"
+              v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
+              v-model:checkupTypeOption="
+                optionStore.globalOption.insurancePlace
+              "
+              v-model:medicalBenefitOption="
+                optionStore.globalOption.typeInsurance
+              "
+              v-model:insuranceCompanyOption="
+                optionStore.globalOption.insurancePlace
+              "
+              @delete="
+                (index) => {
+                  employeeFormState.currentIndex = index;
+                  deleteEmployeeById({ type: 'healthCheck' });
+                }
+              "
+              @save="
+                (index) => {
+                  employeeFormState.currentIndex = index;
+                  notify('create', $t('success'));
+                }
+              "
+              @undo="
+                (index) => {
+                  if (
+                    currentFromDataEmployee.employeeCheckup?.[index]
+                      .statusSave === false
+                  ) {
+                    currentFromDataEmployee.employeeCheckup[index].statusSave =
+                      true;
+                  }
+                }
+              "
+              @edit="
+                (index) => {
+                  if (
+                    currentFromDataEmployee.employeeCheckup?.[index].statusSave
+                  ) {
+                    currentFromDataEmployee.employeeCheckup[index].statusSave =
+                      false;
+                  }
+                }
+              "
+            />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'workHistory'">
+            <FormEmployeeWorkHistory
+              v-if="employeeFormState.currentTab === 'workHistory'"
+              id="form-work-history"
+              prefix-id="form-employee"
+              dense
+              outlined
+              v-model:current-index="employeeFormState.currentIndex"
+              v-model:employee-work="currentFromDataEmployee.employeeWork"
+              v-model:position-name-option="optionStore.globalOption.position"
+              v-model:job-type-option="optionStore.globalOption.businessType"
+              v-model:workplace-option="optionStore.globalOption.area"
+              @delete="
+                (index) => {
+                  employeeFormState.currentIndex = index;
+                  deleteEmployeeById({ type: 'work' });
+                }
+              "
+              @save="
+                (index) => {
+                  employeeFormState.currentIndex = index;
+                }
+              "
+              @undo="
+                (index) => {
+                  if (
+                    currentFromDataEmployee.employeeWork?.[index].statusSave ===
+                    false
+                  ) {
+                    currentFromDataEmployee.employeeWork[index].statusSave =
+                      true;
+                  }
+                }
+              "
+              @edit="
+                (index) => {
+                  if (
+                    currentFromDataEmployee.employeeWork?.[index].statusSave
+                  ) {
+                    currentFromDataEmployee.employeeWork[index].statusSave =
+                      false;
+                  }
+                }
+              "
+            />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'other'">
+            <FormEmployeeOther
+              v-if="employeeFormState.currentTab === 'other'"
+              id="form-other"
+              prefix-id="form-employee"
+              dense
+              outlined
+              v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
+              @undo="
+                () => {
+                  if (
+                    currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                    false
+                  ) {
+                    currentFromDataEmployee.employeeOtherInfo.statusSave = true;
+                  }
+                }
+              "
+              @edit="
+                () => {
+                  if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
+                    currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                  }
+                }
+              "
+            />
+          </template>
+        </div>
       </div>
     </div>
   </DialogForm>
@@ -2497,8 +2566,6 @@ const emptyCreateDialog = ref(false);
           </template>
 
           <template v-if="employeeFormState.currentTab === 'healthCheck'">
-            >
-
             <FormEmployeeHealthCheck
               v-if="employeeFormState.currentTab === 'healthCheck'"
               id="drawer-form-checkup"