improvement

This commit is contained in:
William Buezas 2024-05-27 10:32:10 -03:00
parent b408e0daaf
commit f2df252a94
1 changed files with 30 additions and 21 deletions

View File

@ -21,7 +21,7 @@ const { store } = arrayData;
const storeData = computed(() => store.data); const storeData = computed(() => store.data);
const nodes = ref([ 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()); const previousExpandedNodes = ref(new Set());
@ -30,7 +30,6 @@ const onNodeExpanded = async (nodeKeysArray) => {
const nodeKeysSet = new Set(nodeKeysArray); const nodeKeysSet = new Set(nodeKeysArray);
const lastNodeKey = nodeKeysArray.at(-1); const lastNodeKey = nodeKeysArray.at(-1);
const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey); const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
if (wasExpanded) await fetchNodeLeaves(lastNodeKey); if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
else { else {
const difference = new Set( const difference = new Set(
@ -48,6 +47,16 @@ const onNodeExpanded = async (nodeKeysArray) => {
const formatNodeSelected = (node) => { const formatNodeSelected = (node) => {
if (node.selected === 1) node.selected = true; if (node.selected === 1) node.selected = true;
else if (node.selected === 0) node.selected = false; 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) => { const fetchNodeLeaves = async (nodeKey) => {
@ -60,16 +69,8 @@ const fetchNodeLeaves = async (nodeKey) => {
params, params,
}); });
if (response.data) { if (response.data) {
node.children = response.data.map((n) => { node.childs = response.data.map((n) => {
const hasChildrens = n.sons > 0;
n.children = hasChildrens ? [{}] : null;
formatNodeSelected(n); formatNodeSelected(n);
if (n.child && n.child.length > 0) {
n.child.forEach((childNode) => {
formatNodeSelected(childNode);
});
}
return n; return n;
}); });
} }
@ -85,24 +86,30 @@ function getNodeIds(node) {
let ids = []; let ids = [];
if (node.id) ids.push(node.id); if (node.id) ids.push(node.id);
const children = node.childs || node.children; if (node.childs)
if (children) { node.childs.forEach((child) => {
children.forEach((child) => {
ids = ids.concat(getNodeIds(child)); ids = ids.concat(getNodeIds(child));
}); });
}
return ids; return ids;
} }
watch(storeData, async (val) => { watch(storeData, async (val) => {
// Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar // 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); const fetchedNodeKeys = val.flatMap(getNodeIds);
state.set('Tree', [...fetchedNodeKeys]); 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 () => { onMounted(async () => {
@ -111,13 +118,12 @@ onMounted(async () => {
return; return;
} }
const stateTree = state.get('Tree'); 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'); const lastStateTree = state.get('TreeState');
if (tree) { if (tree) {
for (let n of tree) { for (let n of tree) {
await fetchNodeLeaves(n); await fetchNodeLeaves(n);
} }
expanded.value = tree;
if (lastStateTree) { if (lastStateTree) {
tree.push(lastStateTree); tree.push(lastStateTree);
@ -130,6 +136,8 @@ onMounted(async () => {
document.getElementById(lastStateTree).scrollIntoView(); document.getElementById(lastStateTree).scrollIntoView();
} }
}, 1000); }, 1000);
previousExpandedNodes.value = new Set(expanded.value);
}); });
</script> </script>
@ -139,6 +147,7 @@ onMounted(async () => {
:nodes="nodes" :nodes="nodes"
node-key="id" node-key="id"
label-key="name" label-key="name"
children-key="childs"
v-model:expanded="expanded" v-model:expanded="expanded"
@update:expanded="onNodeExpanded($event)" @update:expanded="onNodeExpanded($event)"
:default-expand-all="true" :default-expand-all="true"