Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into dev

src/components/ui/VnTree.vue

@@ -1,20 +1,21 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useState } from 'src/composables/useState';
 import { useQuasar } from 'quasar';
-
+import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 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 router = useRouter();
 const { notify } = useNotify();
+const state = useState();
+const router = useRouter();
 
-const treeRef = ref(null);
+const treeRef = ref();
 const showCreateNodeFormVal = ref(false);
 const creationNodeSelectedId = ref(null);
 const expanded = ref([]);
@@ -24,30 +25,35 @@ const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}
 const fetchedChildrensSet = ref(new Set());
 
 const onNodeExpanded = (nodeKeysArray) => {
-    // Verificar si el nodo ya fue expandido
     if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
         fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
-        fetchNodeLeaves(nodeKeysArray.at(-1)); // Llamar a la función para obtener los nodos hijos
+        fetchNodeLeaves(nodeKeysArray.at(-1));
     }
+
+    state.set('Tree', nodeKeysArray);
 };
 
 const fetchNodeLeaves = async (nodeKey) => {
     try {
-        const node = treeRef.value.getNodeByKey(nodeKey);
+        const node = treeRef.value?.getNodeByKey(nodeKey);
+
         if (!node || node.sons === 0) return;
 
         const params = { parentId: node.id };
         const response = await axios.get('/departments/getLeaves', { params });
-
-        // Si hay datos en la respuesta y tiene hijos, agregarlos al nodo actual
         if (response.data) {
-            node.children = response.data;
+            node.children = response.data.map((n) => {
-            node.children.forEach((node) => {
+                const hasChildrens = n.sons > 0;
-                if (node.sons) node.children = [{}];
+
+                n.children = hasChildrens ? [{}] : null;
+                n.clickable = true;
+                return n;
             });
         }
+
+        state.set('Tree', node);
     } catch (err) {
-        console.error('Error fetching department leaves');
+        console.error('Error fetching department leaves', err);
         throw new Error();
     }
 };
@@ -84,10 +90,49 @@ const onNodeCreated = async () => {
     await fetchNodeLeaves(creationNodeSelectedId.value);
 };
 
-const redirectToDepartmentSummary = (id) => {
+onMounted(async (n) => {
-    if (!id) return;
+    const tree = [...state.get('Tree'), 1];
-    router.push({ name: 'DepartmentSummary', params: { id } });
+    const lastStateTree = state.get('TreeState');
-};
+    if (tree) {
+        for (let n of tree) {
+            await fetchNodeLeaves(n);
+        }
+        expanded.value = tree;
+
+        if (lastStateTree) {
+            tree.push(lastStateTree);
+            await fetchNodeLeaves(lastStateTree);
+        }
+    }
+    setTimeout(() => {
+        if (lastStateTree) {
+            document.getElementById(lastStateTree).scrollIntoView();
+        }
+    }, 1000);
+});
+
+function handleEvent(type, event, node) {
+    const isParent = node.sons > 0;
+    const lastId = isParent ? node.id : node.parentFk;
+
+    switch (type) {
+        case 'path':
+            state.set('TreeState', lastId);
+            node.id && router.push({ path: `/department/department/${node.id}/summary` });
+            break;
+
+        case 'tab':
+            state.set('TreeState', lastId);
+            node.id &&
+                window.open(`#/department/department/${node.id}/summary`, '_blank');
+            break;
+
+        default:
+            node.id &&
+                router.push({ path: `#/department/department/${node.id}/summary` });
+            break;
+    }
+}
 </script>
 
 <template>
@@ -99,15 +144,27 @@ const redirectToDepartmentSummary = (id) => {
             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"
+                    :id="node.id"
-                    @click.stop="redirectToDepartmentSummary(node.id)"
+                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
+                >
+                    <div>
+                        <span
+                            @click="handleEvent('row', $event, node)"
+                            class="cursor-pointer"
                         >
-                    <span class="text-uppercase">
                             {{ node.name }}
+                            <DepartmentDescriptorProxy :id="node.id" />
                         </span>
+                    </div>
+                    <div
+                        @click.stop.exact="handleEvent('path', $event, node)"
+                        @click.ctrl.stop="handleEvent('tab', $event, node)"
+                        style="flex-grow: 1; width: 10px"
+                    ></div>
                     <div class="row justify-between" style="max-width: max-content">
                         <QIcon
                             v-if="node.id"
@@ -149,6 +206,11 @@ const redirectToDepartmentSummary = (id) => {
     </QCard>
 </template>
 
+<style lang="scss" scoped>
+span {
+    color: $primary;
+}
+</style>
 <i18n>
     es:
         Departments: Departamentos

src/pages/Department/Card/DepartmentDescriptorProxy.vue

@@ -0,0 +1,21 @@
+<script setup>
+import DepartmentDescriptor from './DepartmentDescriptor.vue';
+import DepartmentSummaryDialog from './DepartmentSummaryDialog.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <DepartmentDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="DepartmentSummaryDialog"
+        />
+    </QPopupProxy>
+</template>

src/pages/Department/Card/DepartmentSummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import DepartmentSummary from './DepartmentSummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <DepartmentSummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>