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 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);
});
</script>
@ -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"