wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

fix: locations tree

This commit is contained in:
Jon Elias 2024-11-21 10:10:44 +01:00
parent a64575c7cc
commit 5ff95c2b93
2 changed files with 48 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Zone/Card/ZoneCard.vue
View File

@ -24,7 +24,6 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
:descriptor="ZoneDescriptor"
:filter-panel="notIsLocations(ZoneFilterPanel, undefined)"
:search-data-key="notIsLocations('ZoneList', undefined)"
:custom-url="`Zones/${route.params?.id}/getLeaves`"
:searchbar-props="{
url: notIsLocations('Zones', 'ZoneLocations'),
label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),

148
src/pages/Zone/Card/ZoneLocationsTree.vue
View File

@ -39,8 +39,7 @@ const url = computed(() => `Zones/${route.params.id}/getLeaves`);
const arrayData = useArrayData(datakey, {
url: url.value,
});
const { store } = arrayData;
const storeData = computed(() => store.data);
const store = arrayData.store;
const defaultNode = {
id: null,
@ -66,8 +65,20 @@ const onNodeExpanded = async (nodeKeysArray) => {
if (!nodeKeysSet.has(null)) return;
const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
else {
if (wasExpanded && treeRef.value) {
const node = treeRef.value?.getNodeByKey(lastNodeKey);
const params = { parentId: node.id };
const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
params,
});
if (response.data) {
node.childs = response.data.map((n) => {
if (n.sons > 0) n.childs = [{}];
return n;
});
}
await fetchNodeLeaves(lastNodeKey, true);
} else {
const difference = new Set(
[...previousExpandedNodes.value].filter((x) => !nodeKeysSet.has(x))
);
@ -83,41 +94,21 @@ 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) => {
try {
if (!treeRef.value) return;
const node = treeRef.value?.getNodeByKey(nodeKey);
if (node.selected === 1) node.selected = true;
else if (node.selected === 0) node.selected = false;
if (!node || node.sons === 0) return;
const params = { parentId: node.id };
const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
params,
});
if (response.data) {
node.childs = response.data.map((n) => {
formatNodeSelected(n);
return n;
});
}
state.set('Tree', node);
} catch (err) {
console.error('Error fetching department leaves', err);
throw new Error();
}
};
function getNodeIds(node) {
if (!node) return [];
let ids = [];
if (node.id) ids.push(node.id);
@ -128,59 +119,32 @@ function getNodeIds(node) {
return ids;
}
const findNodePath = (node, searchTerm, path = []) => {
if (node.name.toLowerCase().includes(searchTerm.toLowerCase())) {
path.push(node.id);
return path;
}
if (node.childs) {
for (let child of node.childs) {
const resultPath = findNodePath(child, searchTerm, [...path, node.id]);
if (resultPath.length > 0) {
return resultPath;
}
}
}
return [];
};
const filterNodes = (nodes, searchTerm) => {
return nodes
.map((node) => {
if (node.name.toLowerCase().includes(searchTerm.toLowerCase())) {
if (node.childs) {
node.childs = filterNodes(node.childs, searchTerm);
}
return node;
}
if (node.childs) {
node.childs = filterNodes(node.childs, searchTerm);
if (node.childs.length > 0) {
return node;
}
}
return null;
})
.filter((node) => node !== null);
};
watch(storeData, async (val) => {
// Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
const searchTerm = store.userParams?.search || '';
const filteredNodes = filterNodes(val, searchTerm);
let nodePath = [];
filteredNodes.forEach((node) => {
nodePath = findNodePath(node, searchTerm);
});
const finalFilteredNodes = filteredNodes.filter((node) => nodePath.includes(node.id));
nodes.value[0].childs = [...finalFilteredNodes];
const fetchedNodeKeys = finalFilteredNodes.flatMap(getNodeIds);
watch(
() => store.data,
async (val) => {
if (!val) return;
// // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
if (!nodes.value[0]) nodes.value = [defaultNode];
nodes.value[0].childs = [...val];
const fetchedNodeKeys = val.flatMap(getNodeIds);
state.set('Tree', [...fetchedNodeKeys]);
expanded.value = [null, ...fetchedNodeKeys];
previousExpandedNodes.value = new Set(expanded.value);
if (!store.userParams?.search) {
val.forEach((n) => {
formatNodeSelected(n);
});
store.data = null;
expanded.value = [null];
} else {
for (let n of state.get('Tree')) {
await fetchNodeLeaves(n);
}
expanded.value = [null, ...fetchedNodeKeys];
}
previousExpandedNodes.value = new Set(expanded.value);
},
{ immediate: true }
);
const reFetch = async () => {
const { data } = await arrayData.fetch({ append: false });
@ -189,34 +153,12 @@ const reFetch = async () => {
};
onMounted(async () => {
store.userParams.search = '';
const stateTree = state.get('Tree');
const tree = stateTree ? [...state.get('Tree')] : [null];
const lastStateTree = state.get('TreeState');
if (tree) {
for (let n of tree) {
await fetchNodeLeaves(n);
}
if (lastStateTree) {
tree.push(lastStateTree);
await fetchNodeLeaves(lastStateTree);
}
}
setTimeout(() => {
if (lastStateTree) {
document.getElementById(lastStateTree).scrollIntoView();
}
}, 1000);
expanded.value.unshift(null);
previousExpandedNodes.value = new Set(expanded.value);
if (store.userParams?.search) await arrayData.fetch({});
});
onUnmounted(() => {
state.set('Tree', undefined);
arrayData.destroy();
});
</script>