refactor: refs #6942 new summary layout

This commit is contained in:
Jorge Penadés 2024-05-27 17:14:37 +02:00
parent df6e6c66a9
commit 4c3a64bfa6
2 changed files with 23 additions and 22 deletions

View File

@ -1,16 +1,16 @@
<script setup> <script setup>
const $props = defineProps({ defineProps({
url: { type: String, default: null }, url: { type: String, default: null },
text: { type: String, default: null }, text: { type: String, default: null },
icon: { type: String, default: 'open_in_new' }, icon: { type: String, default: 'open_in_new' },
}); });
</script> </script>
<template> <template>
<div class="titleBox"> <div :class="$q.screen.gt.md ? 'q-pb-lg' : 'q-pb-md'">
<div class="header-link"> <div class="header-link">
<a :href="$props.url" :class="$props.url ? 'link' : 'color-vn-text'"> <a :href="url" :class="url ? 'link' : 'color-vn-text'">
{{ $props.text }} {{ text }}
<QIcon v-if="url" :name="$props.icon" /> <QIcon v-if="url" :name="icon" />
</a> </a>
</div> </div>
</div> </div>
@ -19,7 +19,4 @@ const $props = defineProps({
a { a {
font-size: large; font-size: large;
} }
.titleBox {
padding-bottom: 2%;
}
</style> </style>

View File

@ -119,6 +119,7 @@ const intrastatColumns = ref([
}, },
sortable: true, sortable: true,
align: 'left', align: 'left',
style: 'width: 10px',
}, },
{ {
name: 'amount', name: 'amount',
@ -126,6 +127,7 @@ const intrastatColumns = ref([
field: (row) => toCurrency(row.amount, currency.value), field: (row) => toCurrency(row.amount, currency.value),
sortable: true, sortable: true,
align: 'left', align: 'left',
style: 'width: 10px',
}, },
{ {
name: 'net', name: 'net',
@ -317,7 +319,7 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
</QCardSection> </QCardSection>
</QCard> </QCard>
<!--Vat--> <!--Vat-->
<QCard v-if="entity.invoiceInTax.length"> <QCard v-if="entity.invoiceInTax.length" class="vat" auto-width>
<VnTitle :url="getLink('vat')" :text="t('invoiceIn.card.vat')" /> <VnTitle :url="getLink('vat')" :text="t('invoiceIn.card.vat')" />
<QTable <QTable
:columns="vatColumns" :columns="vatColumns"
@ -353,14 +355,9 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
</QTable> </QTable>
</QCard> </QCard>
<!--Due Day--> <!--Due Day-->
<QCard v-if="entity.invoiceInDueDay.length"> <QCard v-if="entity.invoiceInDueDay.length" class="due-day">
<VnTitle :url="getLink('due-day')" :text="t('invoiceIn.card.dueDay')" /> <VnTitle :url="getLink('due-day')" :text="t('invoiceIn.card.dueDay')" />
<QTable <QTable :columns="dueDayColumns" :rows="entity.invoiceInDueDay" flat>
class="full-width"
:columns="dueDayColumns"
:rows="entity.invoiceInDueDay"
flat
>
<template #header="dueDayProps"> <template #header="dueDayProps">
<QTr :props="dueDayProps" class="bg"> <QTr :props="dueDayProps" class="bg">
<QTh <QTh
@ -376,9 +373,9 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
<QTr class="bg"> <QTr class="bg">
<QTd></QTd> <QTd></QTd>
<QTd></QTd> <QTd></QTd>
<QTd>{{ <QTd>
toCurrency(entity.totals.totalDueDay, currency) {{ toCurrency(entity.totals.totalDueDay, currency) }}
}}</QTd> </QTd>
<QTd></QTd> <QTd></QTd>
</QTr> </QTr>
</template> </template>
@ -424,10 +421,17 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
.bg { .bg {
background-color: var(--vn-accent-color); background-color: var(--vn-accent-color);
} }
@media (min-width: $breakpoint-md) {
.summaryBody {
.q-card {
&.vat {
flex: 65%;
}
@media (max-width: $breakpoint-md) { &.due-day {
.cardSummary .summaryBody > .q-card.vn-two { flex: 30%;
flex: 100%; }
}
} }
} }
</style> </style>