feat: move button

src/pages/04_product-service/MainPage.vue

@@ -27,7 +27,13 @@ import DialogForm from 'components/DialogForm.vue';
 import ProfileBanner from 'components/ProfileBanner.vue';
 import SideMenu from 'components/SideMenu.vue';
 import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import ToggleButton from 'src/components/button/ToggleButton.vue';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+  ToggleButton,
+} from 'components/button';
 
 import useFlowStore from 'stores/flow';
 import useMyBranchStore from 'stores/my-branch';
@@ -158,14 +164,14 @@ const treeProductTypeAndGroup = computed(() => {
         type: 'group',
         children:
           item.id === currentIdGrop.value
-            ? (recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({
+            ? recordTreeProductType.value[currentIdGrop.value]?.map((x) => ({
                 ...x,
                 type: 'type',
-              })) ?? [])
+              })) ?? []
-            : (recordTreeProductType.value[item.id]?.map((x) => ({
+            : recordTreeProductType.value[item.id]?.map((x) => ({
                   ...x,
                   type: 'type',
-                })) ?? item._count.type > 0)
+                })) ?? item._count.type > 0
               ? [
                   {
                     id: '',
@@ -3556,8 +3562,6 @@ watch(
       )
     "
     :undo="() => undoProductGroup()"
-    :isEdit="isEdit"
-    :editData="() => (isEdit = true)"
     :submit="
       () => {
         if (editByTree !== undefined) {
@@ -3584,6 +3588,7 @@ watch(
         (drawerInfo = false), (currentIdGroupType = '');
       }
     "
+    hide-action
   >
     <InfoForm>
       <div class="q-mx-lg q-mt-lg">
@@ -3628,12 +3633,47 @@ watch(
         />
       </div>
 
+      <div class="col q-pa-lg">
         <div
-        class="col surface-1 q-ma-lg rounded bordered scroll row"
+          style="overflow-y: auto"
-        id="group-info"
+          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="isEdit"
+                icon-only
+                @click="undoProductGroup()"
+                type="button"
+              />
+              <SaveButton
+                v-if="isEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!isEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="isEdit = true"
+                type="button"
+              />
+              <DeleteButton
+                v-if="!isEdit"
+                id="btn-info-basic-delete"
+                icon-only
+                @click="deleteProductById()"
+                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="[
                 {
@@ -3649,9 +3689,11 @@ watch(
               scroll-element="#group-info"
             />
           </div>
-        </div>
+          <div
-
+            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height"
-        <div class="col-10 q-pa-md q-gutter-y-xl">
+            id="group-info"
+            style="overflow-y: auto"
+          >
             <BasicInformation
               id="info-group"
               dense
@@ -3664,6 +3706,7 @@ watch(
             />
           </div>
         </div>
+      </div>
     </InfoForm>
   </DrawerInfo>