From 7175c50bd6ca46830801bfc3a6016de57f69c7a4 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 6 Feb 2024 09:50:18 +0100
Subject: [PATCH] refs #6763 popup fix click

---
 src/components/ui/VnTree.vue                  |  9 +++++-
 .../Card/DepartmentDescriptorProxy.vue        | 21 ++++++++++++++
 .../Card/DepartmentSummaryDialog.vue          | 29 +++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Department/Card/DepartmentDescriptorProxy.vue
 create mode 100644 src/pages/Department/Card/DepartmentSummaryDialog.vue

diff --git a/src/components/ui/VnTree.vue b/src/components/ui/VnTree.vue
index 33d096453..631b501b6 100644
--- a/src/components/ui/VnTree.vue
+++ b/src/components/ui/VnTree.vue
@@ -4,7 +4,8 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useState } from 'src/composables/useState';
 import { useQuasar } from 'quasar';
-
+import DepartmentSummaryDialog from 'src/pages/Department/Card/DepartmentSummaryDialog.vue';
+import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 import CreateDepartmentChild from '../CreateDepartmentChild.vue';
 
 import axios from 'axios';
@@ -116,13 +117,19 @@ onMounted(async () => {
             <template #default-header="{ node }">
                 <div
                     class="row justify-between full-width q-pr-md cursor-pointer"
+
                 >
                     <a
                         :href="node.id && `#/department/department/${node.id}/summary`"
                         color: inherit
+                        @click.stop.exact="`#/department/department/${node.id}/summary`"
+                        @click.ctrl.stop="`#/department/department/${node.id}/summary`"
                     >
                         {{ node.name }}
+
                     </a>
+                    <DepartmentSummaryDialog :id="node.id" />
+
                     <div class="row justify-between" style="max-width: max-content">
                         <QIcon
                             v-if="node.id"
diff --git a/src/pages/Department/Card/DepartmentDescriptorProxy.vue b/src/pages/Department/Card/DepartmentDescriptorProxy.vue
new file mode 100644
index 000000000..07a6b6af1
--- /dev/null
+++ b/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>
diff --git a/src/pages/Department/Card/DepartmentSummaryDialog.vue b/src/pages/Department/Card/DepartmentSummaryDialog.vue
new file mode 100644
index 000000000..3bf4d7a26
--- /dev/null
+++ b/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>