src/components/ui/VnTree.vue

@@ -16,7 +16,7 @@ const router = useRouter();
 const { notify } = useNotify();
 const state = useState();
 
-const treeRef = ref(null);
+const treeRef = ref();
 const showCreateNodeFormVal = ref(false);
 const creationNodeSelectedId = ref(null);
 const expanded = ref([]);
@@ -24,10 +24,9 @@ const expanded = ref([]);
 const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}] }]);
 
 const fetchedChildrensSet = ref(new Set());
-const formData = computed(() => state.get('Tree'));
+// const formData = computed(() => state.get('Tree'));
 
 const onNodeExpanded = (nodeKeysArray) => {
-    console.log('ENTRY',nodeKeysArray)
 
     // Verificar si el nodo ya fue expandido
     if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
@@ -35,40 +34,13 @@ const onNodeExpanded = (nodeKeysArray) => {
         fetchNodeLeaves(nodeKeysArray.at(-1)); // Llamar a la función para obtener los nodos hijos
     }
 
-    console.log(expanded.value)
+    state.set('Tree', nodeKeysArray);
-    console.log(nodes.value)
-    console.log(nodes.value[0].children)
 };
 
-watch(
-    ()=> nodes.value,
-    async(n)  => {
-        console.log('ha entrado',n)
-        addTree({nodes: n});
-    },
-    {deep: true}
-)
-
-watch(
-    ()=> expanded.value,
-    async(n)  => {
-        console.log('ha entrado', n)
-        addTree({nodeKeys: n});
-    },
-    {deep: true}
-)
-
-function addTree(tree){
-    const currentTree = state.get('Tree');
-    console.log('current', currentTree)
-    Object.assign(currentTree ?? {}, tree)
-    console.log('current assign', currentTree)
-
-    state.set('Tree', tree);
-}
 const fetchNodeLeaves = async (nodeKey) => {
     try {
         const node = treeRef.value.getNodeByKey(nodeKey);
+
         if (!node || node.sons === 0) return;
 
         const params = { parentId: node.id };
@@ -122,13 +94,10 @@ const onNodeCreated = async () => {
 onMounted(async () => {
     const tree = state.get('Tree')
     if(tree) {
-        const {nodeKeys, nodes } = tree
+        for (let n of tree){
-        console.log(tree, nodeKeys, nodes)
+            await fetchNodeLeaves(n)
-        console.log('onMounted', Object.values(nodeKeys))
+        }
-        console.log('onMounted2', nodes)
+        expanded.value  = tree
-        nodes.value = nodes
-        onNodeExpanded(Object.values(nodeKeys))
-        expanded.value = nodeKeys
     }
 });
 
@@ -145,10 +114,8 @@ onMounted(async () => {
             @update:expanded="onNodeExpanded($event)"
         >
             <template #default-header="{ node }">
-                {{ node }}
                 <div
                     class="row justify-between full-width q-pr-md cursor-pointer"
-                    @click.stop=""
                 >
                     <a
                         :href="node.id && `#/department/department/${node.id}/summary`"