improvement
This commit is contained in:
parent
b408e0daaf
commit
f2df252a94
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue