refactor: add go inside/outside by Product Type

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

@@ -697,36 +697,6 @@ async function toggleStatusGroup(id: string, status: Status) {
   flowStore.rotate();
 }
 
-async function fetchListOfProductAndService() {
-  const res = await fetchListProductAndService({
-    page: currentPageServiceAndProduct.value,
-    pageSize: pageSizeServiceAndProduct.value,
-    query: !!inputSearchProductAndService.value
-      ? inputSearchProductAndService.value
-      : undefined,
-    status:
-      currentStatus.value === 'INACTIVE'
-        ? 'INACTIVE'
-        : currentStatus.value === 'ACTIVE'
-          ? 'ACTIVE'
-          : undefined,
-    productTypeId: currentIdType.value,
-  });
-
-  if (res) {
-    if (currentStatus.value === 'All') {
-      totalProductAndService.value = res.total;
-    }
-
-    total.value = res.total;
-    currentPageServiceAndProduct.value = res.page;
-    maxPageServiceAndProduct.value = Math.ceil(
-      res.total / pageSizeServiceAndProduct.value,
-    );
-    productAndService.value = res.result;
-  }
-}
-
 async function deleteServiceById(serviceId?: string) {
   dialog({
     color: 'negative',
@@ -1229,6 +1199,19 @@ async function enterGroup(id: string, name: string) {
   flowStore.rotate();
 }
 
+async function enterType(id: string, name: string) {
+  expandedTree.value.push(id);
+  pathTypeName.value = name;
+  currentIdType.value = id;
+  productMode.value = 'service';
+  productAndServiceTab.value = 'service';
+
+  await fetchListOfProduct();
+  await fetchListOfService();
+
+  flowStore.rotate();
+}
+
 function handleHold(node: ProductGroup) {
   if ($q.screen.gt.xs) return;
   return function (props: unknown) {
@@ -1478,6 +1461,17 @@ watch(
                               return;
                             }
                           }
+                          if (node.type === 'type') {
+                            if (currentIdType !== node.id) {
+                              await enterType(node.id, node.name);
+                              return;
+                            }
+                            if (currentIdType === node.id) {
+                              currentIdType = '';
+                              productMode = 'type';
+                              return;
+                            }
+                          }
                         }
                       "
                       :class="{
@@ -1502,8 +1496,12 @@ watch(
                             class="ellipsis col-12"
                             style="white-space: nowrap"
                             :class="{
-                              'text-weight-bold': expandedTree[0] === node.id,
+                              'text-weight-bold':
-                              'app-text-info': expandedTree[0] === node.id,
+                                expandedTree[expandedTree.length - 1] ===
+                                node.id,
+                              'app-text-info':
+                                expandedTree[expandedTree.length - 1] ===
+                                node.id,
                             }"
                           >
                             {{ node.name }}
@@ -1907,15 +1905,7 @@ watch(
                           async () => {
                             filterStat.push(productMode);
                             if (productMode === 'type') {
-                              pathTypeName = props.row.name;
+                              await enterType(props.row.id, props.row.name);
-                              currentIdType = props.row.id;
-                              productMode = 'service';
-                              productAndServiceTab = 'service';
-
-                              await fetchListOfProduct();
-                              await fetchListOfService();
-                              await fetchListOfProductAndService();
-                              flowStore.rotate();
                             }
                             if (productMode === 'group') {
                               await enterGroup(props.row.id, props.row.name);
@@ -2278,15 +2268,7 @@ watch(
                             async () => {
                               filterStat.push(productMode);
                               if (productMode === 'type') {
-                                pathTypeName = props.row.name;
+                                await enterType(props.row.id, props.row.name);
-                                currentIdType = props.row.id;
-                                productMode = 'service';
-                                productAndServiceTab = 'service';
-
-                                await fetchListOfProduct();
-                                await fetchListOfService();
-                                await fetchListOfProductAndService();
-                                flowStore.rotate();
                               }
                               if (productMode === 'group') {
                                 await enterGroup(props.row.id, props.row.name);
@@ -3137,14 +3119,20 @@ watch(
                       >
                         <q-list>
                           <q-item
-                            v-for="v in [10, 30, 50, 100, 500, 1000]"
+                            v-for="v in [1, 30, 50, 100, 500, 1000]"
                             :key="v"
                             clickable
                             v-close-popup
                             @click="
                               async () => {
                                 pageSizeServiceAndProduct = v;
-                                await fetchListOfProductAndService();
+
+                                if (productAndServiceTab === 'product') {
+                                  await fetchListOfProduct();
+                                }
+                                if (productAndServiceTab === 'service') {
+                                  await fetchListOfService();
+                                }
                               }
                             "
                           >