refactor: move button product

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

@@ -214,7 +214,6 @@ const profileUrl = ref<string | null>('');
 const pathGroupName = ref('');
 const pathTypeName = ref('');
 
-const dialogProductServiceType = ref(false);
 const dialogTotalProduct = ref(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 
@@ -225,7 +224,6 @@ const product = ref<(ProductList & { type: 'product' })[]>();
 const productIsAdd = ref<(ProductList & { type: 'product' })[]>();
 const service = ref<(Service & { type: 'service' })[]>();
 const resultSearchProduct = ref<ProductList[]>();
-const productAndService = ref<ServiceAndProduct[]>([]);
 
 const productAndServiceTab = ref<'product' | 'service'>('service');
 const manageWorkNameDialog = ref(false);
@@ -477,13 +475,6 @@ async function searchProduct(isAdd: boolean = true) {
   flowStore.rotate();
 }
 
-async function featchStatsService() {
-  const resStatsService = await fetchStatsService();
-
-  totalService.value = resStatsService;
-  flowStore.rotate();
-}
-
 async function fetchListOfOptionBranch() {
   const uid = getUserId();
   const role = getRole();
@@ -503,15 +494,6 @@ async function fetchListOfOptionBranch() {
     currentMyBranch.value?.id || '';
 }
 
-async function featchStatsProduct() {
-  const resStatsProduct = await fetchStatsProduct({
-    productTypeId: currentIdType.value,
-  });
-
-  totalProduct.value = resStatsProduct;
-  flowStore.rotate();
-}
-
 async function fetchListType() {
   const res = await fetchListProductServiceType({
     page: currentPageType.value,
@@ -663,19 +645,6 @@ async function submitType() {
   await fetchListType();
 }
 
-const itemCard = [
-  {
-    icon: 'mdi:server-network',
-    text: 'บริการ',
-    color: 'var(--orange-5)',
-  },
-  {
-    icon: 'mdi:shopping',
-    text: 'สินค้า',
-    color: 'var(--green-9)',
-  },
-];
-
 async function toggleStatusProduct(id: string, status: Status) {
   const res = await editProduct(id, {
     status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
@@ -783,7 +752,7 @@ async function deleteServiceById(serviceId?: string) {
   });
 }
 
-async function deleteTypeOfProduct(id?: string) {
+async function deleteProductConfirm(id?: string) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
@@ -794,6 +763,11 @@ async function deleteTypeOfProduct(id?: string) {
     action: async () => {
       const res = await deleteProduct(id ?? currentIdProduct.value);
 
+      if (!res) {
+        flowStore.rotate();
+        return;
+      }
+
       if (productAndServiceTab.value === 'product') {
         await fetchListOfProduct();
       }
@@ -2734,7 +2708,8 @@ watch(
                       }[productAndServiceTab]
                     "
                     @update:model-value="
-                      (v) => (tbControl[productAndServiceTab].fieldSelected = v)
+                      (v: string[]) =>
+                        (tbControl[productAndServiceTab].fieldSelected = v)
                     "
                     option-label="label"
                     option-value="value"
@@ -3258,7 +3233,7 @@ watch(
                                   @click="
                                     () => {
                                       if (props.row.type === 'product') {
-                                        deleteTypeOfProduct(props.row.id);
+                                        deleteProductConfirm(props.row.id);
                                       }
                                       if (props.row.type === 'service') {
                                         deleteServiceById(props.row.id);
@@ -3710,34 +3685,6 @@ watch(
     </InfoForm>
   </DrawerInfo>
 
-  <DialogForm
-    v-model:modal="dialogProductServiceType"
-    :title="'สร้างสินค้าและบริการ'"
-    no-footer
-    no-app-box
-    max-width="80%"
-    :close="() => (dialogProductServiceType = false)"
-  >
-    <template #body>
-      <div class="row q-gutter-xl q-pa-sm">
-        <ItemCard
-          class="col"
-          v-for="i in itemCard"
-          changeColor
-          :key="i.text"
-          :icon="i.icon"
-          :text="i.text"
-          :color="i.color"
-          @trigger="
-            () => {
-              dialogProductServiceType = false;
-            }
-          "
-        />
-      </div>
-    </template>
-  </DialogForm>
-
   <!-- work product, product work -->
   <DialogForm
     v-model:modal="dialogTotalProduct"
@@ -4013,8 +3960,6 @@ watch(
   <!-- edit product -->
   <!-- :edit="!(formDataProduct.status === 'INACTIVE')" -->
   <DialogForm
-    edit
-    :isEdit="infoProductEdit"
     v-model:modal="dialogProductEdit"
     noAddress
     :title="$t('editProduct')"
@@ -4026,16 +3971,8 @@ watch(
         flowStore.rotate();
       }
     "
-    :deleteData="
+    :deleteData="() => deleteProductConfirm()"
-      () => {
+    :submit="() => submitProduct()"
-        deleteTypeOfProduct();
-      }
-    "
-    :submit="
-      () => {
-        submitProduct();
-      }
-    "
     :close="
       () => {
         infoProductEdit = false;
@@ -4043,6 +3980,7 @@ watch(
         flowStore.rotate();
       }
     "
+    hide-footer
   >
     <div class="q-mx-lg q-mt-lg">
       <ProfileBanner
@@ -4084,6 +4022,43 @@ watch(
       class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
       id="group-form"
     >
+      <div
+        class="surface-1 rounded q-pt-sm row"
+        style="position: absolute; z-index: 999; right: 4%"
+      >
+        <UndoButton
+          v-if="infoProductEdit"
+          id="btn-info-basic-undo"
+          icon-only
+          @click="
+            () => {
+              formDataProduct = { ...prevProduct };
+              infoProductEdit = false;
+            }
+          "
+          type="button"
+        />
+        <SaveButton
+          v-if="infoProductEdit"
+          id="btn-info-basic-save"
+          icon-only
+          type="submit"
+        />
+        <EditButton
+          v-if="!infoProductEdit"
+          id="btn-info-basic-edit"
+          icon-only
+          @click="infoProductEdit = true"
+          type="button"
+        />
+        <DeleteButton
+          v-if="!infoProductEdit"
+          id="btn-info-basic-delete"
+          icon-only
+          @click="() => deleteProductConfirm()"
+          type="button"
+        />
+      </div>
       <div
         class="col"
         style="height: 100%; max-height: 100; overflow-y: auto"