diff --git a/src/components/common/VnSummaryDialog.vue b/src/components/common/VnSummaryDialog.vue index 08fc8870d..5da941a27 100644 --- a/src/components/common/VnSummaryDialog.vue +++ b/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> - <component :is="summary" :id="id" /> + <QDialog ref="dialogRef" @hide="onDialogHide"> + <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> diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue index cf217555a..43dc15e9b 100644 --- a/src/components/ui/CardDescriptor.vue +++ b/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 diff --git a/src/composables/useSummaryDialog.js b/src/composables/useSummaryDialog.js index 7d431129b..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) { + function viewSummary(id, summary, width) { quasar.dialog({ component: VnSummaryDialog, - componentProps: { id, summary }, + componentProps: { id, summary, width }, }); } 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; } diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue index 4a064843a..ce402541d 100644 --- a/src/pages/Customer/Card/CustomerDescriptor.vue +++ b/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" /> diff --git a/src/pages/Entry/Card/EntryDescriptor.vue b/src/pages/Entry/Card/EntryDescriptor.vue index 9a154c357..dafc58394 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" + 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 029a08d25..da7bd4426 100644 --- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue +++ b/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" /> diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue index 2b60948dd..209f1531e 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" + 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 fa621843e..14d966362 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" + 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 9f7684b93..c9849d631 100644 --- a/src/pages/Ticket/Card/TicketDescriptor.vue +++ b/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" diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue index 2c6e34864..2c7976f52 100644 --- a/src/pages/Ticket/Card/TicketSummary.vue +++ b/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 ticket = computed(() => summaryRef.value?.entity); +const summary = ref(); +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>