fix: แก้ การ ยิง api 3 เส้น

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

@@ -35,6 +35,7 @@ import {
   ServiceById,
   WorkItems,
   Attributes,
+  ServiceAndProduct,
 } from 'src/stores/product-service/types';
 
 const productServiceStore = useProductServiceStore();
@@ -74,6 +75,8 @@ const {
   fetchListProductByIdWork,
 
   fetchListOfWork,
+
+  fetchListProductAndService,
 } = productServiceStore;
 
 const { workNameItems } = storeToRefs(productServiceStore);
@@ -131,9 +134,10 @@ const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
 
 const productGroup = ref<ProductGroup[]>();
 const productType = ref<ProductGroup[]>();
-const product = ref<ProductList[]>();
+const product = ref<(ProductList & { type: 'product' })[]>();
+const service = ref<(Service & { type: 'service' })[]>();
 const resultSearchProduct = ref<ProductList[]>();
-const service = ref<Service[]>();
+const productAndService = ref<ServiceAndProduct[]>([]);
 
 const productAndServiceTab = ref<string>('all');
 const manageWorkNameDialog = ref<boolean>(false);
@@ -169,6 +173,7 @@ const formDataProductService = ref<ServiceCreate>({
   detail: '',
   name: '',
   code: '',
+  productTypeId: '',
 });
 
 const serviceTab = [
@@ -192,6 +197,10 @@ const selectProduct = ref<ProductList[]>([]);
 
 const currentWorkIndex = ref<number>(0);
 
+const totalProduct = ref<number>(0);
+const totalService = ref<number>(0);
+const totalProductAndService = ref<number>(0);
+
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const currentIdService = ref<string>('');
@@ -242,6 +251,20 @@ async function searchProduct() {
   }
 }
 
+async function featchStatsService() {
+  const resStatsService = await fetchStatsService();
+
+  totalService.value = resStatsService;
+}
+
+async function featchStatsProduct() {
+  const resStatsProduct = await fetchStatsProduct({
+    productTypeId: currentIdType.value,
+  });
+
+  totalProduct.value = resStatsProduct;
+}
+
 async function fetchListType() {
   const res = await fetchListProductServiceType({
     productGroupId: currentId.value,
@@ -274,18 +297,44 @@ async function fetchListGroups() {
 }
 
 async function fetchListOfProduct(productTypeId: string) {
-  const res = await fetchListProduct({ productTypeId });
+  const res = await fetchListProduct({
+    status:
+      currentStatus.value === 'INACTIVE'
+        ? 'INACTIVE'
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : undefined,
+    productTypeId,
+  });
 
   if (res) {
-    product.value = res.result;
+    product.value = res.result.map((v) => {
+      return {
+        ...v,
+        type: 'product',
+      };
+    });
   }
 }
 
 async function fetchListOfService() {
-  const res = await fetchListService({ productTypeId: currentIdType.value });
+  const res = await fetchListService({
+    status:
+      currentStatus.value === 'INACTIVE'
+        ? 'INACTIVE'
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : undefined,
+    productTypeId: currentIdType.value,
+  });
 
   if (res) {
-    service.value = res.result;
+    service.value = res.result.map((v) => {
+      return {
+        ...v,
+        type: 'service',
+      };
+    });
   }
 }
 
@@ -366,6 +415,25 @@ async function toggleStatusGroup(id: string, status: Status) {
   await fetchListGroups();
 }
 
+async function fetchListOfProductAndService() {
+  const res = await fetchListProductAndService({
+    status:
+      currentStatus.value === 'INACTIVE'
+        ? 'INACTIVE'
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : undefined,
+    productTypeId: currentIdType.value,
+  });
+
+  if (res) {
+    if (currentStatus.value === 'All') {
+      totalProductAndService.value = res.total;
+    }
+    productAndService.value = res.result;
+  }
+}
+
 async function deleteServiceById(serviceId?: string) {
   dialog({
     color: 'negative',
@@ -375,11 +443,15 @@ async function deleteServiceById(serviceId?: string) {
     persistent: true,
     message: t('deleteConfirmMessage'),
     action: async () => {
-      await deleteService(serviceId ?? currentIdService.value);
+      const res = await deleteService(serviceId ?? currentIdService.value);
 
       await fetchListOfService();
 
       dialogServiceEdit.value = false;
+
+      if (res) {
+        totalService.value = totalService.value - 1;
+      }
       calculateStats();
     },
     cancel: () => {},
@@ -395,11 +467,14 @@ async function deleteTypeOfProduct(id?: string) {
     persistent: true,
     message: t('deleteConfirmMessage'),
     action: async () => {
-      await deleteProduct(id ?? currentIdProduct.value);
+      const res = await deleteProduct(id ?? currentIdProduct.value);
       await fetchListOfProduct(currentIdType.value);
 
       dialogProductEdit.value = false;
 
+      if (res) {
+        totalProduct.value = totalProduct.value - 1;
+      }
       calculateStats();
     },
     cancel: () => {},
@@ -464,6 +539,7 @@ const prevService = ref<ServiceCreate>({
   detail: '',
   name: '',
   code: '',
+  productTypeId: '',
 });
 
 async function assignFormDataProductService(id: string) {
@@ -479,6 +555,7 @@ async function assignFormDataProductService(id: string) {
       attributes: res.attributes,
       work: [],
       status: res.status,
+      productTypeId: res.productTypeId,
     };
 
     formDataProductService.value = { ...prevService.value };
@@ -567,6 +644,7 @@ function clearFormService() {
     },
     work: [],
     status: undefined,
+    productTypeId: '',
   };
 
   workItems.value = [];
@@ -590,6 +668,7 @@ function assignFormDataProductServiceCreate() {
 async function submitService() {
   assignFormDataProductServiceCreate();
   formDataProductService.value.image = imageProduct.value;
+  formDataProductService.value.productTypeId = currentIdType.value;
 
   if (dialogService.value) {
     const res = await createService(formDataProductService.value);
@@ -609,7 +688,7 @@ async function submitService() {
       await fetchListOfService();
     }
   }
-
+  totalService.value = totalService.value + 1;
   clearFormService();
 }
 
@@ -633,7 +712,7 @@ async function submitProduct() {
       status: statusToggle.value ? 'ACTIVE' : 'INACTIVE',
     });
   }
-
+  totalProduct.value = totalProduct.value + 1;
   clearFormProduct();
   await fetchListOfProduct(currentIdType.value);
 }
@@ -714,6 +793,19 @@ async function calculateStats() {
   stat.value[3].count = resStatsProduct ?? 0;
 }
 
+async function fetchStatus() {
+  if (productAndServiceTab.value === 'all') {
+    await fetchListOfProductAndService();
+  }
+  if (productAndServiceTab.value === 'product') {
+    await fetchListOfProduct(currentIdType.value);
+  }
+
+  if (productAndServiceTab.value === 'service') {
+    await fetchListOfService();
+  }
+}
+
 onMounted(async () => {
   calculateStats();
   await fetchListGroups();
@@ -937,21 +1029,33 @@ watch(currentStatus, async () => {
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="currentStatus = 'All'"
+                    @click="
+                      () => {
+                        currentStatus = 'All';
+                      }
+                    "
                   >
                     {{ $t('all') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="currentStatus = 'ACTIVE'"
+                    @click="
+                      () => {
+                        currentStatus = 'ACTIVE';
+                      }
+                    "
                   >
                     {{ $t('statusACTIVE') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="currentStatus = 'INACTIVE'"
+                    @click="
+                      () => {
+                        currentStatus = 'INACTIVE';
+                      }
+                    "
                   >
                     {{ $t('statusINACTIVE') }}
                   </q-item>
@@ -1013,8 +1117,12 @@ watch(currentStatus, async () => {
                   pathTypeName = v.name;
                   currentIdType = v.id;
                   productMode = 'service';
-                  await fetchListOfProduct(currentIdType);
+                  // await fetchListOfProduct(currentIdType);
-                  await fetchListOfService();
+                  // await fetchListOfService();
+
+                  await featchStatsService();
+                  await featchStatsProduct();
+                  await fetchListOfProductAndService();
                 }
               "
             />
@@ -1079,7 +1187,15 @@ watch(currentStatus, async () => {
       <AppBox bordered v-else-if="productMode === 'service'" no-padding>
         <div class="row justify-between q-px-md">
           <q-tabs v-model="productAndServiceTab" dense>
-            <q-tab name="all">
+            <q-tab
+              name="all"
+              @click="
+                async () => {
+                  currentStatus = 'All';
+                  await fetchListOfProductAndService();
+                }
+              "
+            >
               <div
                 class="row"
                 :class="
@@ -1096,12 +1212,20 @@ watch(currentStatus, async () => {
                   "
                   :color="productAndServiceTab === 'all' ? 'primary' : ''"
                   style="background-color: var(--surface-3)"
-                  :label="(service?.length ?? 0) + (product?.length ?? 0)"
+                  :label="totalProductAndService"
                 />
               </div>
             </q-tab>
 
-            <q-tab name="product">
+            <q-tab
+              name="product"
+              @click="
+                async () => {
+                  currentStatus = 'All';
+                  await fetchListOfProduct(currentIdType);
+                }
+              "
+            >
               <div
                 class="row"
                 :class="
@@ -1118,11 +1242,19 @@ watch(currentStatus, async () => {
                   "
                   :color="productAndServiceTab === 'product' ? 'primary' : ''"
                   style="background-color: var(--surface-3)"
-                  :label="service?.length"
+                  :label="totalProduct"
                 />
               </div>
             </q-tab>
-            <q-tab name="service">
+            <q-tab
+              name="service"
+              @click="
+                async () => {
+                  currentStatus = 'All';
+                  await fetchListOfService();
+                }
+              "
+            >
               <div
                 class="row"
                 :class="
@@ -1139,7 +1271,7 @@ watch(currentStatus, async () => {
                   "
                   :color="productAndServiceTab === 'service' ? 'primary' : ''"
                   style="background-color: var(--surface-3)"
-                  :label="product?.length"
+                  :label="totalService"
                 />
               </div>
             </q-tab>
@@ -1175,21 +1307,36 @@ watch(currentStatus, async () => {
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="currentStatus = 'All'"
+                    @click="
+                      async () => {
+                        currentStatus = 'All';
+                        await fetchStatus();
+                      }
+                    "
                   >
                     {{ $t('all') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="currentStatus = 'ACTIVE'"
+                    @click="
+                      async () => {
+                        currentStatus = 'ACTIVE';
+                        await fetchStatus();
+                      }
+                    "
                   >
                     {{ $t('statusACTIVE') }}
                   </q-item>
                   <q-item
                     clickable
                     class="flex items-center"
-                    @click="currentStatus = 'INACTIVE'"
+                    @click="
+                      async () => {
+                        currentStatus = 'INACTIVE';
+                        await fetchStatus();
+                      }
+                    "
                   >
                     {{ $t('statusINACTIVE') }}
                   </q-item>
@@ -1200,7 +1347,7 @@ watch(currentStatus, async () => {
         </div>
 
         <div
-          v-if="product && product.length === 0"
+          v-if="productAndService && productAndService.length === 0"
           class="flex justify-center items-center"
           style="min-height: 70vh; background-color: var(--surface-2)"
         >
@@ -1208,64 +1355,68 @@ watch(currentStatus, async () => {
         </div>
 
         <div
-          v-if="product && product.length > 0"
+          v-if="productAndService && productAndService.length > 0"
           class="row q-col-gutter-lg flex"
           style="padding: 20px"
         >
-          <!-- ACITVE or CREATED -->
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-            v-for="i in productAndServiceTab === 'all' ||
+            v-for="i in productAndServiceTab === 'all'
-            productAndServiceTab === 'product'
+              ? productAndService
-              ? product?.filter((i) => {
+              : productAndServiceTab === 'product'
-                  if (currentStatus === 'All' || currentStatus === 'ACTIVE') {
+                ? product
-                    return i.status === 'ACTIVE' || i.status === 'CREATED';
+                : service"
-                  }
-                })
-              : []"
             :key="i.id"
           >
             <TotalProductCardComponent
               :data="i"
               :key="i.id"
-              :code="i.code"
-              :price="i.price"
-              :process="i.process"
-              :id="i.id"
-              typeProduct="product"
               :title="i.name"
               :isDisabled="i.status === 'INACTIVE' ? true : false"
               @toggleStatus="
                 () => {
-                  toggleStatusProduct(i.id, i.status);
+                  if (i.type === 'product') {
+                    toggleStatusProduct(i.id, i.status);
+                  }
+                  if (i.type === 'service') {
+                    toggleStatusService(i.id, i.status);
+                  }
                 }
               "
               @menuViewDetail="
                 () => {
-                  currentIdProduct = i.id;
+                  if (i.type === 'product') {
-                  assignFormDataProduct(i);
+                    currentIdProduct = i.id;
-                  dialogProductEdit = true;
+                    assignFormDataProduct(i);
+                    dialogProductEdit = true;
+                  }
+                  if (i.type === 'service') {
+                    currentIdService = i.id;
+                    infoServiceEdit = false;
+                    assignFormDataProductService(i.id);
+                    dialogServiceEdit = true;
+                  }
                 }
               "
               @menuEdit="
                 () => {
-                  currentIdProduct = i.id;
+                  if (i.type === 'product') {
-                  infoProductEdit = true;
+                    currentIdProduct = i.id;
-                  assignFormDataProduct(i);
+                    infoProductEdit = true;
-                  dialogProductEdit = true;
+                    assignFormDataProduct(i);
-                }
+                    dialogProductEdit = true;
-              "
+                  }
-              @viewDetail="
+                  if (i.type === 'service') {
-                () => {
+                    currentIdService = i.id;
-                  currentIdProduct = i.id;
+                    infoServiceEdit = true;
-                  infoProductEdit = false;
+                    assignFormDataProductService(i.id);
-                  assignFormDataProduct(i);
+                    dialogServiceEdit = true;
-                  dialogProductEdit = true;
+                  }
                 }
               "
             />
           </div>
-
+          <!-- 
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
             v-for="i in productAndServiceTab === 'all' ||
@@ -1311,7 +1462,7 @@ watch(currentStatus, async () => {
 
           <!-- INACTIVE -->
 
-          <div
+          <!-- <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
             v-for="i in productAndServiceTab === 'all' ||
             productAndServiceTab === 'product'
@@ -1324,7 +1475,7 @@ watch(currentStatus, async () => {
             :key="i.id"
           >
             <TotalProductCardComponent
-              :data="i"
+              :data="{ ...i, type: 'product' }"
               :key="i.id"
               :code="i.code"
               :price="i.price"
@@ -1405,7 +1556,7 @@ watch(currentStatus, async () => {
                 }
               "
             />
-          </div>
+          </div> -->
         </div>
       </AppBox>
     </div>
@@ -1553,12 +1704,7 @@ watch(currentStatus, async () => {
               :index="selectProduct.findIndex((v) => v.id === i.id)"
               :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
               :isSelected="true"
-              :data="i"
+              :data="{ ...i, type: 'product' }"
-              :code="i.code"
-              :price="i.price"
-              :process="i.process"
-              :id="i.id"
-              typeProduct="product"
               :title="i.name"
               :status="i.status === 'INACTIVE' ? true : false"
               @menuViewDetail="
@@ -1759,7 +1905,8 @@ watch(currentStatus, async () => {
         v-if="currentServiceTab === 'workInformation'"
         dense
         @addProduct="
-          (index) => {
+          async (index) => {
+            await fetchListOfProduct(currentIdType);
             currentWorkIndex = index;
             dialogTotalProduct = true;
           }
@@ -1901,7 +2048,8 @@ watch(currentStatus, async () => {
         v-if="currentServiceTab === 'workInformation'"
         dense
         @addProduct="
-          (index) => {
+          async (index) => {
+            await fetchListOfProduct(currentIdType);
             currentWorkIndex = index;
             dialogTotalProduct = true;
           }