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