From f8e39d21b22b8d646b50c3eba0979e903f1615ea Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Mon, 19 Aug 2024 17:56:36 +0700
Subject: [PATCH] refactor: add div column

---
 src/pages/03_customer-management/MainPage.vue | 759 +++++++++---------
 1 file changed, 383 insertions(+), 376 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 4446f4da..53abe278 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2409,393 +2409,400 @@ const emptyCreateDialog = ref(false);
       }
     "
   >
-    <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: 'drawer-form-information',
-                    tab: 'personalInfo',
-                  },
-                  {
-                    name: $t('formDialogTitlePersonal'),
-                    anchor: 'drawer-form-personal',
-                    tab: 'personalInfo',
-                  },
-                  {
-                    name: $t('formDialogTitlePersonnelAddress'),
-                    anchor: 'drawer-form-personal-address',
-                    tab: 'personalInfo',
-                  },
-                  {
-                    name: $t('formDialogTitlePassport'),
-                    anchor: 'drawer-form-passport',
-                    tab: 'personalInfo',
-                  },
-                  {
-                    name: $t('formDialogTitleVisa'),
-                    anchor: 'drawer-form-visa',
-                    tab: 'personalInfo',
-                  },
-                  ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
-                    name: $t('customer.form.instance', { index: i + 1 }),
-                    anchor: `drawer-employee-checkup-${i}`,
-                    tab: 'healthCheck',
-                  })) || []),
-
-                  ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
-                    name: $t('customer.form.instance', { index: i + 1 }),
-                    anchor: `drawer-employee-work-history-${i}`,
-                    tab: 'workHistory',
-                  })) || []),
-
-                  {
-                    name: $t('formDialogTitleFamilyHistory'),
-                    anchor: 'drawer-other',
-                    tab: 'other',
-                  },
-                ].filter((v) => v.tab === employeeFormState.currentTab)
-              "
-              background="transparent"
-              :active="{
-                background: 'hsla(var(--blue-6-hsl) / .2)',
-                foreground: 'var(--blue-6)',
-              }"
-              scroll-element="#drawer-employee-form-content"
-            />
-          </div>
-        </div>
-
-        <div
-          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"
-        >
-          <template v-if="employeeFormState.currentTab === 'personalInfo'">
-            <div
-              class="surface-1 rounded 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';
-                  }
+    <div class="column full-height">
+      <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 column"
+        id="drawer-employee-form"
+      >
+        <div class="col bg-red surface-1 rounded bordered row">
+          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="
+                  [
+                    {
+                      name: $t('formDialogTitleInformation'),
+                      anchor: 'drawer-form-information',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('formDialogTitlePersonal'),
+                      anchor: 'drawer-form-personal',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('formDialogTitlePersonnelAddress'),
+                      anchor: 'drawer-form-personal-address',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('formDialogTitlePassport'),
+                      anchor: 'drawer-form-passport',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('formDialogTitleVisa'),
+                      anchor: 'drawer-form-visa',
+                      tab: 'personalInfo',
+                    },
+                    ...(currentFromDataEmployee.employeeCheckup?.map(
+                      (v, i) => ({
+                        name: $t('customer.form.instance', { index: i + 1 }),
+                        anchor: `drawer-employee-checkup-${i}`,
+                        tab: 'healthCheck',
+                      }),
+                    ) || []),
+                    ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
+                      name: $t('customer.form.instance', { index: i + 1 }),
+                      anchor: `drawer-employee-work-history-${i}`,
+                      tab: 'workHistory',
+                    })) || []),
+                    {
+                      name: $t('formDialogTitleFamilyHistory'),
+                      anchor: 'drawer-other',
+                      tab: 'other',
+                    },
+                  ].filter((v) => v.tab === employeeFormState.currentTab)
                 "
-                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"
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#drawer-employee-form-content"
               />
             </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"
-              class="q-mb-xl"
-            />
-            <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"
-              class="q-mb-xl"
-            />
-            <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
-              class="q-mb-xl"
-            />
-            <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
-              "
-              class="q-mb-xl"
-            />
-            <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"
-              class="q-mb-xl"
-            />
-          </template>
-
-          <template v-if="employeeFormState.currentTab === 'healthCheck'">
-            <FormEmployeeHealthCheck
-              v-if="employeeFormState.currentTab === 'healthCheck'"
-              id="drawer-form-checkup"
-              prefix-id="drawer-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
-                  ) {
+          </div>
+          <div
+            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+            id="drawer-employee-form-content"
+            style="height: 100%; overflow-y: auto"
+          >
+            <template v-if="employeeFormState.currentTab === 'personalInfo'">
+              <div
+                class="surface-1 rounded 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
+                "
+                class="q-mb-xl"
+              />
+              <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"
+                class="q-mb-xl"
+              />
+              <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
+                class="q-mb-xl"
+              />
+              <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
+                "
+                class="q-mb-xl"
+              />
+              <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"
+                class="q-mb-xl"
+              />
+            </template>
+            <template v-if="employeeFormState.currentTab === 'healthCheck'">
+              <FormEmployeeHealthCheck
+                v-if="employeeFormState.currentTab === 'healthCheck'"
+                id="drawer-form-checkup"
+                prefix-id="drawer-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.employeeCheckup[index].statusSave =
-                      false;
+                    notify('create', $t('success'));
                   }
-                }
-              "
-              @undo="
-                (index) => {
-                  if (
-                    currentFromDataEmployee.employeeCheckup?.[index]
-                      .statusSave === false
-                  ) {
-                    employeeFormState.currentIndex = -1;
-                    currentFromDataEmployee.employeeCheckup[index].statusSave =
-                      true;
-                    employeeFormStore.resetFormDataEmployee();
+                "
+                @edit="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeCheckup?.[index]
+                        .statusSave
+                    ) {
+                      employeeFormState.currentIndex = index;
+                      currentFromDataEmployee.employeeCheckup[
+                        index
+                      ].statusSave = false;
+                    }
                   }
-                }
-              "
-              @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;
+                "
+                @undo="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeCheckup?.[index]
+                        .statusSave === false
+                    ) {
+                      employeeFormState.currentIndex = -1;
+                      currentFromDataEmployee.employeeCheckup[
+                        index
+                      ].statusSave = true;
+                      employeeFormStore.resetFormDataEmployee();
+                    }
                   }
-                }
-              "
-              @edit="
-                (index) => {
-                  if (
-                    currentFromDataEmployee.employeeWork?.[index].statusSave
-                  ) {
+                "
+                @delete="
+                  (index) => {
                     employeeFormState.currentIndex = index;
-                    currentFromDataEmployee.employeeWork[index].statusSave =
-                      false;
+                    deleteEmployeeById({ type: 'healthCheck' });
                   }
-                }
-              "
-            />
-          </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;
+                "
+              />
+            </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' });
                   }
-                }
-              "
-              @edit="
-                () => {
-                  if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
-                    currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                "
+                @save="
+                  (index) => {
+                    employeeFormState.currentIndex = index;
                   }
-                }
-              "
-            />
-          </template>
+                "
+                @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>
     </div>