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 b0a97b2f6..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,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(); });