From 452ba788c983fcb2e1c34046ce590c9ef85abdfb Mon Sep 17 00:00:00 2001 From: Jon Date: Mon, 18 Nov 2024 09:46:34 +0100 Subject: [PATCH] fix: how only the correct path of the search --- src/pages/Zone/Card/ZoneLocationsTree.vue | 66 +++++++++++++++++------ 1 file changed, 51 insertions(+), 15 deletions(-) diff --git a/src/pages/Zone/Card/ZoneLocationsTree.vue b/src/pages/Zone/Card/ZoneLocationsTree.vue index 6b3934df7..afe3006ea 100644 --- a/src/pages/Zone/Card/ZoneLocationsTree.vue +++ b/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); - }); - } else { - for (let n of state.get('Tree')) await fetchNodeLeaves(n); - expanded.value = [null, ...fetchedNodeKeys]; - } + 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]); + 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');