refactor(02): edit btn save static

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,11 +1604,17 @@ 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">
+        <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="[
                   {
@@ -1639,12 +1639,58 @@ watch(
                   background: 'hsla(var(--blue-6-hsl) / .2)',
                   foreground: 'var(--blue-6)',
                 }"
-              scroll-element="#personnel-info"
+                scroll-element="#user-form-content"
               />
             </div>
           </div>
 
-        <div class="col-10 q-pa-md q-gutter-y-xl">
+          <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"
@@ -1718,6 +1764,7 @@ watch(
             />
           </div>
         </div>
+      </div>
     </InfoForm>
   </DrawerInfo>