fix(contentinvoice.ts): Improve invoice item layout and fix alignment issues.

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.
 

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.'
 }

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.'
 }

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 {
         </style>
         <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
         <div class="grid topLine dataHeader">
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
-          <div class="lineItem rightAlign">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'vatShort', 'VAT')}</div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'itemPos',
+              'Item Pos.'
+            )}
+          </div>
+          <div class="lineItem">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'description',
+              'Description'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'quantity',
+              'Quantity'
+            )}
+          </div>
+          <div class="lineItem">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'unitType',
+              'Unit Type'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'unitNetPrice',
+              'Unit Net Price'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'totalNetPrice',
+              'Total Net Price'
+            )}
+          </div>
+          <div class="lineItem rightAlign">
+            ${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              'vatShort',
+              'VAT'
+            )}
+          </div>
         </div>
         ${(() => {
           let counter = 1;
-          return this.letterData?.content.invoiceData?.items?.map(
-            (invoiceItem) => html`
-              <div class="grid invoiceLine needsDataHeader">
+          return this.letterData?.content.invoiceData?.items?.map((invoiceItem) => {
+            const isHighlighted = false; // TODO: implement rest of highlight logic
+            return html`
+              <div class="grid invoiceLine needsDataHeader ${isHighlighted ? 'highlighted' : ''}">
                 <div class="lineItem rightAlign">${counter++}</div>
                 <div class="lineItem">${invoiceItem.name}</div>
                 <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
                 <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem rightAlign">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
                 <div class="lineItem rightAlign">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
+                  ${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
                 </div>
                 <div class="lineItem rightAlign">
-                  ${invoiceItem.vatPercentage}%
+                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice}
+                  ${this.letterData?.content.invoiceData.currency}
                 </div>
+                <div class="lineItem rightAlign">${invoiceItem.vatPercentage}%</div>
               </div>
-            `
-          );
+            `;
+          });
         })()}
         <div class="sums">
           <div class="sumline">
@@ -331,9 +386,13 @@ export class DeContentInvoice extends DeesElement {
               <div class="sumline">
                 <div class="label">
                   Vat ${vatGroupArg.vatPercentage}%
-                  ${this.documentSettings.vatGroupPositions ? html`
-                    <br /><span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
-                  ` : html``}
+                  ${this.documentSettings.vatGroupPositions
+                    ? html`
+                        <br /><span style="font-weight: normal"
+                          >(on item positions: ${itemNumbers})</span
+                        >
+                      `
+                    : html``}
                 </div>
                 <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
               </div>
@@ -348,7 +407,11 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                ${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.'
+                )}
               </div>
             `
           : ``}
@@ -368,7 +431,9 @@ export class DeContentInvoice extends DeesElement {
               <div class="infoBox">
                 <div class="label">Referenced contract:</div>
                 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')}.
               </div>
             `
           : html``}