From 968c1f72df35fd12146213c41b3e694f6614f10b Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Mon, 19 Aug 2024 09:47:50 +0700
Subject: [PATCH] refactor(02): edit btn save static

---
 .../02_personnel-management/MainPage.vue      | 269 ++++++++++--------
 1 file changed, 158 insertions(+), 111 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 7bb77a13..500d59a3 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1552,6 +1552,7 @@ watch(
     v-if="currentUser"
     :category="$t('personnelTitle')"
     bg-on
+    hide-action
     :isEdit="infoDrawerEdit"
     :title="
       $i18n.locale === 'en-US'
@@ -1559,15 +1560,8 @@ watch(
         : `${currentUser.firstName} ${currentUser.lastName}`
     "
     v-model:drawerOpen="infoDrawer"
-    :deleteData="() => onDelete(infoPersonId)"
     :submit="() => onSubmit()"
     :close="() => onClose()"
-    :undo="() => undo()"
-    :editData="
-      () => {
-        (infoDrawerEdit = true), (isImageEdit = true);
-      }
-    "
   >
     <InfoForm
       :readonly="!infoDrawerEdit"
@@ -1578,7 +1572,7 @@ watch(
       v-model:subDistrictId="formData.subDistrictId"
       v-model:zipCode="formData.zipCode"
     >
-      <div class="q-mx-lg q-mt-lg">
+      <div class="q-px-lg q-pt-lg surface-2">
         <ProfileBanner
           :active="formData.status !== 'INACTIVE'"
           useToggle
@@ -1610,113 +1604,166 @@ watch(
       <!-- ย้อนกลับ -->
 
       <div
-        class="col surface-1 q-ma-lg rounded bordered scroll row"
-        id="personnel-info"
+        style="flex: 1; width: 100%; overflow-y: auto"
+        class="surface-2 q-pa-lg"
+        id="drawer-user-form"
       >
-        <div class="col">
-          <div style="position: sticky; top: 0" class="q-pa-sm">
-            <SideMenu
-              :menu="[
-                {
-                  name: $t('formDialogTitleInformation'),
-                  anchor: 'info-information',
-                },
-                {
-                  name: $t('formDialogTitlePersonal'),
-                  anchor: 'info-personal',
-                },
-                {
-                  name: $t('formDialogTitleAddressPersonnel'),
-                  anchor: 'info-address',
-                },
-                {
-                  name: $t('formDialogTitleByType'),
-                  anchor: 'info-work',
-                },
-              ]"
-              background="transparent"
-              :active="{
-                background: 'hsla(var(--blue-6-hsl) / .2)',
-                foreground: 'var(--blue-6)',
-              }"
-              scroll-element="#personnel-info"
+        <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: 'info-information',
+                  },
+                  {
+                    name: $t('formDialogTitlePersonal'),
+                    anchor: 'info-personal',
+                  },
+                  {
+                    name: $t('formDialogTitleAddressPersonnel'),
+                    anchor: 'info-address',
+                  },
+                  {
+                    name: $t('formDialogTitleByType'),
+                    anchor: 'info-work',
+                  },
+                ]"
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#user-form-content"
+              />
+            </div>
+          </div>
+
+          <div
+            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+            id="user-form-content"
+            style="height: 100%; max-height: 100; overflow-y: auto"
+          >
+            <div
+              class="q-pt-sm row"
+              style="position: absolute; z-index: 999; right: 4%"
+            >
+              <UndoButton
+                v-if="infoDrawerEdit"
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    undo();
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="infoDrawerEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!infoDrawerEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    infoDrawerEdit = true;
+                    isImageEdit = true;
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!infoDrawerEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="() => onDelete(infoPersonId)"
+                type="button"
+              />
+            </div>
+
+            <FormInformation
+              id="info-information"
+              v-model:hq-id="hqId"
+              v-model:br-id="brId"
+              v-model:user-type="formData.userType"
+              v-model:user-role="formData.userRole"
+              v-model:username="formData.username"
+              v-model:user-code="userCode"
+              dense
+              outlined
+              separator
+              :title="'formDialogTitleInformation'"
+              :readonly="!infoDrawerEdit"
+              :usernameReadonly="isEdit"
+            />
+
+            <FormPerson
+              id="info-personal"
+              v-model:first-name="formData.firstName"
+              v-model:last-name="formData.lastName"
+              v-model:mid-name="formData.middleName"
+              v-model:mid-name-en="formData.middleNameEN"
+              v-model:prefix-name="formData.namePrefix"
+              v-model:prefix-name-en="formData.namePrefix"
+              v-model:first-name-en="formData.firstNameEN"
+              v-model:last-name-en="formData.lastNameEN"
+              v-model:telephone-no="formData.telephoneNo"
+              v-model:email="formData.email"
+              v-model:gender="formData.gender"
+              v-model:birth-date="formData.birthDate"
+              :title="'formDialogTitlePersonal'"
+              prefix-id="drawer-info-personnel"
+              dense
+              outlined
+              separator
+              :readonly="!infoDrawerEdit"
+            />
+
+            <AddressForm
+              id="info-address"
+              v-model:address="formData.address"
+              v-model:addressEN="formData.addressEN"
+              v-model:provinceId="formData.provinceId"
+              v-model:districtId="formData.districtId"
+              v-model:subDistrictId="formData.subDistrictId"
+              v-model:zipCode="formData.zipCode"
+              :readonly="!infoDrawerEdit"
+              prefix-id="drawer-info-personnel"
+              dense
+            />
+            <FormByType
+              dense
+              outlined
+              separator
+              id="info-work"
+              :readonly="!infoDrawerEdit"
+              v-model:userType="formData.userType"
+              v-model:registrationNo="formData.registrationNo"
+              v-model:startDate="formData.startDate"
+              v-model:retireDate="formData.retireDate"
+              v-model:responsibleArea="formData.responsibleArea"
+              v-model:discountCondition="formData.discountCondition"
+              v-model:sourceNationality="formData.sourceNationality"
+              v-model:importNationality="formData.importNationality"
+              v-model:trainingPlace="formData.trainingPlace"
+              v-model:checkpoint="formData.checkpoint"
+              v-model:checkpointEN="formData.checkpointEN"
+              v-model:agencyFile="agencyFile"
+              v-model:agencyFileList="agencyFileList"
+              v-model:userId="userId"
             />
           </div>
         </div>
-
-        <div class="col-10 q-pa-md q-gutter-y-xl">
-          <FormInformation
-            id="info-information"
-            v-model:hq-id="hqId"
-            v-model:br-id="brId"
-            v-model:user-type="formData.userType"
-            v-model:user-role="formData.userRole"
-            v-model:username="formData.username"
-            v-model:user-code="userCode"
-            dense
-            outlined
-            separator
-            :title="'formDialogTitleInformation'"
-            :readonly="!infoDrawerEdit"
-            :usernameReadonly="isEdit"
-          />
-
-          <FormPerson
-            id="info-personal"
-            v-model:first-name="formData.firstName"
-            v-model:last-name="formData.lastName"
-            v-model:mid-name="formData.middleName"
-            v-model:mid-name-en="formData.middleNameEN"
-            v-model:prefix-name="formData.namePrefix"
-            v-model:prefix-name-en="formData.namePrefix"
-            v-model:first-name-en="formData.firstNameEN"
-            v-model:last-name-en="formData.lastNameEN"
-            v-model:telephone-no="formData.telephoneNo"
-            v-model:email="formData.email"
-            v-model:gender="formData.gender"
-            v-model:birth-date="formData.birthDate"
-            :title="'formDialogTitlePersonal'"
-            prefix-id="drawer-info-personnel"
-            dense
-            outlined
-            separator
-            :readonly="!infoDrawerEdit"
-          />
-
-          <AddressForm
-            id="info-address"
-            v-model:address="formData.address"
-            v-model:addressEN="formData.addressEN"
-            v-model:provinceId="formData.provinceId"
-            v-model:districtId="formData.districtId"
-            v-model:subDistrictId="formData.subDistrictId"
-            v-model:zipCode="formData.zipCode"
-            :readonly="!infoDrawerEdit"
-            prefix-id="drawer-info-personnel"
-            dense
-          />
-          <FormByType
-            dense
-            outlined
-            separator
-            id="info-work"
-            :readonly="!infoDrawerEdit"
-            v-model:userType="formData.userType"
-            v-model:registrationNo="formData.registrationNo"
-            v-model:startDate="formData.startDate"
-            v-model:retireDate="formData.retireDate"
-            v-model:responsibleArea="formData.responsibleArea"
-            v-model:discountCondition="formData.discountCondition"
-            v-model:sourceNationality="formData.sourceNationality"
-            v-model:importNationality="formData.importNationality"
-            v-model:trainingPlace="formData.trainingPlace"
-            v-model:checkpoint="formData.checkpoint"
-            v-model:checkpointEN="formData.checkpointEN"
-            v-model:agencyFile="agencyFile"
-            v-model:agencyFileList="agencyFileList"
-            v-model:userId="userId"
-          />
-        </div>
       </div>
     </InfoForm>
   </DrawerInfo>