fix: แก้ปุ่ม add

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

@@ -9,6 +9,9 @@ import DrawerInfo from 'src/components/DrawerInfo.vue';
 import BasicInformation from 'src/components/04_product-service/BasicInformation.vue';
 import FormDialog from 'src/components/FormDialog.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
+import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
+
+import { Status } from 'src/stores/types';
 
 import { dialog } from 'src/stores/utils';
 
@@ -77,6 +80,8 @@ const currentIdType = ref<string>('');
 const resultSearchGroup = ref<Product[]>();
 const resultSearchType = ref<(Product & { productGroupId: string })[]>();
 
+const currentStatus = ref<Status | 'All'>('All');
+
 async function searchGroup() {
   const resultList = await fetchListProductService({
     query: inputSearch.value,
@@ -85,7 +90,6 @@ async function searchGroup() {
   if (resultList) {
     resultSearchGroup.value = resultList;
   }
-  console.log(resultSearchGroup.value);
 }
 
 async function fetchListType() {
@@ -215,6 +219,7 @@ async function submitGroup() {
     }
   }
 
+  drawerInfo.value = false;
   await fetchListGroups();
   clearForm();
 }
@@ -227,9 +232,44 @@ onMounted(async () => {
 });
 
 watch(productMode, () => (inputSearch.value = ''));
+
+watch(currentStatus, async () => {});
 </script>
 
 <template>
+  <ButtonAddComponent style="z-index: 999">
+    <q-fab-action
+      v-if="productMode === 'group'"
+      style="color: white; background-color: hsla(var(--pink-6-hsl))"
+      padding="xs"
+      icon="mdi-folder-multiple-plus"
+      :label="$t('productAndService')"
+      external-label
+      label-position="left"
+      @click="
+        () => {
+          clearForm();
+          dialogInputForm = true;
+        }
+      "
+    />
+    <q-fab-action
+      v-if="productMode === 'type'"
+      :label="$t('productAndServiceType')"
+      external-label
+      label-position="left"
+      style="color: white; background-color: hsla(var(--purple-11-hsl))"
+      padding="xs"
+      icon="mdi-folder-multiple-plus"
+      @click="
+        () => {
+          clearForm();
+          dialogInputForm = true;
+        }
+      "
+    ></q-fab-action>
+  </ButtonAddComponent>
+
   <div class="column q-pb-lg">
     <div class="row text-h6 text-weight-bold q-mb-md">
       {{ $t('productAndService') }}
@@ -367,21 +407,21 @@ watch(productMode, () => (inputSearch.value = ''));
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="console.log('test')"
+                    @click="currentStatus = 'All'"
                   >
                     {{ $t('all') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="console.log('test')"
+                    @click="currentStatus = 'ACTIVE'"
                   >
                     {{ $t('statusACTIVE') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="console.log('test')"
+                    @click="currentStatus = 'INACTIVE'"
                   >
                     {{ $t('statusINACTIVE') }}
                   </q-item>
@@ -452,32 +492,6 @@ watch(productMode, () => (inputSearch.value = ''));
               "
             />
           </div>
-          <div
-            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-          >
-            <NewProductCardCompoent
-              v-if="productMode === 'type'"
-              :label="$t('productAndServiceType')"
-              :isType="true"
-              @on-click="
-                () => {
-                  clearForm();
-                  dialogInputForm = true;
-                }
-              "
-            />
-            <NewProductCardCompoent
-              v-else-if="productMode === 'group'"
-              :label="$t('productAndService')"
-              :isType="false"
-              @on-click="
-                () => {
-                  clearForm();
-                  dialogInputForm = true;
-                }
-              "
-            />
-          </div>
         </div>
       </AppBox>
       <AppBox bordered v-else-if="productMode === 'service'" no-padding>