src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -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"