feat(core): Enhanced document generation features and added translation capabilities

ts_web/elements/contentinvoice.ts

@@ -12,14 +12,13 @@ import {
   cssManager,
   unsafeCSS,
   render,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
-
 import * as plugins from '../plugins.js';
-
 import * as shared from './shared/index.js';
 
 
+
 declare global {
   interface HTMLElementTagNameMap {
     'dedocument-contentinvoice': DeContentInvoice;
@@ -277,8 +276,8 @@ export class DeContentInvoice extends DeesElement {
         <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
         <div class="grid topLine dataHeader">
           <div class="lineItem">Item Pos.</div>
-          <div class="lineItem">Description</div>
-          <div class="lineItem">Quantity</div>
+          <div class="lineItem">${shared.translation.translate('DE', 'description', 'Description')}</div>
+          <div class="lineItem">${shared.translation.translate('DE', 'quantity', 'Quantity')}</div>
           <div class="lineItem">Unit Type</div>
           <div class="lineItem">Unit Net Price</div>
           <div class="lineItem">Total Net Price</div>

ts_web/elements/document.ts

@@ -11,8 +11,15 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 
+import * as interfaces from '../../ts/interfaces/index.js';
 import * as plugins from '../plugins.js';
 
+export const defaultDocumentSettings: interfaces.IDocumentSettings = {
+  enableTopDraftText: true,
+  enableDefaultHeader: true,
+  enableDefaultFooter: true,
+};
+
 
 import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';
@@ -68,9 +75,17 @@ export class DeDocument extends DeesElement {
   public letterData: plugins.tsclass.business.ILetter;
 
   @property({
-    type: String,
+    type: Object,
+    reflect: true,
+    converter: (valueArg) => {
+      if (typeof valueArg === 'string') {
+        return plugins.smartjson.parseBase64(valueArg)
+      } else {
+        return valueArg;
+      }
+    },
   })
-  public letterDataUrl: string;
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -112,11 +127,6 @@ export class DeDocument extends DeesElement {
     this.registerGarbageFunction(() => {
       resizeObserver.disconnect();
     })
-    
-    if (this.letterDataUrl) {
-      const response = await fetch(this.letterDataUrl);
-      this.letterData = await response.json();
-    }
   }
 
   public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;

ts_web/elements/page.ts

@@ -8,8 +8,12 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+
+import * as interfaces from '../../ts/interfaces/index.js';
+
+import { defaultDocumentSettings } from './document.js';
 
 import * as shared from './shared/index.js';
 
@@ -23,10 +27,14 @@ declare global {
 export class DePage extends DeesElement {
   public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
 
-  @property()
+  @property({
+    type: Number,
+  })
   viewWidth: number = null;
 
-  @property()
+  @property({
+    type: Number,
+  })
   viewHeight: number = null;
 
   @property({
@@ -55,6 +63,12 @@ export class DePage extends DeesElement {
   })
   printMode = false;
 
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
@@ -109,11 +123,15 @@ export class DePage extends DeesElement {
         <dedocument-pagecontainer .printMode=${this.printMode}>
           ${this.letterData
             ? html`
-                <dedocument-pageheader
-                  .letterData=${this.letterData}
-                  .pageNumber="${this.pageNumber}"
-                  .pageTotalNumber="${this.pageTotalNumber}"
-                ></dedocument-pageheader>
+                ${this.documentSettings.enableDefaultHeader
+                  ? html`
+                      <dedocument-pageheader
+                        .letterData=${this.letterData}
+                        .pageNumber="${this.pageNumber}"
+                        .pageTotalNumber="${this.pageTotalNumber}"
+                      ></dedocument-pageheader>
+                    `
+                  : ``}
                 ${this.pageNumber === 1
                   ? html`
                       <dedocument-letterheader
@@ -129,26 +147,33 @@ export class DePage extends DeesElement {
                   .letterData=${this.letterData}
                   ><slot></slot
                 ></dedocument-pagecontent>
-                <dedocument-pagefooter
-                  .letterData=${this.letterData}
-                  .pageNumber="${this.pageNumber}"
-                  .pageTotalNumber="${this.pageTotalNumber}"
-                ></dedocument-pagefooter>
+                ${this.documentSettings.enableDefaultFooter
+                  ? html`
+                      <dedocument-pagefooter
+                        .letterData=${this.letterData}
+                        .pageNumber="${this.pageNumber}"
+                        .pageTotalNumber="${this.pageTotalNumber}"
+                      ></dedocument-pagefooter>
+                    `
+                  : ``}
                 <div class="versionOverlay">
                   ${this.letterData.versionInfo.type === 'draft'
                     ? html`
-                        <div class="topInfo">
-                          Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br />
-                          -> Revision/Document version: ${this.letterData.versionInfo.version}
-                        </div>
+                        ${this.documentSettings.enableTopDraftText
+                          ? html`
+                              <div class="topInfo">
+                                Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
+                                THIS.<br />
+                                -> Revision/Document version: ${this.letterData.versionInfo.version}
+                              </div>
+                            `
+                          : ``}
                         <div class="bigDraftText">DRAFT</div>
                       `
                     : html``}
                 </div>
               `
-            : html`
-              <slot></slot>
-            `}
+            : html` <slot></slot> `}
         </dedocument-pagecontainer>
       </div>
     `;

ts_web/elements/pageheader.ts

@@ -74,13 +74,17 @@ export class DePageHeader extends DeesElement {
         color: #333;
         font-size: 10px;
       }
-      .topstripe img {
-        filter: invert(1);
+      .topstripe .logo {
         position: absolute;
         bottom: 10px;
         height: 25px;
         left: auto;
         right: ${unsafeCSS(shared.rightMargin + 'px')};
+        font-family: 'Courier New', Courier, monospace;
+      }
+      .topstripe .logo img {
+        position: relative;
+        height: 25px;
       }
     `,
   ];
@@ -88,7 +92,9 @@ export class DePageHeader extends DeesElement {
   public render(): TemplateResult {
     return html`
       <div class="topstripe">
-        <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" />
+        <div class="logo">
+          No logo set!
+        </div>
       </div>
       <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
     `;

ts_web/elements/shared/index.ts

@@ -3,4 +3,7 @@ export const a4Width = 794;
 export const rightMargin = 70;
 export const leftMargin = 90;
 
+import * as translation from './translation.js';
+export { translation };
+
 export * from './demoletter.js';

ts_web/elements/shared/translation.ts

@@ -0,0 +1,31 @@
+import * as interfaces from '../../../ts/interfaces/index.js';
+
+type TTranslationImplementation = {
+  [key in keyof interfaces.IDeDocumentTranslations]: string;
+}
+
+export const EN_translations: TTranslationImplementation = {
+  invoice: 'Invoice',
+  quantity: 'Quantity',
+};
+
+export const DE_translations: TTranslationImplementation = {
+  invoice: 'Rechnung',
+  quantity: 'Anzahl',
+};
+
+export const languageCodeMap = {
+  'DE': DE_translations,
+  'EN': EN_translations,
+};
+
+export type TLanguageCode = keyof typeof languageCodeMap;
+
+export const translate = (languageCode: TLanguageCode, key: string, defaultValue: string) => {
+  const translations = languageCodeMap[languageCode] || EN_translations;
+  if (translations && translations[key]) {
+    return translations[key];
+  } else {
+    return defaultValue;
+  }
+};