From b0885e10a33468f64652a3e8ed842b92eb4a4d46 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 16 Aug 2024 16:47:13 +0700
Subject: [PATCH] refactor: edit div of DrawerInfo

---
 src/pages/03_customer-management/MainPage.vue | 623 ++++++++++--------
 1 file changed, 347 insertions(+), 276 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 7ea993f3..8018a26d 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -14,6 +14,12 @@ import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
 import { CustomerStats, Customer, CustomerBranch } from 'stores/customer/types';
 import { Employee, EmployeeHistory } from 'stores/employee/types';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
 
 import { AddressForm } from 'components/form';
 import ItemCard from 'src/components/ItemCard.vue';
@@ -2265,70 +2271,74 @@ const emptyCreateDialog = ref(false);
       }
     "
   >
-    <div class="full-height full-width column">
-      <div class="q-mx-lg q-mt-lg">
-        <ProfileBanner
-          @view="employeeFormState.imageDialog = true"
-          @edit="
-            dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
-          "
-          @update:toggle-status="
-            (v) => {
-              if (currentFromDataEmployee.id !== undefined)
-                triggerChangeStatus(currentFromDataEmployee.id, v);
-            }
-          "
-          active
-          use-toggle
-          color="white"
-          icon="mdi-account-plus-outline"
-          bg-color="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
-          v-model:current-tab="employeeFormState.currentTab"
-          v-model:toggle-status="currentFromDataEmployee.status"
-          v-model:cover-url="employeeFormState.profileUrl"
-          fallback-cover="/images/employee-banner.png"
-          :img="employeeFormState.profileUrl"
-          :tabs-list="[
-            { name: 'personalInfo', label: 'personalInfo' },
-            { name: 'healthCheck', label: 'healthCheck' },
-            { name: 'workHistory', label: 'workHistory' },
-            { name: 'other', label: 'other' },
-          ]"
-          :menu="formMenuIconEmployee"
-          :toggle-title="$t('formDialogTitleUserStatus')"
-          :hide-fade="
-            employeeFormState.profileUrl === '' ||
-            employeeFormState.profileUrl === undefined
-          "
-        />
-      </div>
-      <div
-        class="col surface-1 q-ma-lg rounded bordered scroll row"
-        id="employee-form"
-      >
-        <div class="col">
-          <div style="position: sticky; top: 0" class="q-pa-sm">
+    <div class="q-px-lg q-pt-lg surface-2">
+      <ProfileBanner
+        @view="employeeFormState.imageDialog = true"
+        @edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()"
+        @update:toggle-status="
+          (v) => {
+            if (currentFromDataEmployee.id !== undefined)
+              triggerChangeStatus(currentFromDataEmployee.id, v);
+          }
+        "
+        active
+        use-toggle
+        color="white"
+        icon="mdi-account-plus-outline"
+        bg-color="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
+        v-model:current-tab="employeeFormState.currentTab"
+        v-model:toggle-status="currentFromDataEmployee.status"
+        v-model:cover-url="employeeFormState.profileUrl"
+        fallback-cover="/images/employee-banner.png"
+        :img="employeeFormState.profileUrl"
+        :tabs-list="[
+          { name: 'personalInfo', label: 'personalInfo' },
+          { name: 'healthCheck', label: 'healthCheck' },
+          { name: 'workHistory', label: 'workHistory' },
+          { name: 'other', label: 'other' },
+        ]"
+        :menu="formMenuIconEmployee"
+        :toggle-title="$t('formDialogTitleUserStatus')"
+        :hide-fade="
+          employeeFormState.profileUrl === '' ||
+          employeeFormState.profileUrl === undefined
+        "
+      />
+    </div>
+
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
+      id="drawer-employee-form"
+    >
+      <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="[
                 {
                   name: $t('formDialogTitleInformation'),
-                  anchor: 'form-information',
+                  anchor: 'drawer-form-information',
                 },
                 {
                   name: $t('formDialogTitlePersonal'),
-                  anchor: 'form-personal',
+                  anchor: 'drawer-form-personal',
                 },
                 {
                   name: $t('formDialogTitlePersonnelAddress'),
-                  anchor: 'form-personal-address',
+                  anchor: 'drawer-form-personal-address',
                 },
                 {
                   name: $t('formDialogTitlePassport'),
-                  anchor: 'form-passport',
+                  anchor: 'drawer-form-passport',
                 },
                 {
                   name: $t('formDialogTitleVisa'),
-                  anchor: 'form-visa',
+                  anchor: 'drawer-form-visa',
                 },
               ]"
               background="transparent"
@@ -2336,247 +2346,308 @@ const emptyCreateDialog = ref(false);
                 background: 'hsla(var(--blue-6-hsl) / .2)',
                 foreground: 'var(--blue-6)',
               }"
-              scroll-element="#employee-form"
+              scroll-element="#drawer-employee-form-content"
             />
           </div>
         </div>
 
         <div
-          v-if="employeeFormState.currentTab === 'personalInfo'"
-          class="col-10 q-pa-md q-gutter-y-xl"
+          class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+          id="drawer-employee-form-content"
+          style="height: 290px; overflow-y: auto"
         >
-          <BasicInformation
-            :no-action="$route.name === 'CustomerBranchManagement'"
-            id="form-information"
-            prefix-id="drawer-info-employee"
-            dense
-            outlined
-            :title="'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="async () => {}"
-            @delete="
-              () => deleteEmployeeById({ id: currentFromDataEmployee.id })
-            "
-          />
-          <FormPerson
-            id="form-personal"
-            prefix-id="drawer-info-employee"
-            dense
-            outlined
-            employee
-            separator
-            :title="'personalInfo'"
-            :readonly="!employeeFormState.isEmployeeEdit"
-            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"
-            employee
-            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"
-            :readonly="!employeeFormState.isEmployeeEdit"
-            prefix-id="drawer-info-personnel"
-            dense
-          />
-          <FormEmployeePassport
-            prefix-id="drawer-info-employee"
-            id="form-passport"
-            dense
-            outlined
-            separator
-            :title="'formDialogTitlePassport'"
-            :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
-            prefix-id="drawer-info-employee"
-            id="form-visa"
-            dense
-            outlined
-            :title="`formDialogTitleVisa`"
-            :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"
-          />
-        </div>
-        <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:employee-checkup="currentFromDataEmployee.employeeCheckup"
-            v-model:checkup-type-option="
-              optionStore.globalOption.insurancePlace
-            "
-            v-model:medical-benefit-option="
-              optionStore.globalOption.typeInsurance
-            "
-            v-model:insuranceCompanyOption="
-              optionStore.globalOption.insurancePlace
-            "
-            @save="
-              (index) => {
-                employeeFormState.currentIndex = index;
-                notify('create', $t('success'));
-              }
-            "
-            @edit="
-              (index) => {
-                if (
-                  currentFromDataEmployee.employeeCheckup?.[index].statusSave
-                ) {
-                  employeeFormState.currentIndex = index;
-                  currentFromDataEmployee.employeeCheckup[index].statusSave =
-                    false;
-                }
-              }
-            "
-            @undo="
-              (index) => {
-                if (
-                  currentFromDataEmployee.employeeCheckup?.[index]
-                    .statusSave === false
-                ) {
-                  employeeFormState.currentIndex = -1;
-                  currentFromDataEmployee.employeeCheckup[index].statusSave =
-                    true;
+          <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"
+                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>
+
+            <BasicInformation
+              no-action
+              id="drawer-form-information"
+              prefix-id="drawer-info-employee"
+              dense
+              outlined
+              :title="'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';
                 }
-              }
-            "
-            @delete="
-              (index) => {
-                employeeFormState.currentIndex = index;
-                deleteEmployeeById({ type: 'healthCheck' });
-              }
-            "
-          />
-          <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
-                ) {
-                  employeeFormState.currentIndex = -1;
-                  currentFromDataEmployee.employeeWork[index].statusSave = true;
+              "
+              @edit="
+                () => {
+                  employeeFormState.isEmployeeEdit = true;
+                  employeeFormState.dialogType = 'edit';
                 }
-              }
-            "
-            @edit="
-              (index) => {
-                if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
+              "
+              @save="async () => {}"
+              @delete="
+                () => deleteEmployeeById({ id: currentFromDataEmployee.id })
+              "
+            />
+            <FormPerson
+              id="drawer-form-personal"
+              prefix-id="drawer-info-employee"
+              dense
+              outlined
+              employee
+              separator
+              :title="'personalInfo'"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              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="drawer-form-personal-address"
+              employee
+              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"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              prefix-id="drawer-info-personnel"
+              dense
+            />
+            <FormEmployeePassport
+              prefix-id="drawer-info-employee"
+              id="drawer-form-passport"
+              dense
+              outlined
+              separator
+              :title="'formDialogTitlePassport'"
+              :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
+              prefix-id="drawer-info-employee"
+              id="drawer-form-visa"
+              dense
+              outlined
+              :title="`formDialogTitleVisa`"
+              :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>
+
+          <template v-if="employeeFormState.currentTab === 'healthCheck'">
+            >
+
+            <FormEmployeeHealthCheck
+              v-if="employeeFormState.currentTab === 'healthCheck'"
+              id="drawer-form-checkup"
+              prefix-id="form-employee"
+              dense
+              outlined
+              v-model:current-index="employeeFormState.currentIndex"
+              v-model:employee-checkup="currentFromDataEmployee.employeeCheckup"
+              v-model:checkup-type-option="
+                optionStore.globalOption.insurancePlace
+              "
+              v-model:medical-benefit-option="
+                optionStore.globalOption.typeInsurance
+              "
+              v-model:insuranceCompanyOption="
+                optionStore.globalOption.insurancePlace
+              "
+              @save="
+                (index) => {
                   employeeFormState.currentIndex = index;
-                  currentFromDataEmployee.employeeWork[index].statusSave =
-                    false;
+                  notify('create', $t('success'));
                 }
-              }
-            "
-          />
-          <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="
+                (index) => {
+                  if (
+                    currentFromDataEmployee.employeeCheckup?.[index].statusSave
+                  ) {
+                    employeeFormState.currentIndex = index;
+                    currentFromDataEmployee.employeeCheckup[index].statusSave =
+                      false;
+                  }
                 }
-              }
-            "
-            @edit="
-              () => {
-                if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
-                  currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+              "
+              @undo="
+                (index) => {
+                  if (
+                    currentFromDataEmployee.employeeCheckup?.[index]
+                      .statusSave === false
+                  ) {
+                    employeeFormState.currentIndex = -1;
+                    currentFromDataEmployee.employeeCheckup[index].statusSave =
+                      true;
+                    employeeFormStore.resetFormDataEmployee();
+                  }
                 }
-              }
-            "
-          />
+              "
+              @delete="
+                (index) => {
+                  employeeFormState.currentIndex = index;
+                  deleteEmployeeById({ type: 'healthCheck' });
+                }
+              "
+            />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'workHistory'">
+            <FormEmployeeWorkHistory
+              v-if="employeeFormState.currentTab === 'workHistory'"
+              id="drawer-work-history"
+              prefix-id="drawer-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
+                  ) {
+                    employeeFormState.currentIndex = -1;
+                    currentFromDataEmployee.employeeWork[index].statusSave =
+                      true;
+                  }
+                }
+              "
+              @edit="
+                (index) => {
+                  if (
+                    currentFromDataEmployee.employeeWork?.[index].statusSave
+                  ) {
+                    employeeFormState.currentIndex = index;
+                    currentFromDataEmployee.employeeWork[index].statusSave =
+                      false;
+                  }
+                }
+              "
+            />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'other'">
+            <FormEmployeeOther
+              v-if="employeeFormState.currentTab === 'other'"
+              id="drawer-other"
+              prefix-id="drawer-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>