mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 04:40:32 +00:00
feat: rendering pdf templates on the server-side
This commit is contained in:
Ahmed Bouhuolia
@@ -1,77 +1,190 @@
|
||||
extends ../PaperTemplateLayout.pug
|
||||
|
||||
block head
|
||||
style
|
||||
if (isRtl)
|
||||
include ../../css/modules/receipt-rtl.css
|
||||
else
|
||||
include ../../css/modules/receipt.css
|
||||
- var prefix = 'bc'
|
||||
style.
|
||||
.#{prefix}-root {
|
||||
color: #111;
|
||||
padding: 24px 30px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
box-shadow: inset 0 4px 0px 0 var(--invoice-primary-color);
|
||||
}
|
||||
.#{prefix}-logo-wrap {
|
||||
font-size: 60px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-big-title {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.#{prefix}-terms-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-terms-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
.#{prefix}-terms-item__label {
|
||||
min-width: 120px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-terms-item__value {}
|
||||
.#{prefix}-address-section {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-address {}
|
||||
.#{prefix}-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: inherit;
|
||||
}
|
||||
.#{prefix}-table__header {
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid #000;
|
||||
padding: 2px 10px;
|
||||
color: #333;
|
||||
}
|
||||
.#{prefix}-table__header:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__header:last-of-type{
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__header--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-table__cell {
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
.#{prefix}-table__cell:first-of-type{
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{prefix}-table__cell:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
.#{prefix}-table__cell--right {
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-totals {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: auto;
|
||||
width: 300px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.#{prefix}-totals__line {
|
||||
display: flex;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.#{prefix}-totals__line--gray-border {}
|
||||
.#{prefix}-totals__line--dark-border {}
|
||||
.#{prefix}-totals__line__label {
|
||||
min-width: 160px;
|
||||
}
|
||||
.#{prefix}-totals__line__amount {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
}
|
||||
.#{prefix}-statement {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.#{prefix}-statement__label {}
|
||||
.#{prefix}-statement__value {}
|
||||
|
||||
block content
|
||||
div.receipt
|
||||
div.receipt__header
|
||||
div.paper
|
||||
h1.title #{__("receipt.paper.receipt")}
|
||||
span.receiptNumber #{saleReceipt.receiptNumber}
|
||||
//- block head
|
||||
div(class=`${prefix}-root`, style=`--invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor};`)
|
||||
|
||||
//- Title and company logo
|
||||
h1(class=`${prefix}-big-title`) Receipt
|
||||
|
||||
div.organization
|
||||
h3.title #{organizationName}
|
||||
if showCompanyLogo
|
||||
div(class=`${prefix}-logo-wrap`)
|
||||
img(src=companyLogo alt=`Company Logo`)
|
||||
|
||||
div.receipt__receipt-amount
|
||||
div.label #{__('receipt.paper.receipt_amount')}
|
||||
div.amount #{saleReceipt.formattedAmount}
|
||||
//- Terms List
|
||||
div(class=`${prefix}-terms-list`)
|
||||
if showReceiptNumber
|
||||
div(class=`${prefix}-terms-item`)
|
||||
span(class=`${prefix}-terms-item__label`)= receiptNumberLabel
|
||||
span(class=`${prefix}-terms-item__value`)= receiptNumber
|
||||
if showReceiptDate
|
||||
div(class=`${prefix}-terms-item`)
|
||||
span(class=`${prefix}-terms-item__label`)= receiptDateLabel
|
||||
span(class=`${prefix}-terms-item__value`)= receiptDate
|
||||
|
||||
div.receipt__meta
|
||||
div.receipt__meta-item.receipt__meta-item--billed-to
|
||||
span.label #{__("receipt.paper.billed_to")}
|
||||
span.value #{saleReceipt.customer.displayName}
|
||||
//- Address Section
|
||||
div(class=`${prefix}-address-section`)
|
||||
if showBilledFromAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong= companyName
|
||||
each addressLine in billedFromAddress
|
||||
div= addressLine
|
||||
|
||||
div.receipt__meta-item.receipt__meta-item--invoice-date
|
||||
span.label #{__("receipt.paper.receipt_date")}
|
||||
span.value #{saleReceipt.formattedReceiptDate}
|
||||
if showBilledToAddress
|
||||
div(class=`${prefix}-address`)
|
||||
strong= billedToLabel
|
||||
each addressLine in billedToAddress
|
||||
div= addressLine
|
||||
|
||||
if saleReceipt.receiptNumber
|
||||
div.receipt__meta-item.receipt__meta-item--invoice-number
|
||||
span.label #{__("receipt.paper.receipt_number")}
|
||||
span.value #{saleReceipt.receiptNumber}
|
||||
//- Table Section
|
||||
table(class=`${prefix}-table`)
|
||||
thead(class=`${prefix}-table__header`)
|
||||
tr
|
||||
th(class=`${prefix}-table__header`) Item
|
||||
th(class=`${prefix}-table__header`) Description
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Rate
|
||||
th(class=`${prefix}-table__header ${prefix}-table__header--right`) Total
|
||||
tbody
|
||||
each line in lines
|
||||
tr(class=`${prefix}-table__row`)
|
||||
td(class=`${prefix}-table__column`)= line.item
|
||||
td(class=`${prefix}-table__column`)= line.description
|
||||
td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.rate
|
||||
td(class=`${prefix}-table__column ${prefix}-table__column--right`)= line.total
|
||||
|
||||
div.receipt__table
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th.item #{__("item_entry.paper.item_name")}
|
||||
th.rate #{__("item_entry.paper.rate")}
|
||||
th.quantity #{__("item_entry.paper.quantity")}
|
||||
th.total #{__("item_entry.paper.total")}
|
||||
tbody
|
||||
each entry in saleReceipt.entries
|
||||
tr
|
||||
td.item=entry.item.name
|
||||
td.rate=entry.rate
|
||||
td.quantity=entry.quantity
|
||||
td.total=entry.amount
|
||||
|
||||
div.receipt__table-after
|
||||
div.receipt__table-total
|
||||
table
|
||||
tbody
|
||||
tr.total
|
||||
td #{__('receipt.paper.total')}
|
||||
td #{saleReceipt.formattedAmount}
|
||||
tr.payment-amount
|
||||
td #{__('receipt.paper.payment_amount')}
|
||||
td #{saleReceipt.formattedAmount}
|
||||
tr.blanace-due
|
||||
td #{__('receipt.paper.balance_due')}
|
||||
td #{'$0'}
|
||||
//- Totals Section
|
||||
div(class=`${prefix}-totals`)
|
||||
if showSubtotal
|
||||
div(class=`${prefix}-totals__line #{prefix}-totals__line--gray-border`)
|
||||
span(class=`${prefix}-totals__line__label`)= subtotalLabel
|
||||
span(class=`${prefix}-totals__line__amount`)= subtotal
|
||||
if showTotal
|
||||
div(class=`${prefix}-totals__line #{prefix}-totals__line--dark-border`)
|
||||
span(class=`${prefix}-totals__line__label`)= totalLabel
|
||||
span(class=`${prefix}-totals__line__amount`)= total
|
||||
|
||||
div.receipt__footer
|
||||
if saleReceipt.statement
|
||||
div.receipt__conditions
|
||||
h3 #{__("receipt.paper.statement")}
|
||||
p #{saleReceipt.statement}
|
||||
//- Customer Note Section
|
||||
if showCustomerNote
|
||||
div(class=`${prefix}-statement`)
|
||||
span(class=`${prefix}-statement__label`)= customerNoteLabel
|
||||
p(class=`${prefix}-statement__value`)= customerNote
|
||||
|
||||
if saleReceipt.receiptMessage
|
||||
div.receipt__notes
|
||||
h3 #{__("receipt.paper.notes")}
|
||||
p #{saleReceipt.receiptMessage}
|
||||
//- Terms & Conditions Section
|
||||
if showTermsConditions
|
||||
div(class=`${prefix}-statement`)
|
||||
span(class=`${prefix}-statement__label`)= termsConditionsLabel
|
||||
p(class=`${prefix}-statement__value`)= termsConditions
|
||||
|
||||
Reference in New Issue
Block a user