From 3b30e9a736d57a12fb1c3be3801af43f76dd9168 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 11 Dec 2024 13:52:23 +0700
Subject: [PATCH] refactor: customer => display no data condition

---
 src/pages/03_customer-management/MainPage.vue | 647 +++++++++---------
 1 file changed, 338 insertions(+), 309 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 3021c1ce..6c9c542b 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -5050,8 +5050,8 @@ const emptyCreateDialog = ref(false);
             </template>
 
             <template v-if="employeeFormState.currentTab === 'passport'">
-              <div class="q-gutter-sm full-width">
-                <div class="col-12 q-pb-sm text-weight-bold text-body1">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <div class="q-pb-sm text-weight-bold text-body1">
                   <q-icon
                     flat
                     size="xs"
@@ -5069,38 +5069,197 @@ const emptyCreateDialog = ref(false);
                   ) in currentFromDataEmployee.employeePassport"
                   :key="index"
                 >
-                  <FormEmployeePassport
-                    v-if="value !== undefined"
+                  <div class="col" v-if="value !== undefined">
+                    <FormEmployeePassport
+                      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 &&
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                employeeFormState.currentIndexPassport ===
+                                  index)
+                            "
+                            id="btn-info-basic-delete"
+                            icon-only
+                            @click.stop="
+                              () => {
+                                deleteEmployeeById({ type: 'passport', index });
+                              }
+                            "
+                            type="button"
+                            :disabled="
+                              !(
+                                employeeFormState.currentIndexPassport === -1
+                              ) &&
+                              !(
+                                employeeFormState.currentIndexPassport === index
+                              )
+                            "
+                          />
+                        </div>
+                      </template>
+                    </FormEmployeePassport>
+                  </div>
+                </template>
+
+                <div
+                  class="full-width flex flex-center col"
+                  v-if="currentFromDataEmployee.employeePassport?.length === 0"
+                >
+                  <NoData />
+                </div>
+              </div>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'visa'">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <div class="q-pb-sm text-weight-bold text-body1">
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-passport"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t('customerEmployee.form.group.visa') }}
+                </div>
+                <div class="col">
+                  <FormEmployeeVisa
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeeVisa"
+                    :key="index"
                     prefix-id="drawer-info-employee"
-                    id="form-passport"
-                    hide-title
+                    id="form-visa"
                     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"
+                    :title="$t('customerEmployee.form.group.visa')"
+                    :readonly="employeeFormState.currentIndexVisa !== index"
+                    hide-title
+                    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:issue-date="value.issueDate"
+                    v-model:issueDate="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"
+                    v-model:visa-issue-date="value.issueDate"
+                    v-model:visa-expiry-date="value.expireDate"
+                    v-model:remark="value.remark"
+                    v-model:worker-type="value.workerType"
+                    v-model:number="value.number"
                   >
                     <template v-slot:expiryDate>
                       {{ $t('general.expirationDate') }} :
@@ -5119,8 +5278,8 @@ const emptyCreateDialog = ref(false);
                         <UndoButton
                           v-if="
                             employeeFormState.isEmployeeEdit &&
-                            !(employeeFormState.currentIndexPassport === -1) &&
-                            employeeFormState.currentIndexPassport === index
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            employeeFormState.currentIndexVisa === index
                           "
                           id="btn-info-basic-undo"
                           icon-only
@@ -5129,7 +5288,7 @@ const emptyCreateDialog = ref(false);
                               employeeFormStore.resetFormDataEmployee();
                               employeeFormState.isEmployeeEdit = false;
                               employeeFormState.dialogType = 'info';
-                              employeeFormState.currentIndexPassport = -1;
+                              employeeFormState.currentIndexVisa = -1;
                             }
                           "
                           type="button"
@@ -5138,14 +5297,14 @@ const emptyCreateDialog = ref(false);
                           v-if="
                             (employeeFormState.isEmployeeEdit ||
                               value.id === undefined) &&
-                            !(employeeFormState.currentIndexPassport === -1) &&
-                            employeeFormState.currentIndexPassport === index
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            employeeFormState.currentIndexVisa === index
                           "
                           id="btn-info-basic-save"
                           icon-only
                           @click="
                             () => {
-                              employeeFormState.currentIndexPassport = index;
+                              employeeFormState.currentIndexVisa = index;
                             }
                           "
                           type="submit"
@@ -5153,16 +5312,16 @@ const emptyCreateDialog = ref(false);
 
                         <EditButton
                           v-if="
-                            employeeFormState.currentIndexPassport === -1 ||
+                            employeeFormState.currentIndexVisa === -1 ||
                             (!employeeFormState.isEmployeeEdit &&
                               value.id !== undefined &&
-                              employeeFormState.currentIndexPassport === index)
+                              employeeFormState.currentIndexVisa === index)
                           "
                           id="btn-info-basic-edit"
                           icon-only
                           @click="
                             () => {
-                              employeeFormState.currentIndexPassport = index;
+                              employeeFormState.currentIndexVisa = index;
                               employeeFormState.isEmployeeEdit = true;
                               employeeFormState.dialogType = 'edit';
                             }
@@ -5171,180 +5330,40 @@ const emptyCreateDialog = ref(false);
                         />
                         <DeleteButton
                           v-if="
-                            employeeFormState.currentIndexPassport === -1 ||
+                            employeeFormState.currentIndexVisa === -1 ||
                             (!employeeFormState.isEmployeeEdit &&
                               value.id !== undefined &&
-                              !(
-                                employeeFormState.currentIndexPassport === -1
-                              ) &&
-                              employeeFormState.currentIndexPassport === index)
+                              !(employeeFormState.currentIndexVisa === -1) &&
+                              employeeFormState.currentIndexVisa === index)
                           "
                           id="btn-info-basic-delete"
                           icon-only
                           @click.stop="
                             () => {
-                              deleteEmployeeById({ type: 'passport', index });
+                              deleteEmployeeById({ type: 'visa', index });
                             }
                           "
                           type="button"
                           :disabled="
-                            !(employeeFormState.currentIndexPassport === -1) &&
-                            !(employeeFormState.currentIndexPassport === index)
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            !(employeeFormState.currentIndexVisa === index)
                           "
                         />
                       </div>
                     </template>
-                  </FormEmployeePassport>
-                </template>
-
-                <div class="full-width full-height flex flex-center">
-                  <NoData
-                    v-if="
-                      currentFromDataEmployee.employeePassport?.length === 0
-                    "
-                  />
+                  </FormEmployeeVisa>
                 </div>
-              </div>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'visa'">
-              <div class="q-gutter-sm full-width">
-                <div class="col-12 q-pb-sm text-weight-bold text-body1">
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-xs"
-                    color="info"
-                    name="mdi-passport"
-                    style="background-color: var(--surface-3)"
-                  />
-                  {{ $t('customerEmployee.form.group.visa') }}
-                </div>
-                <FormEmployeeVisa
-                  v-for="(value, index) in currentFromDataEmployee.employeeVisa"
-                  :key="index"
-                  prefix-id="drawer-info-employee"
-                  id="form-visa"
-                  dense
-                  outlined
-                  :title="$t('customerEmployee.form.group.visa')"
-                  :readonly="employeeFormState.currentIndexVisa !== index"
-                  hide-title
-                  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:remark="value.remark"
-                  v-model:worker-type="value.workerType"
-                  v-model:number="value.number"
+                <div
+                  v-if="currentFromDataEmployee.employeeVisa?.length === 0"
+                  class="full-width col flex flex-center"
                 >
-                  <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.currentIndexVisa === -1) &&
-                          employeeFormState.currentIndexVisa === index
-                        "
-                        id="btn-info-basic-undo"
-                        icon-only
-                        @click="
-                          () => {
-                            employeeFormStore.resetFormDataEmployee();
-                            employeeFormState.isEmployeeEdit = false;
-                            employeeFormState.dialogType = 'info';
-                            employeeFormState.currentIndexVisa = -1;
-                          }
-                        "
-                        type="button"
-                      />
-                      <SaveButton
-                        v-if="
-                          (employeeFormState.isEmployeeEdit ||
-                            value.id === undefined) &&
-                          !(employeeFormState.currentIndexVisa === -1) &&
-                          employeeFormState.currentIndexVisa === index
-                        "
-                        id="btn-info-basic-save"
-                        icon-only
-                        @click="
-                          () => {
-                            employeeFormState.currentIndexVisa = index;
-                          }
-                        "
-                        type="submit"
-                      />
-
-                      <EditButton
-                        v-if="
-                          employeeFormState.currentIndexVisa === -1 ||
-                          (!employeeFormState.isEmployeeEdit &&
-                            value.id !== undefined &&
-                            employeeFormState.currentIndexVisa === index)
-                        "
-                        id="btn-info-basic-edit"
-                        icon-only
-                        @click="
-                          () => {
-                            employeeFormState.currentIndexVisa = index;
-                            employeeFormState.isEmployeeEdit = true;
-                            employeeFormState.dialogType = 'edit';
-                          }
-                        "
-                        type="button"
-                      />
-                      <DeleteButton
-                        v-if="
-                          employeeFormState.currentIndexVisa === -1 ||
-                          (!employeeFormState.isEmployeeEdit &&
-                            value.id !== undefined &&
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            employeeFormState.currentIndexVisa === index)
-                        "
-                        id="btn-info-basic-delete"
-                        icon-only
-                        @click.stop="
-                          () => {
-                            deleteEmployeeById({ type: 'visa', index });
-                          }
-                        "
-                        type="button"
-                        :disabled="
-                          !(employeeFormState.currentIndexVisa === -1) &&
-                          !(employeeFormState.currentIndexVisa === index)
-                        "
-                      />
-                    </div>
-                  </template>
-                </FormEmployeeVisa>
-
-                <div class="full-width full-height flex flex-center">
-                  <NoData
-                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
-                  />
+                  <NoData />
                 </div>
               </div>
             </template>
 
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
-              <div class="q-gutter-sm full-width">
+              <div class="q-gutter-sm full-width column">
                 <div
                   class="q-pb-sm text-weight-bold text-body1 row items-center"
                 >
@@ -5360,81 +5379,85 @@ const emptyCreateDialog = ref(false);
                   {{ $t(`customerEmployee.formHealthCheck.title`) }}
                 </div>
 
-                <FormEmployeeHealthCheck
-                  v-if="employeeFormState.currentTab === 'healthCheck'"
-                  id="drawer-form-checkup"
-                  prefix-id="drawer-employee"
-                  dense
-                  outlined
-                  :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                  v-model:current-index="employeeFormState.currentIndexCheckup"
-                  v-model:employee-checkup="
-                    currentFromDataEmployee.employeeCheckup
-                  "
-                  v-model:checkup-results-option="
-                    optionStore.globalOption.checkupResults
-                  "
-                  v-model:checkup-type-option="
-                    optionStore.globalOption.insurancePlace
-                  "
-                  v-model:medical-benefit-option="
-                    optionStore.globalOption.typeInsurance
-                  "
-                  v-model:insurance-company-option="
-                    optionStore.globalOption.insurancePlace
-                  "
-                  @save="
-                    (index) => {
-                      employeeFormState.currentIndexCheckup = index;
-                      notify('create', $t('general.success'));
-                    }
-                  "
-                  @edit="
-                    (index) => {
-                      if (
-                        currentFromDataEmployee.employeeCheckup?.[index]
-                          .statusSave
-                      ) {
+                <div class="col">
+                  <FormEmployeeHealthCheck
+                    v-if="employeeFormState.currentTab === 'healthCheck'"
+                    id="drawer-form-checkup"
+                    prefix-id="drawer-employee"
+                    dense
+                    outlined
+                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                    v-model:current-index="
+                      employeeFormState.currentIndexCheckup
+                    "
+                    v-model:employee-checkup="
+                      currentFromDataEmployee.employeeCheckup
+                    "
+                    v-model:checkup-results-option="
+                      optionStore.globalOption.checkupResults
+                    "
+                    v-model:checkup-type-option="
+                      optionStore.globalOption.insurancePlace
+                    "
+                    v-model:medical-benefit-option="
+                      optionStore.globalOption.typeInsurance
+                    "
+                    v-model:insurance-company-option="
+                      optionStore.globalOption.insurancePlace
+                    "
+                    @save="
+                      (index) => {
                         employeeFormState.currentIndexCheckup = index;
-                        currentFromDataEmployee.employeeCheckup[
-                          index
-                        ].statusSave = false;
+                        notify('create', $t('general.success'));
                       }
-                    }
-                  "
-                  @undo="
-                    (index) => {
-                      if (
-                        currentFromDataEmployee.employeeCheckup?.[index]
-                          .statusSave === false
-                      ) {
-                        employeeFormState.currentIndexCheckup = -1;
-                        currentFromDataEmployee.employeeCheckup[
-                          index
-                        ].statusSave = true;
-                        employeeFormStore.resetFormDataEmployee();
+                    "
+                    @edit="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeCheckup?.[index]
+                            .statusSave
+                        ) {
+                          employeeFormState.currentIndexCheckup = index;
+                          currentFromDataEmployee.employeeCheckup[
+                            index
+                          ].statusSave = false;
+                        }
                       }
-                    }
-                  "
-                  @delete="
-                    (index) => {
-                      employeeFormState.currentIndexCheckup = index;
-                      deleteEmployeeById({ type: 'healthCheck', index });
-                    }
-                  "
-                />
-
-                <div class="full-width full-height flex flex-center">
-                  <NoData
-                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
+                    "
+                    @undo="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeCheckup?.[index]
+                            .statusSave === false
+                        ) {
+                          employeeFormState.currentIndexCheckup = -1;
+                          currentFromDataEmployee.employeeCheckup[
+                            index
+                          ].statusSave = true;
+                          employeeFormStore.resetFormDataEmployee();
+                        }
+                      }
+                    "
+                    @delete="
+                      (index) => {
+                        employeeFormState.currentIndexCheckup = index;
+                        deleteEmployeeById({ type: 'healthCheck', index });
+                      }
+                    "
                   />
                 </div>
+                <div
+                  class="full-width col flex flex-center"
+                  v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
+                >
+                  <NoData />
+                </div>
               </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'workHistory'">
-              <div class="q-gutter-sm full-width">
+              <div class="q-gutter-sm full-width column">
                 <div
-                  class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
                 >
                   <q-icon
                     flat
@@ -5447,65 +5470,71 @@ const emptyCreateDialog = ref(false);
                   {{ $t(`customerEmployee.form.group.workHistory`) }}
                 </div>
 
-                <FormEmployeeWorkHistory
-                  v-if="employeeFormState.currentTab === 'workHistory'"
-                  id="drawer-work-history"
-                  prefix-id="drawer-employee"
-                  dense
-                  :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                  outlined
-                  v-model:current-index="
-                    employeeFormState.currentIndexWorkHistory
-                  "
-                  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.currentIndexWorkHistory = index;
-                      deleteEmployeeById({ type: 'work', index });
-                    }
-                  "
-                  @save="
-                    (index) => {
-                      employeeFormState.currentIndexWorkHistory = index;
-                    }
-                  "
-                  @undo="
-                    (index) => {
-                      if (
-                        currentFromDataEmployee.employeeWork?.[index]
-                          .statusSave === false
-                      ) {
-                        employeeFormState.currentIndexWorkHistory = -1;
-                        currentFromDataEmployee.employeeWork[index].statusSave =
-                          true;
-                      }
-                    }
-                  "
-                  @edit="
-                    (index) => {
-                      if (
-                        currentFromDataEmployee.employeeWork?.[index].statusSave
-                      ) {
+                <div class="col">
+                  <FormEmployeeWorkHistory
+                    v-if="employeeFormState.currentTab === 'workHistory'"
+                    id="drawer-work-history"
+                    prefix-id="drawer-employee"
+                    dense
+                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                    outlined
+                    v-model:current-index="
+                      employeeFormState.currentIndexWorkHistory
+                    "
+                    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.currentIndexWorkHistory = index;
-                        currentFromDataEmployee.employeeWork[index].statusSave =
-                          false;
+                        deleteEmployeeById({ type: 'work', index });
                       }
-                    }
-                  "
-                />
+                    "
+                    @save="
+                      (index) => {
+                        employeeFormState.currentIndexWorkHistory = index;
+                      }
+                    "
+                    @undo="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeWork?.[index]
+                            .statusSave === false
+                        ) {
+                          employeeFormState.currentIndexWorkHistory = -1;
+                          currentFromDataEmployee.employeeWork[
+                            index
+                          ].statusSave = true;
+                        }
+                      }
+                    "
+                    @edit="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeWork?.[index]
+                            .statusSave
+                        ) {
+                          employeeFormState.currentIndexWorkHistory = index;
+                          currentFromDataEmployee.employeeWork[
+                            index
+                          ].statusSave = false;
+                        }
+                      }
+                    "
+                  />
+                </div>
               </div>
 
-              <div class="full-width full-height flex flex-center">
-                <NoData
-                  v-if="currentFromDataEmployee.employeeWork?.length === 0"
-                />
+              <div
+                class="full-width col flex flex-center"
+                v-if="currentFromDataEmployee.employeeWork?.length === 0"
+              >
+                <NoData />
               </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'other'">