dees-document/ts_web/elements/letterheader.ts

import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  unsafeCSS,
  domtools,
} from "@design.estate/dees-element";

import * as plugins from "../plugins.js";
import { dedocumentSharedStyle } from "../style.js";

declare global {
  interface HTMLElementTagNameMap {
    "dedocument-letterheader": DeLetterHeader;
  }
}

@customElement("dedocument-letterheader")
export class DeLetterHeader extends DeesElement {
  public static demo = () => html`
    <dedocument-letterheader
      .format="${"a4"}"
      .letterData=${plugins.shared.demoLetter}
    ></dedocument-letterheader>
  `;

  @property({
    type: Object,
    reflect: true,
  })
  public letterData: plugins.tsclass.finance.TInvoice;

  @property({
    type: Number,
    reflect: true,
  })
  public pageNumber: number = 1;

  @property({
    type: Number,
    reflect: true,
  })
  public pageTotalNumber: number = 1;

  @property({
    type: Object,
    reflect: true,
  })
  public documentSettings: plugins.shared.interfaces.IDocumentSettings;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    dedocumentSharedStyle,
    css`
      .address {
        position: absolute;
        top: calc(var(--DPI-FACTOR) * 4.5);
        left: var(--LEFT-MARGIN);
      }

      .date {
        position: absolute;
        top: calc(var(--DPI-FACTOR) * 4.5);
        right: var(--RIGHT-MARGIN);
        text-align: right;
      }

      .recepientInfo {
        position: absolute;
        display: block;
        overflow: hidden;
        top: calc(var(--DPI-FACTOR) * 5.5);
        right: var(--RIGHT-MARGIN);
        width: 200px;
        text-align: right;
      }

      .recepientInfo .label {
        margin-top: 10px;
        margin-bottom: 3px;
        font-size: 10px;
        font-weight: bold;
      }

      .address .from {
        font-size: 10px;
      }

      .address .to {
        margin-top: 10px;
      }
    `,
  ];

  private renderDeliveryDate(from: Date, to: Date): TemplateResult {
    if (this.letterData.type !== "invoice") return null;
    const dateFormat = new Intl.DateTimeFormat(
      this.documentSettings.languageCode,
      { dateStyle: this.documentSettings.dateStyle }
    );

    let formattedFrom = from ? dateFormat.format(from) : null;
    let formattedTo = to ? dateFormat.format(to) : null;

    const isSameDay = formattedFrom === formattedTo;

    if (isSameDay) {
      return html`<div class="label">
          ${plugins.shared.translation.translate(
            this.documentSettings.languageCode,
            "letterhead@@periodOfPerformance.day"
          )}
        </div>
        <span> ${formattedFrom} </span>`;
    } else {
      return html`<div class="label">
          ${plugins.shared.translation.translate(
            this.documentSettings.languageCode,
            "letterhead@@periodOfPerformance.range"
          )}
        </div>
        <span> ${formattedFrom} - ${formattedTo}</span>`;
    }
  }

  public render(): TemplateResult {
    return html`
      <div class="date">
        ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
          dateStyle: "long",
        }).format(new Date(this.letterData.date))}
      </div>
      <div class="address">
        <div class="from">
          ${this.letterData.from.name},
          ${this.letterData.from.address.streetName}
          ${this.letterData.from.address.houseNumber},
          ${this.letterData.from.address.postalCode}
          ${this.letterData.from.address.city},
          ${this.letterData.from.address.country}
        </div>
        <div class="to">
          ${this.letterData.to.name}<br />
          ${this.letterData.to.address.streetName}
          ${this.letterData.to.address.houseNumber}<br />
          ${this.letterData.to.address.postalCode}
          ${this.letterData.to.address.city}<br />
          ${this.letterData.from.address.country}
        </div>
      </div>
      <div class="recepientInfo">
        <div class="label">
          ${plugins.shared.translation.translate(
            this.documentSettings.languageCode,
            "letterhead@@customer.number"
          )}
        </div>
        ${this.letterData.to.customerNumber || "not registered"}

        <div class="label">
          ${plugins.shared.translation.translate(
            this.documentSettings.languageCode,
            "letterhead@@vat.yourId"
          )}
        </div>
        ${this.letterData.to.registrationDetails.vatId || "not provided"}

        <!-- TODO: Make use of components -->
        ${this.letterData.type === "invoice"
          ? html` <div class="label">
                ${plugins.shared.translation.translate(
                  this.documentSettings.languageCode,
                  "letterhead@@invoice.number"
                )}
              </div>
              ${this.letterData.id || "not registered"}`
          : null}
        ${this.renderDeliveryDate(
          new Date(this.letterData.periodOfPerformance?.from),
          new Date(this.letterData.periodOfPerformance?.to)
        )}
      </div>
    `;
  }
}