change: move button service

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

@@ -725,7 +725,7 @@ async function triggerChangeStatus(
   });
 }
 
-async function deleteServiceById(serviceId?: string) {
+async function deleteServiceConfirm(serviceId?: string) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
@@ -3236,7 +3236,7 @@ watch(
                                         deleteProductConfirm(props.row.id);
                                       }
                                       if (props.row.type === 'service') {
-                                        deleteServiceById(props.row.id);
+                                        deleteServiceConfirm(props.row.id);
                                       }
                                     }
                                   "
@@ -4320,10 +4320,9 @@ watch(
   <!-- edit service -->
   <!-- :edit="!(formDataProductService.status === 'INACTIVE')" -->
   <DialogForm
-    edit
+    hide-footer
     no-address
     height="95vh"
-    :isEdit="infoServiceEdit"
     :title="$t('productService.service.title')"
     v-model:modal="dialogServiceEdit"
     :submit="
@@ -4351,7 +4350,7 @@ watch(
         flowStore.rotate();
       }
     "
-    :delete-data="() => deleteServiceById()"
+    :delete-data="() => deleteServiceConfirm()"
   >
     <div class="q-mx-lg q-mt-lg">
       <ProfileBanner
@@ -4395,6 +4394,45 @@ watch(
       class="col surface-1 q-mx-lg q-mt-lg q-mb-md rounded bordered scroll row relative-position"
       id="group-form"
     >
+      <div
+        class="surface-1 rounded q-my-md q-mx-lg row"
+        style="position: absolute; z-index: 999; top: 0; right: 0"
+      >
+        <UndoButton
+          v-if="infoServiceEdit"
+          id="btn-info-basic-undo"
+          icon-only
+          @click="
+            () => {
+              infoServiceEdit = false;
+              cloneData();
+              statusToggle = prevService.status === 'INACTIVE' ? false : true;
+              flowStore.rotate();
+            }
+          "
+          type="button"
+        />
+        <SaveButton
+          v-if="infoServiceEdit"
+          id="btn-info-basic-save"
+          icon-only
+          type="submit"
+        />
+        <EditButton
+          v-if="!infoServiceEdit"
+          id="btn-info-basic-edit"
+          icon-only
+          @click="infoServiceEdit = true"
+          type="button"
+        />
+        <DeleteButton
+          v-if="!infoServiceEdit"
+          id="btn-info-basic-delete"
+          icon-only
+          @click="() => deleteServiceConfirm()"
+          type="button"
+        />
+      </div>
       <div
         class="col"
         style="height: 100%; max-height: 100; overflow-y: auto"