@design.estate/dees-document 1.0.101 → 1.1.0

package/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>
     `;

package/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>
     `;

package/ts_web/elements/shared/demoletter.ts

@@ -59,11 +59,13 @@ export const demoLetter: tsclass.business.ILetter = {
       deliveryDate: new Date().getTime(),
       periodOfPerformance: null,
       printResult: null,
-      
+      currency: 'EUR',
+      notes: [],
+      type: 'debitnote',
       items: [
         {
           name: 'Item with 19% VAT',
-          unitQuantity: 1,
+          unitQuantity: 2,
           unitNetPrice: 100,
           unitType: 'hours',
           vatPercentage: 19,
@@ -71,7 +73,7 @@ export const demoLetter: tsclass.business.ILetter = {
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 4,
           unitNetPrice: 100,
           unitType: 'hours',
           vatPercentage: 7,
@@ -79,7 +81,7 @@ export const demoLetter: tsclass.business.ILetter = {
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 3,
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 7,
@@ -95,14 +97,14 @@ export const demoLetter: tsclass.business.ILetter = {
         },
         {
           name: 'Item with 0% VAT',
-          unitQuantity: 1,
+          unitQuantity: 6,
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 0,
           position: 4,
         },{
           name: 'Item with 19% VAT',
-          unitQuantity: 1,
+          unitQuantity: 8,
           unitNetPrice: 100,
           unitType: 'hours',
           vatPercentage: 19,
@@ -110,7 +112,7 @@ export const demoLetter: tsclass.business.ILetter = {
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 9,
           unitNetPrice: 100,
           unitType: 'hours',
           vatPercentage: 7,
@@ -118,7 +120,7 @@ export const demoLetter: tsclass.business.ILetter = {
         },
         {
           name: 'Item with 7% VAT',
-          unitQuantity: 1,
+          unitQuantity: 4,
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 7,
@@ -126,7 +128,7 @@ export const demoLetter: tsclass.business.ILetter = {
         },
         {
           name: 'Item with 21% VAT',
-          unitQuantity: 1,
+          unitQuantity: 3,
           unitNetPrice: 230,
           unitType: 'hours',
           vatPercentage: 21,
@@ -140,6 +142,54 @@ export const demoLetter: tsclass.business.ILetter = {
           vatPercentage: 0,
           position: 10,
         },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
+        {
+          name: 'Item with 0% VAT',
+          unitQuantity: 1,
+          unitNetPrice: 230,
+          unitType: 'hours',
+          vatPercentage: 0,
+          position: 10,
+        },
       ],
     }
   },

package/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';

package/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;
+  }
+};