From 5ff95c2b93c18af2b7cbe2db97d44a256c7c0f45 Mon Sep 17 00:00:00 2001 From: Jon Date: Thu, 21 Nov 2024 10:10:44 +0100 Subject: [PATCH] fix: locations tree --- src/pages/Zone/Card/ZoneCard.vue | 1 - src/pages/Zone/Card/ZoneLocationsTree.vue | 154 +++++++--------------- 2 files changed, 48 insertions(+), 107 deletions(-) diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue index 8ad25b80f..a470cd5bd 100644 --- a/src/pages/Zone/Card/ZoneCard.vue +++ b/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')), diff --git a/src/pages/Zone/Card/ZoneLocationsTree.vue b/src/pages/Zone/Card/ZoneLocationsTree.vue index c91bf670c..23a37ef7c 100644 --- a/src/pages/Zone/Card/ZoneLocationsTree.vue +++ b/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,59 +119,32 @@ 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; +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); + }); + store.data = null; + expanded.value = [null]; + } else { + for (let n of state.get('Tree')) { + await fetchNodeLeaves(n); } + expanded.value = [null, ...fetchedNodeKeys]; } - } - 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]); - expanded.value = [null, ...fetchedNodeKeys]; - previousExpandedNodes.value = new Set(expanded.value); -}); + 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 = ''; - - 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(); });