From f2df252a94ae4d9238ec3c526b0e27802ab5d63d Mon Sep 17 00:00:00 2001 From: wbuezas Date: Mon, 27 May 2024 10:32:10 -0300 Subject: [PATCH] improvement --- src/pages/Zone/Card/ZoneLocationsTree.vue | 51 +++++++++++++---------- 1 file changed, 30 insertions(+), 21 deletions(-) diff --git a/src/pages/Zone/Card/ZoneLocationsTree.vue b/src/pages/Zone/Card/ZoneLocationsTree.vue index 69ace53e2..f924a2e21 100644 --- a/src/pages/Zone/Card/ZoneLocationsTree.vue +++ b/src/pages/Zone/Card/ZoneLocationsTree.vue @@ -21,7 +21,7 @@ const { store } = arrayData; const storeData = computed(() => store.data); const nodes = ref([ - { id: null, name: t('zoneLocations.locations'), sons: true, children: [{}] }, + { id: null, name: t('zoneLocations.locations'), sons: true, childs: [{}] }, ]); const previousExpandedNodes = ref(new Set()); @@ -30,7 +30,6 @@ const onNodeExpanded = async (nodeKeysArray) => { const nodeKeysSet = new Set(nodeKeysArray); const lastNodeKey = nodeKeysArray.at(-1); const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey); - if (wasExpanded) await fetchNodeLeaves(lastNodeKey); else { const difference = new Set( @@ -48,6 +47,16 @@ const onNodeExpanded = async (nodeKeysArray) => { 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) => { @@ -60,16 +69,8 @@ const fetchNodeLeaves = async (nodeKey) => { params, }); if (response.data) { - node.children = response.data.map((n) => { - const hasChildrens = n.sons > 0; - n.children = hasChildrens ? [{}] : null; + node.childs = response.data.map((n) => { formatNodeSelected(n); - - if (n.child && n.child.length > 0) { - n.child.forEach((childNode) => { - formatNodeSelected(childNode); - }); - } return n; }); } @@ -85,24 +86,30 @@ function getNodeIds(node) { let ids = []; if (node.id) ids.push(node.id); - const children = node.childs || node.children; - if (children) { - children.forEach((child) => { + if (node.childs) + node.childs.forEach((child) => { ids = ids.concat(getNodeIds(child)); }); - } return ids; } 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].children = [...val]; + nodes.value[0].childs = [...val]; const fetchedNodeKeys = val.flatMap(getNodeIds); state.set('Tree', [...fetchedNodeKeys]); - for (let n of state.get('Tree')) { - await fetchNodeLeaves(n); + + if (store.userParams?.search === '') { + val.forEach((n) => { + formatNodeSelected(n); + }); + } else { + for (let n of state.get('Tree')) { + await fetchNodeLeaves(n); + } + expanded.value = [null]; } - expanded.value = [null, 1, ...fetchedNodeKeys]; + previousExpandedNodes.value = new Set(expanded.value); }); onMounted(async () => { @@ -111,13 +118,12 @@ onMounted(async () => { return; } const stateTree = state.get('Tree'); - const tree = stateTree ? [...state.get('Tree'), 1] : [null, 1]; + const tree = stateTree ? [...state.get('Tree')] : [null]; const lastStateTree = state.get('TreeState'); if (tree) { for (let n of tree) { await fetchNodeLeaves(n); } - expanded.value = tree; if (lastStateTree) { tree.push(lastStateTree); @@ -130,6 +136,8 @@ onMounted(async () => { document.getElementById(lastStateTree).scrollIntoView(); } }, 1000); + + previousExpandedNodes.value = new Set(expanded.value); }); @@ -139,6 +147,7 @@ onMounted(async () => { :nodes="nodes" node-key="id" label-key="name" + children-key="childs" v-model:expanded="expanded" @update:expanded="onNodeExpanded($event)" :default-expand-all="true"