refactor(04): tree and path behavior

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

@@ -177,10 +177,15 @@ const treeProductTypeAndGroup = computed(
       type: 'group',
       actionDisabled: item.status === 'INACTIVE',
       children: [
-        { id: 'type', name: 'ประเภท', type: 'type', actionDisabled: true },
+        {
+          id: 'type',
+          name: t('general.type'),
+          type: 'type',
+          actionDisabled: true,
+        },
         {
           id: 'productService',
-          name: 'สินค้าและบริการ',
+          name: t('productService.title'),
           type: 'productService',
           actionDisabled: true,
         },
@@ -1318,6 +1323,7 @@ async function enterGroup(
   expandedTree.value = [];
   expandedTree.value.push(id);
   pathGroupName.value = name;
+  currentIdType.value = '';
   currentIdGrop.value = id;
   currentStatusList.value.push(status);
   pathTypeName.value = name;
@@ -1447,7 +1453,7 @@ onMounted(async () => {
 
 watch(
   () => expandedTree.value,
-  () => {
+  (v) => {
     inputSearch.value = '';
     currentStatus.value = 'All';
 
@@ -1466,19 +1472,23 @@ watch(
       },
     ];
 
-    if (productMode.value === 'group' || productMode.value === 'service') {
+    if (
+      productMode.value === 'group' ||
+      productMode.value === 'service' ||
+      productMode.value === 'product'
+    ) {
       tmp.push({
         text: 'productService.group.withName',
         i18n: true,
         argsi18n: { name: pathGroupName.value },
         handler: () => {
-          if (productMode.value === 'service') {
+          if (
+            productMode.value === 'service' ||
+            productMode.value === 'product'
+          ) {
             currentIdType.value = '';
-            // productMode.value = 'type';
+            filterStat.value = [];
-
+            productMode.value = 'group';
-            filterStat.value = filterStat.value.filter((item) => {
-              return item !== 'type';
-            });
 
             currentStatusList.value.splice(1);
             expandedTree.value.pop();
@@ -1493,11 +1503,17 @@ watch(
         return;
       }
     }
-    if (productMode.value === 'service') {
+    if (productMode.value === 'service' && v.length !== 1) {
       tmp.push({
-        text: 'productService.type.withName',
+        text: 'general.type',
+        i18n: true,
+      });
+    }
+
+    if (productMode.value === 'product' && v.length !== 1) {
+      tmp.push({
+        text: 'productService.title',
         i18n: true,
-        argsi18n: { name: pathTypeName.value },
       });
     }
 
@@ -1711,6 +1727,8 @@ watch([currentStatusList, productMode], () => {
                         }
                         if (currentIdType === v.id) {
                           expandedTree.pop();
+                          currentIdType = '';
+                          filterStat = [];
                           productMode = 'group';
                           return;
                         }
@@ -1719,11 +1737,16 @@ watch([currentStatusList, productMode], () => {
                       if (v.type === 'productService') {
                         if (currentIdType !== v.id) {
                           await enterNext('product');
+
                           return;
                         }
                         if (currentIdType === v.id) {
                           expandedTree.pop();
+                          currentIdType = '';
+
+                          filterStat = [];
                           productMode = 'group';
+
                           return;
                         }
                       }