fix: locations tree

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 store = arrayData.store;
-const storeData = computed(() => store.data);
 
 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);
+    if (wasExpanded && treeRef.value) {
-    else {
+        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 {
+    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();
-    }
 };
 
 function getNodeIds(node) {
+    if (!node) return [];
     let ids = [];
     if (node.id) ids.push(node.id);
 
@@ -128,59 +119,32 @@ function getNodeIds(node) {
     return ids;
 }
 
-const findNodePath = (node, searchTerm, path = []) => {
+watch(
-    if (node.name.toLowerCase().includes(searchTerm.toLowerCase())) {
+    () => store.data,
-        path.push(node.id);
+    async (val) => {
-        return path;
+        if (!val) return;
-    }
+        // // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
-    if (node.childs) {
+        if (!nodes.value[0]) nodes.value = [defaultNode];
-        for (let child of node.childs) {
+        nodes.value[0].childs = [...val];
-            const resultPath = findNodePath(child, searchTerm, [...path, node.id]);
+        const fetchedNodeKeys = val.flatMap(getNodeIds);
-            if (resultPath.length > 0) {
-                return resultPath;
-            }
-        }
-    }
-    return [];
-};
-
-const filterNodes = (nodes, searchTerm) => {
-    return nodes
-        .map((node) => {
-            if (node.name.toLowerCase().includes(searchTerm.toLowerCase())) {
-                if (node.childs) {
-                    node.childs = filterNodes(node.childs, searchTerm);
-                }
-                return node;
-            }
-            if (node.childs) {
-                node.childs = filterNodes(node.childs, searchTerm);
-                if (node.childs.length > 0) {
-                    return node;
-                }
-            }
-            return null;
-        })
-        .filter((node) => node !== null);
-};
-
-watch(storeData, async (val) => {
-    // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
-    const searchTerm = store.userParams?.search || '';
-
-    const filteredNodes = filterNodes(val, searchTerm);
-    let nodePath = [];
-    filteredNodes.forEach((node) => {
-        nodePath = findNodePath(node, searchTerm);
-    });
-
-    const finalFilteredNodes = filteredNodes.filter((node) => nodePath.includes(node.id));
-    nodes.value[0].childs = [...finalFilteredNodes];
-    const fetchedNodeKeys = finalFilteredNodes.flatMap(getNodeIds);
         state.set('Tree', [...fetchedNodeKeys]);
+
+        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 });
@@ -189,34 +153,12 @@ const reFetch = async () => {
 };
 
 onMounted(async () => {
-    store.userParams.search = '';
+    if (store.userParams?.search) await arrayData.fetch({});
-
-    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);
 });
 
 onUnmounted(() => {
     state.set('Tree', undefined);
+    arrayData.destroy();
 });
 </script>