From 4dce5a5b92c329c5fc525cf7ac0e3c87e701e27f Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 27 Sep 2024 13:49:40 +0700
Subject: [PATCH] refactor edit btn add

---
 src/components/ButtonAddCompoent.vue      | 13 +++++-
 src/pages/04_product-service/MainPage.vue | 50 ++++-------------------
 2 files changed, 20 insertions(+), 43 deletions(-)

diff --git a/src/components/ButtonAddCompoent.vue b/src/components/ButtonAddCompoent.vue
index cc13f408..bfc7d2db 100644
--- a/src/components/ButtonAddCompoent.vue
+++ b/src/components/ButtonAddCompoent.vue
@@ -1,4 +1,8 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineProps<{
+  hideIcon?: boolean;
+}>();
+</script>
 
 <template>
   <q-page-sticky position="bottom-right" :offset="[8, 8]">
@@ -10,7 +14,12 @@
       class="color-btn"
     >
       <slot>
-        <q-fab-action padding="xs" color="primary" icon="mdi-account-plus" />
+        <q-fab-action
+          padding="xs"
+          color="primary"
+          icon="mdi-account-plus"
+          v-if="!hideIcon"
+        />
       </slot>
     </q-fab>
   </q-page-sticky>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 9351a214..98bcaa40 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1510,55 +1510,23 @@ watch(
 
 <template>
   <ButtonAddComponent
+    hide-icon
     v-if="actionDisplay && !currentNoAction"
     style="z-index: 999"
-  >
-    <q-fab-action
-      v-if="productMode === 'group'"
-      id="btn-add-product-group"
-      style="color: white; background-color: hsla(var(--pink-6-hsl))"
-      padding="xs"
-      icon="mdi-folder-multiple-plus-outline"
-      :label="$t('productService.group.addTitle')"
-      external-label
-      label-position="left"
-      @click="
-        async () => {
+    @click="
+      async () => {
+        if (productMode === 'group') {
           clearFormGroup();
           await fetchListOfOptionBranch();
           dialogInputForm = true;
         }
-      "
-    />
-    <q-fab-action
-      v-if="productMode === 'product'"
-      :label="$t('productService.product.addTitle')"
-      id="btn-add-product"
-      external-label
-      label-position="left"
-      style="color: white; background-color: hsla(var(--green-11-hsl))"
-      padding="xs"
-      icon="mdi-folder-multiple-plus-outline"
-      @click="
-        async () => {
+        if (productMode === 'product') {
           productTab = 1;
           clearFormProduct();
           await fetchListOfOptionBranch();
           dialogProduct = true;
         }
-      "
-    ></q-fab-action>
-    <q-fab-action
-      v-if="productMode === 'service'"
-      :label="$t('productService.service.addTitle')"
-      id="btn-add-service"
-      external-label
-      label-position="left"
-      style="color: white; background-color: hsla(var(--orange-6-hsl))"
-      padding="xs"
-      icon="mdi-server-plus-outline"
-      @click="
-        async () => {
+        if (productMode === 'service') {
           serviceTab = 1;
           clearFormGroup();
           clearFormService();
@@ -1566,9 +1534,9 @@ watch(
           serviceTab = 1;
           dialogService = true;
         }
-      "
-    ></q-fab-action>
-  </ButtonAddComponent>
+      }
+    "
+  />
 
   <div class="full-height column no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">