refs #6763 fix tree descriptor

src/components/ui/VnTree.vue

@@ -7,11 +7,13 @@ import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescr
 import CreateDepartmentChild from '../CreateDepartmentChild.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import { useRouter } from 'vue-router';
 
 const quasar = useQuasar();
 const { t } = useI18n();
 const { notify } = useNotify();
 const state = useState();
+const router = useRouter();
 
 const treeRef = ref();
 const showCreateNodeFormVal = ref(false);
@@ -24,7 +26,10 @@ const fetchedChildrensSet = ref(new Set());
 // const formData = computed(() => state.get('Tree'));
 
 const onNodeExpanded = (nodeKeysArray) => {
-
+    const lastStateTree = state.get('TreeState');
+    if (lastStateTree && lastStateTree) {
+        !nodeKeysArray.includes(lastStateTree) && nodeKeysArray.push(lastStateTree);
+    }
     // Verificar si el nodo ya fue expandido
     if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
         fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
@@ -35,9 +40,11 @@ const onNodeExpanded = (nodeKeysArray) => {
 };
 
 const fetchNodeLeaves = async (nodeKey) => {
+    console.log('nodeKey: ', nodeKey);
     try {
         const node = treeRef.value.getNodeByKey(nodeKey);
 
+        console.log(node);
         if (!node || node.sons === 0) return;
 
         const params = { parentId: node.id };
@@ -47,11 +54,13 @@ const fetchNodeLeaves = async (nodeKey) => {
         if (response.data) {
             node.children = response.data;
             node.children.forEach((node) => {
-                if (node.sons) node.children = [{}];
+                node.children = node.sons > 0 ? [{}] : null;
             });
         }
+
+        state.set('Tree', node);
     } catch (err) {
-        console.error('Error fetching department leaves');
+        console.error('Error fetching department leaves', err);
         throw new Error();
     }
 };
@@ -88,16 +97,46 @@ const onNodeCreated = async () => {
     await fetchNodeLeaves(creationNodeSelectedId.value);
 };
 
-onMounted(async () => {
-    const tree = state.get('Tree')
+onMounted(async (n) => {
+    const tree = state.get('Tree');
     if (tree) {
-        for (let n of tree){
-            await fetchNodeLeaves(n)
-        }
-        expanded.value  = tree
-    }
-});
+        console.log('tree: ', tree);
 
+        for (let n of tree) {
+            console.log('n', n);
+            // setTimeout(async () => {
+            //     await fetchNodeLeaves(n);
+            // }, 1000);
+            await fetchNodeLeaves(n);
+        }
+        expanded.value = tree;
+        console.log('expanded.value', expanded.value);
+    }
+    treeRef.value.expandAll();
+});
+function handleClick(event, node) {
+    state.set('TreeState', node.parentFk);
+    node.id && router.push({ path: `/department/department/${node.id}/summary` });
+}
+function handleTab(event, node) {
+    state.set('TreeState', node.parentFk);
+    node.id && window.open(`#/department/department/${node.id}/summary`, '_blank');
+}
+
+function handleRow(event, node) {
+    switch (event.currentTarget.nodeName.toLowerCase()) {
+        case 'div':
+            node.id &&
+                router.push({ path: `#/department/department/${node.id}/summary` });
+            break;
+
+        case 'span':
+            break;
+
+        default:
+            break;
+    }
+}
 </script>
 
 <template>
@@ -109,20 +148,20 @@ onMounted(async () => {
             label-key="name"
             v-model:expanded="expanded"
             @update:expanded="onNodeExpanded($event)"
+            :default-expand-all="true"
         >
             <template #default-header="{ node }">
-                <div
-                    class="row justify-between full-width q-pr-md cursor-pointer"
-                    @click.stop.exact="`#/department/department/${node.id}/summary`"
-                    @click.ctrl.stop="`#/department/department/${node.id}/summary`"
-                    :href="node.id && `#/department/department/${node.id}/summary`"
-                    color: inherit
-                >
-                    <a>
+                <!-- @click="node.id && router.push({path:`#/department/department/${node.id}/summary`})" -->
+                <div class="row justify-between full-width q-pr-md cursor-pointer">
+                    <div>
+                        <span @click="handleRow($event, node)"> {{ node.name }} </span>
                         <DepartmentDescriptorProxy :id="node.id" />
-                        {{ node.name }}
-
-                    </a>
+                    </div>
+                    <div
+                        @click.stop.exact="handleClick($event, node)"
+                        @click.ctrl.stop="handleTab($event, node)"
+                        style="flex-grow: 1; width: 10px"
+                    ></div>
                     <div class="row justify-between" style="max-width: max-content">
                         <QIcon
                             v-if="node.id"
@@ -151,6 +190,7 @@ onMounted(async () => {
                 </div>
             </template>
         </QTree>
+        <!-- <DepartmentDescriptorProxy :id="node.id" /> -->
         <QDialog
             v-model="showCreateNodeFormVal"
             transition-show="scale"
@@ -178,4 +218,3 @@ a {
         Are you sure you want to delete it?: ¿Seguro que quieres eliminarlo?
         Delete department: Eliminar departamento
 </i18n>
-