From 2aff1d3d06a73d42b3239e67da1040ad6c261aff Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 13 Jan 2025 10:20:28 +0100
Subject: [PATCH] feat: refs #8120 added new style to summary popups

---
 src/components/common/VnSummaryDialog.vue | 34 +++++++++++++++++++++--
 src/css/quasar.variables.scss             |  5 ++++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnSummaryDialog.vue b/src/components/common/VnSummaryDialog.vue
index 08fc8870d..57473cb3f 100644
--- a/src/components/common/VnSummaryDialog.vue
+++ b/src/components/common/VnSummaryDialog.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
+import { computed } from 'vue';
 
-defineProps({
+const $props = defineProps({
     id: {
         type: Number,
         required: true,
@@ -15,9 +16,36 @@ defineProps({
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
+
+const moduleClass = computed(() => {
+    const name = $props.summary.__name;
+
+    const classMap = {
+        CustomerSummary: 'largeSummary',
+        EntrySummary: 'largeSummary',
+        InvoiceOutSummary: 'largeSummary',
+        RouteSummary: 'largeSummary',
+        TicketrSummary: 'largeSummary',
+        InvoiceInSummary: 'xlargeSummary',
+    };
+
+    return classMap[name] || 'defaultSummary';
+});
 </script>
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <component :is="summary" :id="id" />
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <component :is="$props.summary" :id="$props.id" :class="moduleClass" />
     </QDialog>
 </template>
+
+<style lang="scss" scoped>
+.defaultSummary {
+    max-width: $width-md;
+}
+.largeSummary {
+    max-width: $width-lg;
+}
+.xlargeSummary {
+    max-width: $width-xl;
+}
+</style>
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 9f7c62848..d6e992437 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -33,6 +33,11 @@ $dark-shadow-color: black;
 $layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
 $spacing-md: 16px;
 $color-font-secondary: #777;
+$width-xs: 400px;
+$width-sm: 544px;
+$width-md: 800px;
+$width-lg: 1280px;
+$width-xl: 1600px;
 .bg-success {
     background-color: $positive;
 }