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 1/5] 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;
 }
-- 
2.40.1


From b48cc55f4beec8bc03f67ff938f4e935fa98642f Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 13 Jan 2025 11:01:26 +0100
Subject: [PATCH 2/5] refactor: refs #8120 requested changes

---
 src/components/common/VnSummaryDialog.vue     | 22 +++++--------------
 src/components/ui/CardDescriptor.vue          |  9 ++++++--
 src/composables/useSummaryDialog.js           |  4 ++--
 .../Customer/Card/CustomerDescriptor.vue      |  1 +
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/components/common/VnSummaryDialog.vue b/src/components/common/VnSummaryDialog.vue
index 57473cb3f..37de68de2 100644
--- a/src/components/common/VnSummaryDialog.vue
+++ b/src/components/common/VnSummaryDialog.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
-import { computed } from 'vue';
 
 const $props = defineProps({
     id: {
@@ -11,30 +10,19 @@ const $props = defineProps({
         type: Object,
         required: true,
     },
+    moduleClass: {
+        type: String,
+        default: 'defaultSummary',
+    },
 });
 
 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">
-        <component :is="$props.summary" :id="$props.id" :class="moduleClass" />
+        <component :is="$props.summary" :id="$props.id" :class="$props.moduleClass" />
     </QDialog>
 </template>
 
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f4c0091d2..88c8ae787 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -36,6 +36,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    moduleClass: {
+        type: String,
+        default: 'defaultSummary',
+    },
 });
 
 const state = useState();
@@ -128,9 +132,10 @@ const toModule = computed(() =>
                         </QTooltip>
                     </QBtn></slot
                 >
-
                 <QBtn
-                    @click.stop="viewSummary(entity.id, $props.summary)"
+                    @click.stop="
+                        viewSummary(entity.id, $props.summary, $props.moduleClass)
+                    "
                     round
                     flat
                     dense
diff --git a/src/composables/useSummaryDialog.js b/src/composables/useSummaryDialog.js
index 7d431129b..562a0b5ed 100644
--- a/src/composables/useSummaryDialog.js
+++ b/src/composables/useSummaryDialog.js
@@ -4,10 +4,10 @@ import { useQuasar } from 'quasar';
 export function useSummaryDialog() {
     const quasar = useQuasar();
 
-    function viewSummary(id, summary) {
+    function viewSummary(id, summary, moduleClass) {
         quasar.dialog({
             component: VnSummaryDialog,
-            componentProps: { id, summary },
+            componentProps: { id, summary, moduleClass },
         });
     }
 
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index dc5f08d37..da65dacbc 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -58,6 +58,7 @@ const debtWarning = computed(() => {
         @on-fetch="setData"
         :summary="$props.summary"
         data-key="customer"
+        :module-class="'largeSummary'"
     >
         <template #menu="{ entity }">
             <CustomerDescriptorMenu :customer="entity" />
-- 
2.40.1


From 19e8b948aeb8833420558c7b8e24d269b463f2f8 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 13 Jan 2025 11:04:41 +0100
Subject: [PATCH 3/5] feat: refs #8120 use new prop in the requierd modules

---
 src/pages/Entry/Card/EntryDescriptor.vue           | 1 +
 src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue   | 1 +
 src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue | 1 +
 src/pages/Route/Card/RouteDescriptor.vue           | 1 +
 src/pages/Ticket/Card/TicketDescriptor.vue         | 1 +
 5 files changed, 5 insertions(+)

diff --git a/src/pages/Entry/Card/EntryDescriptor.vue b/src/pages/Entry/Card/EntryDescriptor.vue
index c54ecc3f0..cb05ba8a0 100644
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@@ -61,6 +61,7 @@ const getEntryRedirectionFilter = (entry) => {
         :filter="filter"
         title="supplier.nickname"
         data-key="Entry"
+        :module-class="'largeSummary'"
     >
         <template #menu="{ entity }">
             <EntryDescriptorMenu :id="entity.id" />
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 9ba0df395..06abf976f 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -161,6 +161,7 @@ const createInvoiceInCorrection = async () => {
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
         title="supplierRef"
+        :module-class="'xlargeSummary'"
     >
         <template #menu="{ entity }">
             <InvoiceInDescriptorMenu :invoice="entity" />
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
index 2b60948dd..492ae54c4 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@@ -62,6 +62,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="invoiceOutData"
+        :module-class="'largeSummary'"
     >
         <template #menu="{ entity, menuRef }">
             <InvoiceOutDescriptorMenu :invoice-out-data="entity" :menu-ref="menuRef" />
diff --git a/src/pages/Route/Card/RouteDescriptor.vue b/src/pages/Route/Card/RouteDescriptor.vue
index fa621843e..76d23bdb0 100644
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@@ -76,6 +76,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="routeData"
         @on-fetch="setData"
+        :module-class="'largeSummary'"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 4e77b633f..9b41fa43d 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -112,6 +112,7 @@ function ticketFilter(ticket) {
         :title="data.title"
         :subtitle="data.subtitle"
         data-key="ticketData"
+        :module-class="'largeSummary'"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
-- 
2.40.1


From b52956d27df033043f8bc917099182d463fa75de Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 13 Jan 2025 16:19:24 +0100
Subject: [PATCH 4/5] refactor: refs #8120 use only defineProps

---
 src/components/common/VnSummaryDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/VnSummaryDialog.vue b/src/components/common/VnSummaryDialog.vue
index 37de68de2..bbca1bd98 100644
--- a/src/components/common/VnSummaryDialog.vue
+++ b/src/components/common/VnSummaryDialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
 
-const $props = defineProps({
+defineProps({
     id: {
         type: Number,
         required: true,
@@ -22,7 +22,7 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 <template>
     <QDialog ref="dialogRef" @hide="onDialogHide">
-        <component :is="$props.summary" :id="$props.id" :class="$props.moduleClass" />
+        <component :is="summary" :id="id" :class="moduleClass" />
     </QDialog>
 </template>
 
-- 
2.40.1


From 2c607ef8d9ff9b0f29173692d67ce1e5e5d038c0 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 17 Jan 2025 13:16:04 +0100
Subject: [PATCH 5/5] refactor: refs #8120 change prop and classes' names

---
 src/components/common/VnSummaryDialog.vue          | 12 ++++++------
 src/components/ui/CardDescriptor.vue               |  8 +++-----
 src/composables/useSummaryDialog.js                |  4 ++--
 src/pages/Customer/Card/CustomerDescriptor.vue     |  2 +-
 src/pages/Entry/Card/EntryDescriptor.vue           |  2 +-
 src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue   |  7 +++++--
 src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue |  2 +-
 src/pages/Route/Card/RouteDescriptor.vue           |  2 +-
 src/pages/Ticket/Card/TicketDescriptor.vue         |  6 +++++-
 9 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/common/VnSummaryDialog.vue b/src/components/common/VnSummaryDialog.vue
index bbca1bd98..5da941a27 100644
--- a/src/components/common/VnSummaryDialog.vue
+++ b/src/components/common/VnSummaryDialog.vue
@@ -10,9 +10,9 @@ defineProps({
         type: Object,
         required: true,
     },
-    moduleClass: {
+    width: {
         type: String,
-        default: 'defaultSummary',
+        default: 'md-width',
     },
 });
 
@@ -22,18 +22,18 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 <template>
     <QDialog ref="dialogRef" @hide="onDialogHide">
-        <component :is="summary" :id="id" :class="moduleClass" />
+        <component :is="summary" :id="id" :class="width" />
     </QDialog>
 </template>
 
 <style lang="scss" scoped>
-.defaultSummary {
+.md-width {
     max-width: $width-md;
 }
-.largeSummary {
+.lg-width {
     max-width: $width-lg;
 }
-.xlargeSummary {
+.xlg-width {
     max-width: $width-xl;
 }
 </style>
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 31fd13803..43dc15e9b 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -37,9 +37,9 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    moduleClass: {
+    width: {
         type: String,
-        default: 'defaultSummary',
+        default: 'md-width',
     },
 });
 
@@ -133,9 +133,7 @@ const toModule = computed(() =>
                     </QBtn></slot
                 >
                 <QBtn
-                    @click.stop="
-                        viewSummary(entity.id, $props.summary, $props.moduleClass)
-                    "
+                    @click.stop="viewSummary(entity.id, $props.summary, $props.width)"
                     round
                     flat
                     dense
diff --git a/src/composables/useSummaryDialog.js b/src/composables/useSummaryDialog.js
index 562a0b5ed..f41662bd7 100644
--- a/src/composables/useSummaryDialog.js
+++ b/src/composables/useSummaryDialog.js
@@ -4,10 +4,10 @@ import { useQuasar } from 'quasar';
 export function useSummaryDialog() {
     const quasar = useQuasar();
 
-    function viewSummary(id, summary, moduleClass) {
+    function viewSummary(id, summary, width) {
         quasar.dialog({
             component: VnSummaryDialog,
-            componentProps: { id, summary, moduleClass },
+            componentProps: { id, summary, width },
         });
     }
 
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 25006833d..9abf1a818 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -53,7 +53,7 @@ const debtWarning = computed(() => {
         @on-fetch="setData"
         :summary="$props.summary"
         data-key="customer"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #menu="{ entity }">
             <CustomerDescriptorMenu :customer="entity" />
diff --git a/src/pages/Entry/Card/EntryDescriptor.vue b/src/pages/Entry/Card/EntryDescriptor.vue
index cb05ba8a0..f4bf42f57 100644
--- a/src/pages/Entry/Card/EntryDescriptor.vue
+++ b/src/pages/Entry/Card/EntryDescriptor.vue
@@ -61,7 +61,7 @@ const getEntryRedirectionFilter = (entry) => {
         :filter="filter"
         title="supplier.nickname"
         data-key="Entry"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #menu="{ entity }">
             <EntryDescriptorMenu :id="entity.id" />
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 82dddeff5..ef4835696 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -161,14 +161,17 @@ const createInvoiceInCorrection = async () => {
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
         title="supplierRef"
-        :module-class="'xlargeSummary'"
+        width="xlg-width"
     >
         <template #menu="{ entity }">
             <InvoiceInDescriptorMenu :invoice="entity" />
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoicein.list.issued')" :value="toDate(entity.issued)" />
-            <VnLv :label="t('invoicein.summary.bookedDate')" :value="toDate(entity.booked)" />
+            <VnLv
+                :label="t('invoicein.summary.bookedDate')"
+                :value="toDate(entity.booked)"
+            />
             <VnLv :label="t('invoicein.list.amount')" :value="toCurrency(totalAmount)" />
             <VnLv :label="t('invoicein.list.supplier')">
                 <template #value>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
index 492ae54c4..209f1531e 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@@ -62,7 +62,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="invoiceOutData"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #menu="{ entity, menuRef }">
             <InvoiceOutDescriptorMenu :invoice-out-data="entity" :menu-ref="menuRef" />
diff --git a/src/pages/Route/Card/RouteDescriptor.vue b/src/pages/Route/Card/RouteDescriptor.vue
index 76d23bdb0..14d966362 100644
--- a/src/pages/Route/Card/RouteDescriptor.vue
+++ b/src/pages/Route/Card/RouteDescriptor.vue
@@ -76,7 +76,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="routeData"
         @on-fetch="setData"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 9b41fa43d..1393db3e5 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -102,6 +102,10 @@ const data = ref(useCardDescription());
 function ticketFilter(ticket) {
     return JSON.stringify({ clientFk: ticket.clientFk });
 }
+
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
 </script>
 
 <template>
@@ -111,8 +115,8 @@ function ticketFilter(ticket) {
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
+        @on-fetch="setData"
         data-key="ticketData"
-        :module-class="'largeSummary'"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
-- 
2.40.1