feat: move action to inside form

src/pages/01_branch-management/MainPage.vue

@@ -18,7 +18,7 @@ import {
 import { Status } from 'stores/types';
 
 import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
-import AddButton from 'components/AddButton.vue';
+import EmptyAddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
 import BranchCard from 'components/01_branch-management/BranchCard.vue';
@@ -38,6 +38,12 @@ import FormBank from 'components/01_branch-management/FormBank.vue';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue';
 import { User } from 'src/stores/user/types';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -754,7 +760,7 @@ watch(currentHq, () => {
           </div>
 
           <div class="col flex items-center justify-center">
-            <AddButton
+            <EmptyAddButton
               label="branchAdd"
               @trigger="() => triggerCreate('headOffice')"
             />
@@ -1769,6 +1775,7 @@ watch(currentHq, () => {
       () => ((modalDrawer = false), flowStore.rotate(), (isImageEdit = false))
     "
     :statusBranch="formData.status"
+    hide-action
   >
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
@@ -1811,12 +1818,47 @@ watch(currentHq, () => {
         />
       </div>
 
+      <div class="col q-pa-lg">
         <div
-        class="col surface-1 q-ma-lg rounded bordered scroll row"
-        id="branch-info"
+          style="overflow-y: auto"
+          class="row full-width full-height surface-1 rounded relative-position"
+        >
+          <div
+            class="q-py-md q-px-lg"
+            style="position: absolute; z-index: 99999; top: 0; right: 0"
+          >
+            <div class="surface-1 row rounded">
+              <UndoButton
+                v-if="formType === 'edit'"
+                icon-only
+                @click="undo()"
+                type="button"
+              />
+              <SaveButton
+                v-if="formType === 'edit'"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="formType !== 'edit'"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="drawerEdit()"
+                type="button"
+              />
+              <DeleteButton
+                v-if="formType !== 'edit'"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="triggerDelete(currentEdit.id)"
+                type="button"
+              />
+            </div>
+          </div>
+          <div
+            class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
           >
-        <div class="col">
-          <div style="position: sticky; top: 0" class="q-pa-sm">
             <SideMenu
               :menu="[
                 {
@@ -1852,9 +1894,11 @@ watch(currentHq, () => {
               scroll-element="#branch-info"
             />
           </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 full-height q-gutter-y-xl"
+            id="branch-info"
+            style="overflow-y: auto"
+          >
             <FormBranchInformation
               id="info-information"
               v-model:abbreviation="formData.code"
@@ -1935,16 +1979,7 @@ watch(currentHq, () => {
               id="info-branch-admin-view"
               :admin="currentBranchAdmin"
             />
-          <!-- <FormImage
-            @upload="
-              () => {
-                inputFileImg.click();
-              }
-            "
-            v-model:image="imageUrl"
-            :title="$t('formDialogTitleImg')"
-            :readonly="formType === 'view'"
-          /> -->
+          </div>
         </div>
       </div>
     </InfoForm>