Merge pull request 'Hotfix: Show only the correct path of the search' (!954) from Hotfix-ZoneLocationsTree into master

Reviewed-on: #954
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/pages/Zone/Card/ZoneCard.vue

@@ -24,7 +24,6 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
         :descriptor="ZoneDescriptor"
         :filter-panel="notIsLocations(ZoneFilterPanel, undefined)"
         :search-data-key="notIsLocations('ZoneList', undefined)"
-        :custom-url="`Zones/${route.params?.id}/getLeaves`"
         :searchbar-props="{
             url: notIsLocations('Zones', 'ZoneLocations'),
             label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -39,8 +39,7 @@ const url = computed(() => `Zones/${route.params.id}/getLeaves`);
 const arrayData = useArrayData(datakey, {
     url: url.value,
 });
-const { store } = arrayData;
-const storeData = computed(() => store.data);
+const store = arrayData.store;
 
 const defaultNode = {
     id: null,
@@ -66,8 +65,20 @@ const onNodeExpanded = async (nodeKeysArray) => {
     if (!nodeKeysSet.has(null)) return;
 
     const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
-    if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
-    else {
+    if (wasExpanded && treeRef.value) {
+        const node = treeRef.value?.getNodeByKey(lastNodeKey);
+        const params = { parentId: node.id };
+        const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
+            params,
+        });
+        if (response.data) {
+            node.childs = response.data.map((n) => {
+                if (n.sons > 0) n.childs = [{}];
+                return n;
+            });
+        }
+        await fetchNodeLeaves(lastNodeKey, true);
+    } else {
         const difference = new Set(
             [...previousExpandedNodes.value].filter((x) => !nodeKeysSet.has(x))
         );
@@ -83,41 +94,21 @@ const formatNodeSelected = (node) => {
     if (node.selected === 1) node.selected = true;
     else if (node.selected === 0) node.selected = false;
 
-    if (node.childs && node.childs.length > 0) {
-        expanded.value.push(node.id);
-
-        node.childs.forEach((childNode) => {
-            formatNodeSelected(childNode);
-        });
-    }
-
     if (node.sons > 0 && !node.childs) node.childs = [{}];
 };
 
 const fetchNodeLeaves = async (nodeKey) => {
-    try {
-        const node = treeRef.value?.getNodeByKey(nodeKey);
-        if (!node || node.sons === 0) return;
+    if (!treeRef.value) return;
+    const node = treeRef.value?.getNodeByKey(nodeKey);
+    if (node.selected === 1) node.selected = true;
+    else if (node.selected === 0) node.selected = false;
+    if (!node || node.sons === 0) return;
 
-        const params = { parentId: node.id };
-        const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
-            params,
-        });
-        if (response.data) {
-            node.childs = response.data.map((n) => {
-                formatNodeSelected(n);
-                return n;
-            });
-        }
-
-        state.set('Tree', node);
-    } catch (err) {
-        console.error('Error fetching department leaves', err);
-        throw new Error();
-    }
+    state.set('Tree', node);
 };
 
 function getNodeIds(node) {
+    if (!node) return [];
     let ids = [];
     if (node.id) ids.push(node.id);
 
@@ -128,60 +119,46 @@ function getNodeIds(node) {
     return ids;
 }
 
-watch(storeData, async (val) => {
-    // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
-    if (!nodes.value[0]) nodes.value = [defaultNode];
-    nodes.value[0].childs = [...val];
-    const fetchedNodeKeys = val.flatMap(getNodeIds);
-    state.set('Tree', [...fetchedNodeKeys]);
+watch(
+    () => store.data,
+    async (val) => {
+        if (!val) return;
+        // // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
+        if (!nodes.value[0]) nodes.value = [defaultNode];
+        nodes.value[0].childs = [...val];
+        const fetchedNodeKeys = val.flatMap(getNodeIds);
+        state.set('Tree', [...fetchedNodeKeys]);
 
-    if (store.userParams?.search === '') {
-        val.forEach((n) => {
-            formatNodeSelected(n);
-        });
-    } else {
-        for (let n of state.get('Tree')) await fetchNodeLeaves(n);
-        expanded.value = [null, ...fetchedNodeKeys];
-    }
-    previousExpandedNodes.value = new Set(expanded.value);
-});
+        if (!store.userParams?.search) {
+            val.forEach((n) => {
+                formatNodeSelected(n);
+            });
+            store.data = null;
+            expanded.value = [null];
+        } else {
+            for (let n of state.get('Tree')) {
+                await fetchNodeLeaves(n);
+            }
+            expanded.value = [null, ...fetchedNodeKeys];
+        }
+        previousExpandedNodes.value = new Set(expanded.value);
+    },
+    { immediate: true }
+);
 
 const reFetch = async () => {
     const { data } = await arrayData.fetch({ append: false });
     nodes.value = data;
+    expanded.value = [null];
 };
 
 onMounted(async () => {
-    if (store.userParams?.search && !props.showSearchBar) {
-        await reFetch();
-        return;
-    }
-    const stateTree = state.get('Tree');
-    const tree = stateTree ? [...state.get('Tree')] : [null];
-    const lastStateTree = state.get('TreeState');
-    if (tree) {
-        for (let n of tree) {
-            await fetchNodeLeaves(n);
-        }
-
-        if (lastStateTree) {
-            tree.push(lastStateTree);
-            await fetchNodeLeaves(lastStateTree);
-        }
-    }
-
-    setTimeout(() => {
-        if (lastStateTree) {
-            document.getElementById(lastStateTree).scrollIntoView();
-        }
-    }, 1000);
-
-    expanded.value.unshift(null);
-    previousExpandedNodes.value = new Set(expanded.value);
+    if (store.userParams?.search) await arrayData.fetch({});
 });
 
 onUnmounted(() => {
     state.set('Tree', undefined);
+    arrayData.destroy();
 });
 </script>