refactor: edit div of DialogForm

src/pages/03_customer-management/MainPage.vue

@@ -213,7 +213,9 @@ const fieldDisplayEmployee = ref<
 
 const fieldSelected = ref<
   (
+    | 'orderNumber'
     | 'customerName'
+    | 'businessTypePure'
     | 'type'
     | 'personName'
     | 'telephoneNo'
@@ -228,7 +230,9 @@ const fieldSelected = ref<
     | 'action'
   )[]
 >([
+  'orderNumber',
   'customerName',
+  'businessTypePure',
   'personName',
   'telephoneNo',
   'branchEmail',
@@ -1793,6 +1797,7 @@ const emptyCreateDialog = ref(false);
         }
 
         employeeFormState.isEmployeeEdit = false;
+        employeeFormState.currentIndex = -1;
 
         await fetchListEmployee();
       }
@@ -1813,7 +1818,7 @@ const emptyCreateDialog = ref(false);
       }
     "
   >
-    <div class="q-mx-lg q-mt-lg">
+    <div class="q-px-lg q-pt-lg surface-2">
       <ProfileBanner
         active
         useToggle
@@ -1859,11 +1864,17 @@ 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="personnel-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="
                 employeeFormState.currentTab === 'personalInfo'
@@ -1917,16 +1928,68 @@ const emptyCreateDialog = ref(false);
                 background: 'hsla(var(--blue-6-hsl) / .2)',
                 foreground: 'var(--blue-6)',
               }"
-            scroll-element="#employee-form"
+              scroll-element="#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="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
         >
+          <template v-if="employeeFormState.currentTab === 'personalInfo'">
+            <div
+              class="q-pt-sm row"
+              style="position: absolute; z-index: 999; right: 4%"
+            >
+              <UndoButton
+                v-if="
+                  employeeFormState.isEmployeeEdit &&
+                  employeeFormState.dialogType !== 'create'
+                "
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormStore.resetFormDataEmployee();
+                    employeeFormState.isEmployeeEdit = false;
+                    employeeFormState.dialogType = 'info';
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormState.isEmployeeEdit = true;
+                    employeeFormState.dialogType = 'edit';
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="
+                  () => deleteEmployeeById({ id: currentFromDataEmployee.id })
+                "
+                type="button"
+              />
+            </div>
+
             <BasicInformation
+              no-action
               id="form-information"
               prefix-id="form-employee"
               :show-btn-save="employeeFormState.dialogType === 'create'"
@@ -1942,21 +2005,6 @@ const emptyCreateDialog = ref(false);
               v-model:nrc-no="currentFromDataEmployee.nrcNo"
               v-model:code="currentFromDataEmployee.code"
               @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
-          @undo="
-            () => {
-              employeeFormStore.resetFormDataEmployee();
-              employeeFormState.isEmployeeEdit = false;
-              employeeFormState.dialogType = 'info';
-            }
-          "
-          @edit="
-            () => {
-              employeeFormState.isEmployeeEdit = true;
-              employeeFormState.dialogType = 'edit';
-            }
-          "
-          @save="() => {}"
-          @delete="() => deleteEmployeeById({ id: currentFromDataEmployee.id })"
             />
             <FormPerson
               id="form-personal"
@@ -2027,16 +2075,18 @@ const emptyCreateDialog = ref(false);
               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-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>
+          </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"
@@ -2045,8 +2095,12 @@ const emptyCreateDialog = ref(false);
               outlined
               v-model:current-index="employeeFormState.currentIndex"
               v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
-          v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
+              v-model:checkupTypeOption="
-          v-model:medicalBenefitOption="optionStore.globalOption.typeInsurance"
+                optionStore.globalOption.insurancePlace
+              "
+              v-model:medicalBenefitOption="
+                optionStore.globalOption.typeInsurance
+              "
               v-model:insuranceCompanyOption="
                 optionStore.globalOption.insurancePlace
               "
@@ -2065,8 +2119,8 @@ const emptyCreateDialog = ref(false);
               @undo="
                 (index) => {
                   if (
-                currentFromDataEmployee.employeeCheckup?.[index].statusSave ===
+                    currentFromDataEmployee.employeeCheckup?.[index]
-                false
+                      .statusSave === false
                   ) {
                     currentFromDataEmployee.employeeCheckup[index].statusSave =
                       true;
@@ -2075,13 +2129,18 @@ const emptyCreateDialog = ref(false);
               "
               @edit="
                 (index) => {
-              if (currentFromDataEmployee.employeeCheckup?.[index].statusSave) {
+                  if (
+                    currentFromDataEmployee.employeeCheckup?.[index].statusSave
+                  ) {
                     currentFromDataEmployee.employeeCheckup[index].statusSave =
                       false;
                   }
                 }
               "
             />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'workHistory'">
             <FormEmployeeWorkHistory
               v-if="employeeFormState.currentTab === 'workHistory'"
               id="form-work-history"
@@ -2110,18 +2169,25 @@ const emptyCreateDialog = ref(false);
                     currentFromDataEmployee.employeeWork?.[index].statusSave ===
                     false
                   ) {
-                currentFromDataEmployee.employeeWork[index].statusSave = true;
+                    currentFromDataEmployee.employeeWork[index].statusSave =
+                      true;
                   }
                 }
               "
               @edit="
                 (index) => {
-              if (currentFromDataEmployee.employeeWork?.[index].statusSave) {
+                  if (
-                currentFromDataEmployee.employeeWork[index].statusSave = false;
+                    currentFromDataEmployee.employeeWork?.[index].statusSave
+                  ) {
+                    currentFromDataEmployee.employeeWork[index].statusSave =
+                      false;
                   }
                 }
               "
             />
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'other'">
             <FormEmployeeOther
               v-if="employeeFormState.currentTab === 'other'"
               id="form-other"
@@ -2132,7 +2198,8 @@ const emptyCreateDialog = ref(false);
               @undo="
                 () => {
                   if (
-                currentFromDataEmployee.employeeOtherInfo?.statusSave === false
+                    currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                    false
                   ) {
                     currentFromDataEmployee.employeeOtherInfo.statusSave = true;
                   }
@@ -2146,6 +2213,8 @@ const emptyCreateDialog = ref(false);
                 }
               "
             />
+          </template>
+        </div>
       </div>
     </div>
   </DialogForm>
@@ -2497,8 +2566,6 @@ const emptyCreateDialog = ref(false);
           </template>
 
           <template v-if="employeeFormState.currentTab === 'healthCheck'">
-            >
-
             <FormEmployeeHealthCheck
               v-if="employeeFormState.currentTab === 'healthCheck'"
               id="drawer-form-checkup"