refactor: edit div of DrawerInfo

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,13 +2271,10 @@ const emptyCreateDialog = ref(false);
       }
     "
   >
-    <div class="full-height full-width column">
+    <div class="q-px-lg q-pt-lg surface-2">
-      <div class="q-mx-lg q-mt-lg">
       <ProfileBanner
         @view="employeeFormState.imageDialog = true"
-          @edit="
+        @edit="dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()"
-            dialogEmployeeImageUpload && dialogEmployeeImageUpload.browse()
-          "
         @update:toggle-status="
           (v) => {
             if (currentFromDataEmployee.id !== undefined)
@@ -2302,33 +2305,40 @@ const emptyCreateDialog = ref(false);
         "
       />
     </div>
+
     <div
-        class="col surface-1 q-ma-lg rounded bordered scroll row"
+      style="flex: 1; width: 100%; overflow-y: auto"
-        id="employee-form"
+      class="surface-2 q-pa-lg"
+      id="drawer-employee-form"
     >
-        <div class="col">
+      <div class="col surface-1 full-height rounded bordered scroll row">
-          <div style="position: sticky; top: 0" class="q-pa-sm">
+        <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,18 +2346,66 @@ 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-12 col-md-10 q-py-md q-pr-md q-pl-sm"
-          class="col-10 q-pa-md q-gutter-y-xl"
+          id="drawer-employee-form-content"
+          style="height: 290px; overflow-y: auto"
         >
+          <template v-if="employeeFormState.currentTab === 'personalInfo'">
+            <div
+              class="q-pt-sm row"
+              style="position: absolute; z-index: 999; right: 4%"
+            >
+              <UndoButton
+                v-if="employeeFormState.isEmployeeEdit"
+                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="$route.name === 'CustomerBranchManagement'"
+              no-action
-            id="form-information"
+              id="drawer-form-information"
               prefix-id="drawer-info-employee"
               dense
               outlined
@@ -2378,7 +2436,7 @@ const emptyCreateDialog = ref(false);
               "
             />
             <FormPerson
-            id="form-personal"
+              id="drawer-form-personal"
               prefix-id="drawer-info-employee"
               dense
               outlined
@@ -2395,7 +2453,7 @@ const emptyCreateDialog = ref(false);
               v-model:nationality="currentFromDataEmployee.nationality"
             />
             <AddressForm
-            id="form-personal-address"
+              id="drawer-form-personal-address"
               employee
               v-model:address="currentFromDataEmployee.address"
               v-model:addressEN="currentFromDataEmployee.addressEN"
@@ -2409,7 +2467,7 @@ const emptyCreateDialog = ref(false);
             />
             <FormEmployeePassport
               prefix-id="drawer-info-employee"
-            id="form-passport"
+              id="drawer-form-passport"
               dense
               outlined
               separator
@@ -2435,7 +2493,7 @@ const emptyCreateDialog = ref(false);
             />
             <FormEmployeeVisa
               prefix-id="drawer-info-employee"
-            id="form-visa"
+              id="drawer-form-visa"
               dense
               outlined
               :title="`formDialogTitleVisa`"
@@ -2453,11 +2511,14 @@ const emptyCreateDialog = ref(false);
               v-model:tm6-number="currentFromDataEmployee.tm6Number"
               v-model:entry-date="currentFromDataEmployee.entryDate"
             />
-        </div>
+          </template>
-        <div class="col-10 q-pa-md q-gutter-y-xl" v-else>
+
+          <template v-if="employeeFormState.currentTab === 'healthCheck'">
+            >
+
             <FormEmployeeHealthCheck
               v-if="employeeFormState.currentTab === 'healthCheck'"
-            id="form-checkup"
+              id="drawer-form-checkup"
               prefix-id="form-employee"
               dense
               outlined
@@ -2509,10 +2570,13 @@ const emptyCreateDialog = ref(false);
                 }
               "
             />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'workHistory'">
             <FormEmployeeWorkHistory
               v-if="employeeFormState.currentTab === 'workHistory'"
-            id="form-work-history"
+              id="drawer-work-history"
-            prefix-id="form-employee"
+              prefix-id="drawer-employee"
               dense
               outlined
               v-model:current-index="employeeFormState.currentIndex"
@@ -2538,13 +2602,16 @@ const emptyCreateDialog = ref(false);
                     false
                   ) {
                     employeeFormState.currentIndex = -1;
-                  currentFromDataEmployee.employeeWork[index].statusSave = true;
+                    currentFromDataEmployee.employeeWork[index].statusSave =
+                      true;
                   }
                 }
               "
               @edit="
                 (index) => {
-                if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
+                  if (
+                    currentFromDataEmployee.employeeWork?.[index].statusSave
+                  ) {
                     employeeFormState.currentIndex = index;
                     currentFromDataEmployee.employeeWork[index].statusSave =
                       false;
@@ -2552,10 +2619,13 @@ const emptyCreateDialog = ref(false);
                 }
               "
             />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'other'">
             <FormEmployeeOther
               v-if="employeeFormState.currentTab === 'other'"
-            id="form-other"
+              id="drawer-other"
-            prefix-id="form-employee"
+              prefix-id="drawer-employee"
               dense
               outlined
               v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
@@ -2577,6 +2647,7 @@ const emptyCreateDialog = ref(false);
                 }
               "
             />
+          </template>
         </div>
       </div>
     </div>