From 60fd21c6d3b0abc92b38a2817511fef5671fcb25 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Sun, 8 Dec 2024 17:37:17 +0100 Subject: [PATCH] fix(contentinvoice.ts): Improve invoice item layout and fix alignment issues. --- changelog.md | 8 +++ ts/00_commitinfo_data.ts | 2 +- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/contentinvoice.ts | 107 ++++++++++++++++++++++++------ 4 files changed, 96 insertions(+), 23 deletions(-) diff --git a/changelog.md b/changelog.md index b88c2b0..57f912e 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2024-12-08 - 1.6.9 - fix(contentinvoice.ts) +Improve invoice item layout and fix alignment issues. + +- Fixed missing border on last invoice item. +- Added highlighted style for invoice lines. +- Corrected alignment and display of invoice item details. +- Included VAT percentage display adjustments. + ## 2024-12-07 - 1.6.8 - fix(rendering and logging) Removed debug logging from document rendering process. diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts index 9e0bbea..85f57bf 100644 --- a/ts/00_commitinfo_data.ts +++ b/ts/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-document', - version: '1.6.8', + version: '1.6.9', description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' } diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 9e0bbea..85f57bf 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-document', - version: '1.6.8', + version: '1.6.9', description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' } diff --git a/ts_web/elements/contentinvoice.ts b/ts_web/elements/contentinvoice.ts index 2600a37..2ea8732 100644 --- a/ts_web/elements/contentinvoice.ts +++ b/ts_web/elements/contentinvoice.ts @@ -18,7 +18,6 @@ import * as plugins from '../plugins.js'; import { dedocumentSharedStyle } from '../style.js'; - declare global { interface HTMLElementTagNameMap { 'dedocument-contentinvoice': DeContentInvoice; @@ -219,14 +218,26 @@ export class DeContentInvoice extends DeesElement { border-right: 1px dashed #ccc; } + .lineItem:last-child { + border-right: none; + } + .lineItem.rightAlign { text-align: right; } .invoiceLine { + background: #ffffff00; border-bottom: 1px dotted #ccc; } + .invoiceLine.highlighted { + transition: background 0.2s; + background: #ffc18f; + border: 1px solid #ff9d4d; + box-sizing: content-box; + } + .sums { margin-top: 5px; font-size: 12px; @@ -286,33 +297,77 @@ export class DeContentInvoice extends DeesElement {
We hereby invoice products and services provided to you by Lossless GmbH:
-
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}
-
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}
-
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}
-
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}
-
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}
-
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}
-
${plugins.shared.translation.translate(this.documentSettings.languageCode, 'vatShort', 'VAT')}
+
+ ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'itemPos', + 'Item Pos.' + )} +
+
+ ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'description', + 'Description' + )} +
+
+ ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'quantity', + 'Quantity' + )} +
+
+ ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'unitType', + 'Unit Type' + )} +
+
+ ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'unitNetPrice', + 'Unit Net Price' + )} +
+
+ ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'totalNetPrice', + 'Total Net Price' + )} +
+
+ ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'vatShort', + 'VAT' + )} +
${(() => { let counter = 1; - return this.letterData?.content.invoiceData?.items?.map( - (invoiceItem) => html` -
+ return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => { + const isHighlighted = false; // TODO: implement rest of highlight logic + return html` +
${counter++}
${invoiceItem.name}
${invoiceItem.unitQuantity}
${invoiceItem.unitType}
-
${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
- ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency} + ${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
- ${invoiceItem.vatPercentage}% + ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} + ${this.letterData?.content.invoiceData.currency}
+
${invoiceItem.vatPercentage}%
- ` - ); + `; + }); })()}
@@ -331,9 +386,13 @@ export class DeContentInvoice extends DeesElement {
Vat ${vatGroupArg.vatPercentage}% - ${this.documentSettings.vatGroupPositions ? html` -
(on item positions: ${itemNumbers}) - ` : html``} + ${this.documentSettings.vatGroupPositions + ? html` +
(on item positions: ${itemNumbers}) + ` + : html``}
${vatGroupArg.vatAmountSum} EUR
@@ -348,7 +407,11 @@ export class DeContentInvoice extends DeesElement { ${this.letterData?.content.invoiceData.reverseCharge ? html`
- ${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')} + ${plugins.shared.translation.translate( + this.documentSettings.languageCode, + 'reverseVatNote', + 'VAT arises on a reverse charge basis and is payable by the customer.' + )}
` : ``} @@ -368,7 +431,9 @@ export class DeContentInvoice extends DeesElement {
Referenced contract:
This invoice is adhering to agreements made by contract between the parties on - ${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}. + ${plugins.smarttime.ExtendedDate.fromMillis( + this.letterData?.content.contractData.contractDate + ).format('MMMM D, YYYY')}.
` : html``}