2144 - Prevent page break on data tables
gitea/salix/pipeline/head This commit looks good Details

This commit is contained in:
Joan Sanchez 2020-03-03 13:22:36 +01:00
parent 1d326a52c8
commit b736303610
9 changed files with 143 additions and 126 deletions

View File

@ -157,6 +157,22 @@ table {
border-spacing: 0;
}
/**
* Prevent page break fix
*/
tbody {
page-break-inside: avoid;
break-inside: avoid;
display: block;
width: 100%
}
thead, tbody tr {
table-layout: fixed;
display: table;
width: 100%;
}
.row-oriented, .column-oriented {
text-align: left;
width: 100%
@ -181,6 +197,10 @@ table {
background-color: #e5e5e5
}
.column-oriented tbody {
border-bottom: 1px solid #DDD;
}
.column-oriented tfoot {
border-top: 2px solid #808080;
}
@ -190,7 +210,6 @@ table {
}
.column-oriented .description {
border-bottom: 1px solid #DDD;
font-size: 0.8em
}

View File

@ -42,6 +42,7 @@
font-weight: bold
}
.non-page-break {
.no-page-break {
page-break-inside: avoid;
break-inside: avoid
}

View File

@ -59,37 +59,35 @@
<tr>
<th>{{$t('Code')}}</th>
<th class="number">{{$t('Quantity')}}</th>
<th>{{$t('Concept')}}</th>
<th width="50%">{{$t('Concept')}}</th>
</tr>
</thead>
<tbody>
<template v-for="sale in sales">
<tr class="font bold">
<td>{{sale.itemFk}}</td>
<td class="number">{{Math.trunc(sale.subtotal)}}</td>
<td>{{sale.concept}}</td>
</tr>
<tr class="description">
<td class="centered">
<div v-if="sale.value5">
<strong class="font gray">{{sale.tag5}}</strong>
<span>{{sale.value5}}</span>
</div>
</td>
<td class="centered">
<div v-if="sale.value6">
<strong class="font gray">{{sale.tag6}}</strong>
<span>{{sale.value6}}</span>
</div>
</td>
<td class="centered">
<div v-if="sale.value7">
<strong class="font gray">{{sale.tag7}}</strong>
<span>{{sale.value7}}</span>
</div>
</td>
</tr>
</template>
<tbody v-for="sale in sales">
<tr class="font bold">
<td>{{sale.itemFk}}</td>
<td class="number">{{Math.trunc(sale.subtotal)}}</td>
<td width="50%">{{sale.concept}}</td>
</tr>
<tr class="description">
<td>
<div v-if="sale.value5">
<strong class="font gray">{{sale.tag5}}</strong>
<span>{{sale.value5}}</span>
</div>
</td>
<td class="centered">
<div v-if="sale.value6">
<strong class="font gray">{{sale.tag6}}</strong>
<span>{{sale.value6}}</span>
</div>
</td>
<td class="align-right">
<div v-if="sale.value7">
<strong class="font gray">{{sale.tag7}}</strong>
<span>{{sale.value7}}</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>

View File

@ -64,8 +64,8 @@
<th>{{$t('concept')}}</th>
</tr>
</thead>
<tbody>
<tr v-for="sale in sales" v-bind:key="sale.id">
<tbody v-for="sale in sales" v-bind:key="sale.id">
<tr>
<td class="font gray">{{sale.id}}</td>
<td class="number">{{sale.quantity}}</td>
<td class="number">{{sale.claimQuantity}}</td>

View File

@ -76,53 +76,48 @@
<tr>
<td>{{$t('reference')}}</td>
<td class="number">{{$t('quantity')}}</td>
<td>{{$t('concept')}}</td>
<td width="50%">{{$t('concept')}}</td>
<td class="number">{{$t('price')}}</td>
<td class="centered">{{$t('discount')}}</td>
<td class="centered">{{$t('vat')}}</td>
<td class="number">{{$t('amount')}}</td>
</tr>
</thead>
<tbody>
<template v-for="sale in sales">
<tr class="font bold">
<td>{{sale.itemFk}}</td>
<td class="number">{{sale.quantity}}</td>
<td>{{sale.concept}}</td>
<td class="number">{{sale.price | currency('EUR', locale)}}</td>
<td class="centered">{{sale.discount | percentage}}</td>
<td class="centered">{{sale.vatType}}</td>
<td class="number">{{sale.price * sale.quantity * (1 - sale.discount / 100) | currency('EUR', locale)}}</td>
</tr>
<tr class="description">
<td colspan="2" class="centered">
<div v-if="sale.value5">
<strong class="font gray">{{sale.tag5}}</strong>
<span>{{sale.value5}}</span>
</div>
</td>
<td colspan="3" class="centered">
<div v-if="sale.value6">
<strong class="font gray">{{sale.tag6}}</strong>
<span>{{sale.value6}}</span>
</div>
</td>
<td colspan="2" class="centered">
<div v-if="sale.value7">
<strong class="font gray">{{sale.tag7}}</strong>
<span>{{sale.value7}}</span>
</div>
</td>
</tr>
<tr class="description phytosanitary" v-if="sale.passportNumber">
<td colspan="7">
{{sale.ediBotanic}} {{sale.denomination}} {{sale.countryCode}}-{{sale.passportNumber}}
<span v-if="sale.isProtectedZone">ZP</span>
</td>
</tr>
</template>
<tr >
<td colspan="7"></td>
<tbody v-for="sale in sales">
<tr class="font bold">
<td>{{sale.itemFk}}</td>
<td class="number">{{sale.quantity}}</td>
<td width="50%">{{sale.concept}}</td>
<td class="number">{{sale.price | currency('EUR', locale)}}</td>
<td class="centered">{{(sale.discount / 100) | percentage}}</td>
<td class="centered">{{sale.vatType}}</td>
<td class="number">{{sale.price * sale.quantity * (1 - sale.discount / 100) | currency('EUR', locale)}}</td>
</tr>
<tr class="description">
<td colspan="2" class="centered">
<div v-if="sale.value5">
<strong class="font gray">{{sale.tag5}}</strong>
<span>{{sale.value5}}</span>
</div>
</td>
<td colspan="3" class="centered">
<div v-if="sale.value6">
<strong class="font gray">{{sale.tag6}}</strong>
<span>{{sale.value6}}</span>
</div>
</td>
<td colspan="2" class="centered">
<div v-if="sale.value7">
<strong class="font gray">{{sale.tag7}}</strong>
<span>{{sale.value7}}</span>
</div>
</td>
</tr>
<tr class="description phytosanitary" v-if="sale.passportNumber">
<td colspan="7">
{{sale.ediBotanic}} {{sale.denomination}} {{sale.countryCode}}-{{sale.passportNumber}}
<span v-if="sale.isProtectedZone">ZP</span>
</td>
</tr>
</tbody>
<tfoot>
@ -138,7 +133,7 @@
<div class="columns">
<!-- Services block-->
<div class="size100" v-if="services.length > 0">
<div class="size100 no-page-break" v-if="services.length > 0">
<h3>{{$t('services')}}</h3>
<table class="column-oriented">
<thead>
@ -168,29 +163,35 @@
<!-- End of services block -->
<!-- Taxes block -->
<div id="taxes" class="size50 pull-right" v-if="taxes">
<div id="taxes" class="size50 pull-right no-page-break" v-if="taxes">
<h3>{{$t('taxBreakdown')}}</h3>
<table class="column-oriented">
<thead>
<tr>
<td>{{$t('type')}}</td>
<td class="number">{{$t('taxBase')}}</td>
<td width="45%">{{$t('type')}}</td>
<td width="20%" class="number">
{{$t('taxBase')}}
</td>
<td>{{$t('tax')}}</td>
<td class="number">{{$t('fee')}}</td>
</tr>
</thead>
<tbody>
<tr v-for="tax in taxes">
<td>{{tax.name}}</td>
<td class="number">{{tax.Base | currency('EUR', locale)}}</td>
<td width="45%">{{tax.name}}</td>
<td width="20%" class="number">
{{tax.Base | currency('EUR', locale)}}
</td>
<td>{{tax.vatPercent | percentage}}</td>
<td class="number">{{tax.tax | currency('EUR', locale)}}</td>
</tr>
</tbody>
<tfoot>
<tr class="font bold">
<td>{{$t('subtotal')}}</td>
<td class="number">{{getTotalBase() | currency('EUR', locale)}}</td>
<td width="45%">{{$t('subtotal')}}</td>
<td width="20%" class="number">
{{getTotalBase() | currency('EUR', locale)}}
</td>
<td></td>
<td class="number">{{getTotalTax()| currency('EUR', locale)}}</td>
</tr>
@ -204,7 +205,7 @@
<!-- End of taxes block -->
<!-- Packages block -->
<div id="packagings" class="size100" v-if="packagings.length > 0">
<div id="packagings" class="size100 no-page-break" v-if="packagings.length > 0">
<h3>{{$t('packagings')}}</h3>
<table class="column-oriented">
<thead>
@ -226,7 +227,7 @@
<!-- End of packages block -->
<!-- Signature block -->
<div class="size50 pull-left">
<div class="size50 pull-left no-page-break">
<div id="signature" class="panel" v-if="signature && signature.id">
<div class="header">{{$t('digitalSignature')}}</div>
<div class="body centered">

View File

@ -84,14 +84,14 @@
</div>
</div>
</div>
<div class="non-page-break" v-for="ticket in tickets">
<div class="no-page-break" v-for="ticket in tickets">
<div>
<table class="column-oriented repeatable">
<thead>
<tr>
<td class="number">{{$t('order')}}</td>
<td class="number">{{$t('ticket')}}</td>
<td>{{$t('client')}}</td>
<td width="50%">{{$t('client')}}</td>
<td class="number">{{$t('address')}}</td>
<td class="number">{{$t('packages')}}</td>
</tr>
@ -100,7 +100,7 @@
<tr>
<td class="number">{{ticket.priority}}</td>
<td class="number">{{ticket.id}}</td>
<td>{{ticket.clientFk}} {{ticket.addressName}}</td>
<td width="50%">{{ticket.clientFk}} {{ticket.addressName}}</td>
<td v-if="ticket.addressFk" class="number">
{{ticket.addressFk.toString().substr(0, ticket.addressFk.toString().length - 3)}}
<span class="black-container">
@ -141,7 +141,7 @@
</tr>
<tr>
<th class="font gray align-right">{{$t('import')}}</th>
<td>{{ticket.import}}</td>
<td>{{ticket.import | currency('EUR', locale)}}</td>
</tr>
</tbody>
</table>

View File

@ -63,45 +63,43 @@
<table class="column-oriented">
<thead>
<tr>
<td class="number">{{$t('boxes')}}</td>
<td>{{$t('boxes')}}</td>
<td class="number">{{$t('packing')}}</td>
<td>{{$t('concept')}}</td>
<td width="50%">{{$t('concept')}}</td>
<td class="number">{{$t('quantity')}}</td>
<td class="number">{{$t('price')}}</td>
<td class="number">{{$t('amount')}}</td>
</tr>
</thead>
<tbody>
<template v-for="buy in buys">
<tr class="font bold">
<td class="number">{{buy.box}}</td>
<td class="number">{{buy.packing}}</td>
<td>{{buy.itemName}}</td>
<td class="number">{{buy.quantity}}</td>
<td class="number">{{buy.buyingValue | currency('EUR', locale)}}</td>
<td class="number">{{buy.buyingValue * buy.quantity | currency('EUR', locale)}}</td>
</tr>
<tr class="description">
<td colspan="2" class="centered">
<div v-if="buy.value5">
<strong class="font gray">{{buy.tag5}}</strong>
<span>{{buy.value5}}</span>
</div>
</td>
<td colspan="2" class="centered">
<div v-if="buy.value6">
<strong class="font gray">{{buy.tag6}}</strong>
<span>{{buy.value6}}</span>
</div>
</td>
<td colspan="2" class="centered">
<div v-if="buy.value7">
<strong class="font gray">{{buy.tag7}}</strong>
<span>{{buy.value7}}</span>
</div>
</td>
</tr>
</template>
<tbody v-for="buy in buys">
<tr class="font bold">
<td class="number">{{buy.box}}</td>
<td class="number">{{buy.packing}}</td>
<td width="50%">{{buy.itemName}}</td>
<td class="number">{{buy.quantity}}</td>
<td class="number">{{buy.buyingValue | currency('EUR', locale)}}</td>
<td class="number">{{buy.buyingValue * buy.quantity | currency('EUR', locale)}}</td>
</tr>
<tr class="description">
<td colspan="2">
<div v-if="buy.value5">
<strong class="font gray">{{buy.tag5}}</strong>
<span>{{buy.value5}}</span>
</div>
</td>
<td colspan="2" class="centered">
<div v-if="buy.value6">
<strong class="font gray">{{buy.tag6}}</strong>
<span>{{buy.value6}}</span>
</div>
</td>
<td colspan="2" class="align-right">
<div v-if="buy.value7">
<strong class="font gray">{{buy.tag7}}</strong>
<span>{{buy.value7}}</span>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
@ -115,7 +113,7 @@
<!-- End of buy block -->
<div class="columns">
<div class="size50">
<div id="notes" class="panel" v-if="entry.notes">
<div id="notes" class="panel no-page-break" v-if="entry.notes">
<div class="body">
<h3>{{$t('notes')}}</h3>
<div>

View File

@ -25,7 +25,7 @@
<th>{{client.id}}</th>
</tr>
<tr>
<td class="font gray uppercase">{{$t('dated')}}</td>
<td class="font gray uppercase">{{$t('date')}}</td>
<th>{{dated}}</th>
</tr>
</tbody>
@ -61,8 +61,8 @@
<th class="number">{{$t('balance')}}</th>
</tr>
</thead>
<tbody>
<tr v-for="sale in sales" :key="sale.id">
<tbody v-for="sale in sales" :key="sale.id">
<tr>
<td>{{sale.issued | date('%d-%m-%Y')}}</td>
<td>{{sale.ref}}</td>
<td class="number">{{sale.debtOut}}</td>

View File

@ -2,7 +2,7 @@ title: Extracto
claimId: Reclamación
clientId: Cliente
clientData: Datos del cliente
dated: Fecha
date: Fecha
concept: Concepto
invoiced: Facturado
payed: Pagado