verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 57 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
print/common/css/layout.css
View File

@ -157,6 +157,22 @@ table {
border-spacing: 0; 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 { .row-oriented, .column-oriented {
text-align: left; text-align: left;
width: 100% width: 100%
@ -181,6 +197,10 @@ table {
background-color: #e5e5e5 background-color: #e5e5e5
} }
.column-oriented tbody {
border-bottom: 1px solid #DDD;
}
.column-oriented tfoot { .column-oriented tfoot {
border-top: 2px solid #808080; border-top: 2px solid #808080;
} }
@ -190,7 +210,6 @@ table {
} }
.column-oriented .description { .column-oriented .description {
border-bottom: 1px solid #DDD;
font-size: 0.8em font-size: 0.8em
} }

3
print/common/css/misc.css
View File

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

56
print/templates/reports/campaign-metrics/campaign-metrics.html
View File

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

4
print/templates/reports/claim-pickup-order/claim-pickup-order.html
View File

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

103
print/templates/reports/delivery-note/delivery-note.html
View File

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

8
print/templates/reports/driver-route/driver-route.html
View File

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

66
print/templates/reports/entry-order/entry-order.html
View File

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

6
print/templates/reports/letter-debtor/letter-debtor.html
View File

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

2
print/templates/reports/letter-debtor/locale/es.yml
View File

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