Merge pull request '#8120: Compact summaryPopup' (!1200) from 8120-CompactSummaryPopup into dev

Reviewed-on: #1200
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/common/VnSummaryDialog.vue

@@ -10,6 +10,10 @@ defineProps({
         type: Object,
         required: true,
     },
+    width: {
+        type: String,
+        default: 'md-width',
+    },
 });
 
 defineEmits([...useDialogPluginComponent.emits]);
@@ -17,7 +21,19 @@ defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <component :is="summary" :id="id" />
+        <component :is="summary" :id="id" :class="width" />
     </QDialog>
 </template>
+
+<style lang="scss" scoped>
+.md-width {
+    max-width: $width-md;
+}
+.lg-width {
+    max-width: $width-lg;
+}
+.xlg-width {
+    max-width: $width-xl;
+}
+</style>

src/components/ui/CardDescriptor.vue

@@ -37,6 +37,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    width: {
+        type: String,
+        default: 'md-width',
+    },
 });
 
 const state = useState();
@@ -128,9 +132,8 @@ const toModule = computed(() =>
                         </QTooltip>
                     </QBtn></slot
                 >
-
                 <QBtn
-                    @click.stop="viewSummary(entity.id, $props.summary)"
+                    @click.stop="viewSummary(entity.id, $props.summary, $props.width)"
                     round
                     flat
                     dense

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, width) {
         quasar.dialog({
             component: VnSummaryDialog,
-            componentProps: { id, summary },
+            componentProps: { id, summary, width },
         });
     }
 

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;
 }

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -53,6 +53,7 @@ const debtWarning = computed(() => {
         @on-fetch="setData"
         :summary="$props.summary"
         data-key="customer"
+        width="lg-width"
     >
         <template #menu="{ entity }">
             <CustomerDescriptorMenu :customer="entity" />

src/pages/Entry/Card/EntryDescriptor.vue

@@ -61,6 +61,7 @@ const getEntryRedirectionFilter = (entry) => {
         :filter="filter"
         title="supplier.nickname"
         data-key="Entry"
+        width="lg-width"
     >
         <template #menu="{ entity }">
             <EntryDescriptorMenu :id="entity.id" />

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -117,6 +117,7 @@ async function setInvoiceCorrection(id) {
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
         title="supplierRef"
+        width="xlg-width"
     >
         <template #menu="{ entity }">
             <InvoiceInDescriptorMenu :invoice="entity" />

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"
+        width="lg-width"
     >
         <template #menu="{ entity, menuRef }">
             <InvoiceOutDescriptorMenu :invoice-out-data="entity" :menu-ref="menuRef" />

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"
+        width="lg-width"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -16,6 +16,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -102,6 +106,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,7 +119,10 @@ function ticketFilter(ticket) {
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
+        @on-fetch="setData"
+        :summary="$props.summary"
         data-key="ticketData"
+        width="lg-width"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />
@@ -157,7 +168,7 @@ function ticketFilter(ticket) {
             <VnLv :label="t('globals.alias')" :value="entity.nickname" />
         </template>
         <template #icons="{ entity }">
-            <QCardActions class="q-gutter-x-xs">
+            <QCardActions class="q-gutter-x-md">
                 <QIcon
                     v-if="entity.client.isActive == false"
                     name="vn:disabled"
@@ -201,7 +212,7 @@ function ticketFilter(ticket) {
             </QCardActions>
         </template>
         <template #actions="{ entity }">
-            <QCardActions>
+            <QCardActions class="flex justify-center" style="padding-inline: 0">
                 <QBtn
                     size="md"
                     icon="vn:client"

src/pages/Ticket/Card/TicketSummary.vue

@@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
-import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -29,15 +28,14 @@ const { t } = useI18n();
 const $props = defineProps({
     id: {
         type: Number,
-        required: false,
         default: null,
     },
 });
 
 const entityId = computed(() => $props.id || route.params.id);
 
-const summaryRef = ref();
+const summary = ref();
-const ticket = computed(() => summaryRef.value?.entity);
+const ticket = computed(() => summary.value?.entity);
 const editableStates = ref([]);
 const ticketUrl = ref();
 const grafanaUrl = 'https://grafana.verdnatura.es';
@@ -76,26 +74,27 @@ async function changeState(value) {
     };
     await axios.post(`Tickets/state`, formData);
     notify('globals.dataSaved', 'positive');
-    summaryRef.value?.fetch();
+    summary.value?.fetch();
     descriptorData.fetch({});
 }
 
 function toTicketUrl(section) {
     return '#/ticket/' + entityId.value + '/' + section;
 }
+
+onMounted(async () => {
+    const filter = { fields: ['code', 'name', 'id', 'alertLevel'] };
+    const params = { filter: JSON.stringify(filter) };
+    editableStates.value = (await axios.get('States/editableStates', { params }))?.data;
+});
 </script>
 
 <template>
-    <FetchData
-        url="States/editableStates"
-        :filter="{ fields: ['code', 'name', 'id', 'alertLevel'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (editableStates = data)"
-    />
     <CardSummary
-        ref="summaryRef"
+        ref="summary"
         :url="`Tickets/${entityId}/summary`"
         data-key="TicketSummary"
+        v-bind="$attrs.width"
     >
         <template #header-left>
             <VnToSummary
@@ -207,7 +206,7 @@ function toTicketUrl(section) {
                 </VnLv>
                 <VnLv :label="t('globals.weight')" :value="dashIfEmpty(entity.weight)" />
             </QCard>
-            <QCard class="vn-one" style="flex: 2 1">
+            <QCard class="vn-one">
                 <VnTitle
                     :url="toTicketUrl('basic-data')"
                     :text="t('globals.summary.basicData')"
@@ -454,7 +453,7 @@ function toTicketUrl(section) {
                                     toCurrency(
                                         props.row.quantity *
                                             props.row.price *
-                                            ((100 - props.row.discount) / 100)
+                                            ((100 - props.row.discount) / 100),
                                     )
                                 }}
                             </QTd>