Merge branch 'dev' into 6907_fix_input_clearable_hover

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:stretch-slim
-RUN curl -fsSL https://bun.sh/install | bash
-RUN bun install -g @quasar/cli
+RUN corepack enable pnpm
+RUN pnpm install -g @quasar/cli
 WORKDIR /app
 COPY dist/spa ./
 CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]

Jenkinsfile

@@ -62,7 +62,7 @@ pipeline {
                 NODE_ENV = ""
             }
             steps {
-                sh 'bun install --no-audit --prefer-offline'
+                sh 'pnpm install --no-audit --prefer-offline'
             }
         }
         stage('Test') {
@@ -72,10 +72,18 @@ pipeline {
             environment {
                 NODE_ENV = ""
             }
-            parallel {
-                stage('Frontend') {
-                    steps {
-                        sh 'bun run test:unit:ci'
+            steps {
+                sh 'pnpm run test:unit:ci'
+            }
+            post {
+                always {
+                    script {
+                        try {
+                            junit 'junitresults.xml'
+                            junit 'junit.xml'
+                        } catch (e) {
+                            echo e.toString()
+                        }
                     }
                 }
             }
@@ -89,7 +97,11 @@ pipeline {
             }
             steps {
                 sh 'quasar build'
-                // dockerBuild()
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = packageJson.version
+                }
+                dockerBuild()
             }
         }
         stage('Deploy') {
@@ -108,18 +120,4 @@ pipeline {
             }
         }
     }
-    post {
-        always {
-            script {
-                if (!PROTECTED_BRANCH) {
-                    try {
-                        junit 'junitresults.xml'
-                        junit 'junit.xml'
-                    } catch (e) {
-                        echo e.toString()
-                    }
-                }
-            }
-        }
-    }
 }

package.json

@@ -16,12 +16,12 @@
     },
     "dependencies": {
         "@quasar/cli": "^2.3.0",
-        "@quasar/extras": "^1.16.4",
+        "@quasar/extras": "^1.16.9",
         "axios": "^1.4.0",
         "chromium": "^3.0.3",
         "croppie": "^2.6.5",
         "pinia": "^2.1.3",
-        "quasar": "^2.12.0",
+        "quasar": "^2.14.5",
         "validator": "^13.9.0",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
@@ -30,9 +30,9 @@
     "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^0.8.1",
         "@pinia/testing": "^0.1.2",
-        "@quasar/app-vite": "^1.4.3",
-        "@quasar/quasar-app-extension-testing-unit-vitest": "^0.3.0",
-        "@vue/test-utils": "^2.3.2",
+        "@quasar/app-vite": "^1.7.3",
+        "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+        "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",
         "cypress": "^12.13.0",
         "eslint": "^8.41.0",
@@ -41,7 +41,7 @@
         "eslint-plugin-vue": "^9.14.1",
         "postcss": "^8.4.23",
         "prettier": "^2.8.8",
-        "vitest": "^0.31.1"
+        "vitest": "^1.3.1"
     },
     "engines": {
         "node": "^20 || ^18 || ^16",
@@ -50,8 +50,8 @@
         "bun": ">= 1.0.25"
     },
     "overrides": {
-        "@vitejs/plugin-vue": "^4.0.0",
-        "vite": "^4.3.5",
-        "vitest": "^0.31.1"
+        "@vitejs/plugin-vue": "^5.0.4",
+        "vite": "^5.1.4",
+        "vitest": "^1.3.1"
     }
 }

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.forEach((node) => {
-                if (node.sons) node.children = [{}];
+            node.children = response.data.map((n) => {
+                const hasChildrens = n.sons > 0;
+
+                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) => {
-    if (!id) return;
-    router.push({ name: 'DepartmentSummary', params: { id } });
-};
+onMounted(async (n) => {
+    const tree = [...state.get('Tree'), 1];
+    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"
-                    @click.stop="redirectToDepartmentSummary(node.id)"
+                    :id="node.id"
+                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
                 >
-                    <span class="text-uppercase">
-                        {{ node.name }}
-                    </span>
+                    <div>
+                        <span
+                            @click="handleEvent('row', $event, node)"
+                            class="cursor-pointer"
+                        >
+                            {{ 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>