src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -126,33 +126,69 @@ function getNodeIds(node) {
     return ids;
 }
 
+const findNodePath = (node, searchTerm, path = []) => {
+    if (node.name.toLowerCase().includes(searchTerm.toLowerCase())) {
+        path.push(node.id);
+        return path;
+    }
+    if (node.childs) {
+        for (let child of node.childs) {
+            const resultPath = findNodePath(child, searchTerm, [...path, node.id]);
+            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
-    nodes.value[0].childs = [...val];
-    const fetchedNodeKeys = val.flatMap(getNodeIds);
-    state.set('Tree', [...fetchedNodeKeys]);
+    const searchTerm = store.userParams?.search || '';
 
-    if (store.userParams?.search === '') {
-        val.forEach((n) => {
-            formatNodeSelected(n);
+    const filteredNodes = filterNodes(val, searchTerm);
+    let nodePath = [];
+    filteredNodes.forEach((node) => {
+        nodePath = findNodePath(node, searchTerm);
     });
-    } else {
-        for (let n of state.get('Tree')) await fetchNodeLeaves(n);
+
+    const finalFilteredNodes = filteredNodes.filter((node) => nodePath.includes(node.id));
+    nodes.value[0].childs = [...finalFilteredNodes];
+    const fetchedNodeKeys = finalFilteredNodes.flatMap(getNodeIds);
+    state.set('Tree', [...fetchedNodeKeys]);
     expanded.value = [null, ...fetchedNodeKeys];
-    }
     previousExpandedNodes.value = new Set(expanded.value);
 });
 
 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;
-    }
+    store.userParams.search = '';
+
     const stateTree = state.get('Tree');
     const tree = stateTree ? [...state.get('Tree')] : [null];
     const lastStateTree = state.get('TreeState');