@colijnit/sharedcomponents 261.1.0 → 261.1.2

package/projects/sharedcomponents/src/lib/components/custom-pdf/custom-pdf-dialog.component.ts

@@ -0,0 +1,299 @@
+import {AfterViewInit, Component, ElementRef, EventEmitter, HostBinding, Input, OnInit, Output, ViewChild, ViewEncapsulation} from '@angular/core';
+import {jsPDF} from 'jspdf';
+import {IconCacheService} from '../../service/icon-cache.service';
+import {DomSanitizer} from '@angular/platform-browser';
+import SignaturePad from 'signature_pad';
+import {toJpeg} from 'html-to-image';
+import {CoDocument} from '@colijnit/mainapi/build/model/co-document.bo';
+import {FileUtils} from '@colijnit/mainapi/build/utils/file-utils';
+
+import {FileType} from '@colijnit/mainapi/build/enum/file-type.enum';
+import {Icon} from '../../enum/icon.enum';
+
+@Component({
+  selector: 'co-custom-pdf-dialog',
+  template: `
+    <co-dialog
+      [footerTemplate]="footerTemplate"
+      id="custom-pdf-dialog"
+      (closeClick)="closePDFDialog.emit()">
+      <!-- create a nice container for loader so it is not random in the corner somewhere -->
+      <div *ngIf="showLoader" class="loader-container">
+        <co-loader *ngIf="showLoader"></co-loader>
+      </div>
+
+      <div #pdfBody id="pdfBody">
+        <div [innerHTML]="fileBody"></div>
+      </div>
+      <ng-template #footerTemplate>
+        <div class="co-dialog-footer-button-wrapper">
+          <co-button class="save-button"
+                     [iconData]="iconCacheService.getIcon(icons.CheckDuotone)"
+                     (click)="handleSaveClicked()"></co-button>
+          <co-button class="close-button"
+                     [iconData]="iconCacheService.getIcon(icons.CrossSkinny)"
+                     (click)="closePDFDialog.emit()"></co-button>
+        </div>
+      </ng-template>
+    </co-dialog>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CustomPdfDialogComponent implements OnInit, AfterViewInit {
+  public readonly icons: typeof Icon = Icon;
+
+  @HostBinding('class.co-custom-pdf-dialog')
+  public showClass() {
+    return true;
+  }
+
+  @ViewChild('pdfBody')
+  public pdfBody: ElementRef;
+
+  @Input()
+  public additionalFileContents: any;
+
+  @Input()
+  public additionalFileName: string = '';
+
+  @Output()
+  public closePDFDialog: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output()
+  public additionalFileChangeEvent: EventEmitter<CoDocument> = new EventEmitter<CoDocument>();
+
+  public canvas: HTMLCanvasElement;
+  public context: CanvasRenderingContext2D;
+  public signaturePads: { [key: string]: SignaturePad } = {};
+  public signatureCanvases: { [key: string]: ElementRef } = {};
+  public fileBody: any = '';
+  public fileStyle: string = '';
+
+  public showLoader: boolean = false;
+
+  // set to true if you want to skip email for debug purposes
+  private enableLocalPreview = false;
+
+  constructor(
+    public iconCacheService: IconCacheService,
+    private _sanitizer: DomSanitizer
+  ) {
+  }
+
+  ngOnInit(): void {
+    this._processAdditionalFileContents();
+  }
+
+  ngAfterViewInit(): void {
+    ['signatureCanvas', 'signatureCanvas2'].forEach(id => {
+      const canvasElement = document.getElementById(id);
+      if (canvasElement) {
+        const canvasRef = new ElementRef(canvasElement);
+        const signaturePad = new SignaturePad(<HTMLCanvasElement>canvasRef.nativeElement);
+        this.signatureCanvases[id] = canvasRef;
+        this.signaturePads[id] = signaturePad;
+
+        setTimeout(() => {
+          this._resizeSignatureCanvas(signaturePad, canvasRef);
+        });
+      }
+    });
+    const clearButton = document.getElementById('clearButton');
+    clearButton?.addEventListener('click', () => this.handleClear());
+
+    // Due to a bug or known issue with html-to-image we need a bit of JS the fill in the checked value when selecting a checkbox.
+    // Handling the checkboxes and radiobuttons
+    const container: HTMLElement = this.pdfBody.nativeElement as HTMLElement;
+    container.addEventListener('change', (event: Event) => {
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'checkbox') {
+        const checkbox: HTMLInputElement = target as HTMLInputElement;
+        if (checkbox.checked) {
+          checkbox.setAttribute('checked', 'true');
+        } else {
+          checkbox.removeAttribute('checked');
+        }
+      } else if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'radio') {
+        const radio: HTMLInputElement = target as HTMLInputElement;
+        const groupName: string = radio.name;
+        const radios: NodeListOf<Element> = container.querySelectorAll(`input[type="radio"][name="${groupName}"]`);
+        radios.forEach((radio) => radio.removeAttribute('checked'));
+        if (radio.checked) {
+          radio.setAttribute('checked', 'true');
+        }
+      }
+    });
+  }
+
+  private _processAdditionalFileContents(): void {
+    if (!this.additionalFileContents) return;
+
+    const styles = this.extractStyleParts(this.additionalFileContents);
+    this.fileStyle = styles.join('\n').trim();
+    if (this.fileStyle) {
+      const head = document.getElementsByTagName('head')[0];
+      const styleEl = document.createElement('style');
+      styleEl.appendChild(document.createTextNode(this.fileStyle));
+      head.appendChild(styleEl);
+    }
+
+    const bodyParts = this.extractBodyContents(this.additionalFileContents);
+    const bodyHtml = (bodyParts[0] ?? this.removeStyleAndScriptTags(this.additionalFileContents)).trim();
+    this.fileBody = this._sanitizer.bypassSecurityTrustHtml(bodyHtml);
+  }
+
+  public extractStyleParts(html: string): string[] {
+    const stylePattern = /<style[^>]*>([\s\S]*?)<\/style>/gi;
+    const matches: string[] = [];
+    let match: RegExpExecArray | null;
+    while ((match = stylePattern.exec(html)) !== null) {
+      matches.push((match[1] ?? '').trim());
+    }
+    return matches;
+  }
+
+  public removeStyleAndScriptTags(html: string): string {
+    const styleTagPattern = /<style[^>]*>[\s\S]*?<\/style>/gi;
+    const scriptTagPattern = /<script[^>]*>[\s\S]*?<\/script>/gi;
+    return (html || '').replace(styleTagPattern, '').replace(scriptTagPattern, '');
+  }
+
+  public extractBodyContents(html: string): string[] {
+    html = this.removeStyleAndScriptTags(html);
+    const bodyPattern = /<body[^>]*>([\s\S]*?)<\/body>/gi;
+    const matches: string[] = [];
+    let match: RegExpExecArray | null;
+    while ((match = bodyPattern.exec(html)) !== null) {
+      matches.push((match[1] ?? '').trim());
+    }
+    return matches;
+  }
+
+  private _isLocalhost(): boolean {
+    return ['localhost', '127.0.0.1', '::1'].includes(location.hostname);
+  }
+
+  public async handleSaveClicked(): Promise<void> {
+    this.showLoader = true;
+
+    const clearButton = document.getElementById('clearButton');
+    if (clearButton) clearButton.hidden = true;
+
+    const doc = new jsPDF({ unit: 'mm', format: 'a4' });
+
+    let createdTemp = false;
+    let root: HTMLElement | null =
+      (this.pdfBody?.nativeElement as HTMLElement) ||
+      (document.querySelector('#pdfBody') as HTMLElement);
+
+    if (!root) {
+      root = document.createElement('div');
+      root.id = 'pdfBody';
+      root.style.position = 'fixed';
+      root.style.left = '-99999px';
+      root.style.top = '0';
+      root.style.width = '794px';
+      root.style.pointerEvents = 'none';
+      document.body.appendChild(root);
+      createdTemp = true;
+    }
+
+    if (this.additionalFileContents && !root.hasChildNodes()) {
+      const html = String(this.additionalFileContents);
+      if (html.includes('<html')) {
+        const parsed = new DOMParser().parseFromString(html, 'text/html');
+        root.innerHTML = parsed.body?.innerHTML || html;
+      } else {
+        root.innerHTML = html;
+      }
+    }
+
+    const allSections = Array.from(root.querySelectorAll('section'));
+    const leafSections = allSections.filter(s => !s.querySelector('section'));
+    const nodesToRender: HTMLElement[] =
+      leafSections.length ? leafSections : (allSections.length ? allSections : [root]);
+
+    const pageWidth = doc.internal.pageSize.getWidth();
+    const pageHeight = doc.internal.pageSize.getHeight();
+
+    for (let i = 0; i < nodesToRender.length; i++) {
+      const el = nodesToRender[i];
+      try {
+        const dataUrl = await toJpeg(el, { quality: 1, backgroundColor: 'white' });
+        await new Promise<void>((resolve) => {
+          const img = new Image();
+          img.onload = () => {
+            const w = img.width;
+            const h = img.height;
+            const scale = Math.min(pageWidth / w, pageHeight / h);
+            const renderW = w * scale;
+            const renderH = h * scale;
+
+            doc.addImage(dataUrl, 'JPG', 0, 0, renderW, renderH);
+            if (i < nodesToRender.length - 1) doc.addPage();
+            resolve();
+          };
+          img.src = dataUrl;
+        });
+      } catch (err) {
+        console.error('Error generating image:', err);
+      }
+    }
+
+    if (createdTemp && root && root.parentNode) {
+      root.parentNode.removeChild(root);
+    }
+
+    // enableLocalPreview can be enabled to see the output without sending email
+    if (this.enableLocalPreview && this._isLocalhost()) {
+      const blob = doc.output('blob');
+      const url = URL.createObjectURL(blob);
+      window.open(url as unknown as string, '_blank');
+      this.showLoader = false;
+      if (clearButton) clearButton.hidden = false;
+      return;
+    }
+
+    try {
+      const tempFile = doc.output('datauristring');
+      const file = this.dataURItoBlob(tempFile);
+      const fileAsCoDocument = await FileUtils.ReadFileAsNewCoDocument(file);
+      fileAsCoDocument.fileType = FileUtils.IsImageFile(file) ? FileType.Image : FileType.Document;
+      fileAsCoDocument.creationDate = new Date();
+      fileAsCoDocument.modifiedDate = new Date();
+      fileAsCoDocument.reports = 1;
+      this.additionalFileChangeEvent.emit(fileAsCoDocument);
+    } catch (e) {
+      console.error('PDF packaging failed:', e);
+    } finally {
+      this.showLoader = false;
+      this.closePDFDialog.emit();
+      if (clearButton) clearButton.hidden = false;
+    }
+  }
+
+  public dataURItoBlob(dataURI): File {
+    const byteString: string = atob(dataURI.split(',')[1]);
+    const ab: ArrayBuffer = new ArrayBuffer(byteString.length);
+    const ia: Uint8Array = new Uint8Array(ab);
+    for (let i: number = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    return new File([ab], this.additionalFileName + '.pdf');
+  }
+
+  public handleClear(): void {
+    Object.values(this.signaturePads).forEach(signaturePad => {
+      signaturePad?.clear();
+    });
+  }
+
+  private _resizeSignatureCanvas(signature: SignaturePad, signatureCanvas: ElementRef): void {
+    const imageBeforeResize: string = signature.toDataURL();
+    const ratio: number = Math.max(window.devicePixelRatio || 1, 1);
+    signatureCanvas.nativeElement.width = signatureCanvas.nativeElement.offsetWidth * ratio;
+    signatureCanvas.nativeElement.height = signatureCanvas.nativeElement.offsetHeight * ratio;
+    signatureCanvas.nativeElement.getContext("2d").scale(ratio, ratio);
+    signature.fromDataURL(imageBeforeResize);
+  }
+}

package/projects/sharedcomponents/src/lib/components/custom-pdf/custom-pdf-dialog.module.ts

@@ -0,0 +1,28 @@
+import {NgModule} from "@angular/core";
+import {ButtonModule, CoDialogModule, IconModule, LoaderModule} from '@colijnit/corecomponents_v12';
+import {CustomPdfDialogComponent} from "./custom-pdf-dialog.component";
+import {CommonModule} from "@angular/common";
+import {SharedComponentsTranslationModule} from "../../translation/shared-components-translation.module";
+
+
+@NgModule({
+  imports: [
+    IconModule,
+    CoDialogModule,
+    CommonModule,
+    ButtonModule,
+    SharedComponentsTranslationModule,
+    LoaderModule
+  ],
+  declarations: [
+    CustomPdfDialogComponent
+  ],
+  exports: [
+    CustomPdfDialogComponent
+  ],
+  providers: [
+  ]
+})
+export class CustomPdfDialogModule {
+
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-base-view.component.ts

@@ -0,0 +1,68 @@
+import {Directive, EventEmitter, Inject, Input, LOCALE_ID, Output} from "@angular/core";
+import {LanguageCode} from "../../../../enum/language-code.enum";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {AgendaEventPerDay} from "../../../../model/agenda-event-per-day.model";
+import {DateUtils} from "../../../../utils/date-utils";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+@Directive()
+export abstract class AgendaBaseViewComponent {
+
+    @Input()
+    public set selectedDate(value: Date) {
+        this._selectedDate = value;
+        this._dateIsSet();
+    }
+
+    @Input()
+    public set eventsPerDay(value: AgendaEventPerDay[]) {
+        this._eventsPerDay = value;
+        this._eventsAreSet();
+    }
+
+    @Output()
+    public eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    public get selectedDate(): Date {
+        return this._selectedDate;
+    }
+
+    public get eventsPerDate(): AgendaEventPerDay[] {
+        return this._eventsPerDay;
+    }
+
+    private _selectedDate: Date;
+    private _eventsPerDay: AgendaEventPerDay[] = [];
+
+    constructor(
+        @Inject(LOCALE_ID) protected readonly locale: LanguageCode,
+        public iconCacheService: IconCacheService
+    ) {
+    }
+
+    //overridable by descendents
+    protected prepareViewData(): void {
+    }
+
+    protected getEventsFromDate(date: Date): AgendaEvent[] {
+        let events: AgendaEvent[] = [];
+        if (this.eventsPerDate) {
+            const len: number = this.eventsPerDate.length;
+            for (let i: number = 0; i < len; i++) {
+                if (DateUtils.DatesEqual(date, this.eventsPerDate[i].date)) {
+                    events = this.eventsPerDate[i].events;
+                    break;
+                }
+            }
+        }
+        return events;
+    }
+
+    private _dateIsSet(): void {
+        this.prepareViewData();
+    }
+
+    private _eventsAreSet(): void {
+        this.prepareViewData();
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-day-view.component.ts

@@ -0,0 +1,35 @@
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {AgendaBaseViewComponent} from "./agenda-base-view.component";
+
+
+@Component({
+    selector: "agenda-day-view",
+    template: `
+        <div class="view-wrapper">
+            <agenda-hour-view-labels [date]="selectedDate"></agenda-hour-view-labels>
+            <agenda-hour-view [date]="selectedDate">
+                <agenda-events
+                        [halfHourHeight]="40"
+                        [events]="events"
+                        (eventChecked)="eventChecked.emit($event)"
+                        [customEventObject]="customEventObject"
+                ></agenda-events>
+            </agenda-hour-view>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaDayViewComponent extends AgendaBaseViewComponent {
+
+    public events: AgendaEvent[] = [];
+
+    @Input()
+    public customEventObject: boolean;
+
+    protected prepareViewData(): void {
+        if (this.eventsPerDate && this.eventsPerDate.length > 0) {
+            this.events = this.eventsPerDate[0].events;
+        }
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-event.component.ts

@@ -0,0 +1,73 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+  ViewEncapsulation
+} from "@angular/core";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+import {NULL_AGENDA_EVENT} from "../../../../model/agenda-null-objects";
+import {Icon} from "../../../../enum/icon.enum";
+import {IconCacheService} from "../../../../service/icon-cache.service";
+
+
+@Component({
+    selector: "agenda-event",
+    template: `
+        <div class="agenda-event-wrapper" [class.checkable]="event.showCheckbox" [class.selected]="event.checked" (click)="checkEvent($event)">
+            <div [textContent]="event.description" class="event-description"></div>
+            <co-icon *ngIf="event.showCheckbox" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" [class.checked]="event.checked"></co-icon>
+
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaEventComponent implements OnInit, OnDestroy {
+
+    public readonly icons: typeof Icon = Icon;
+
+    @Input()
+    public event: AgendaEvent = NULL_AGENDA_EVENT;
+
+    @Input()
+    public customEventObject: boolean;
+
+    @Input()
+    public halfHourHeight: number;
+
+    @Output()
+    public eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    constructor(
+        private _elementRef: ElementRef,
+        private _renderer: Renderer2,
+        public iconCacheService: IconCacheService
+    ) {
+    }
+
+    ngOnDestroy(): void {
+        this._elementRef = undefined;
+    }
+
+    ngOnInit(): void {
+        const hourTo: number = this.event.from.getHours();
+        const minutesTo: number = this.event.from.getMinutes();
+        const multiply: number = hourTo + (minutesTo / 60);
+        const top: number = multiply * (this.halfHourHeight * 2);
+        this._renderer.setStyle(this._elementRef.nativeElement, "top", top + "px");
+
+        const hours: number = Math.abs(this.event.to.getTime() - this.event.from.getTime()) / 3600000;
+        const height: number = hours * (this.halfHourHeight * 2) - 1;
+        this._renderer.setStyle(this._elementRef.nativeElement, "height", height + "px");
+    }
+
+    public checkEvent(event: MouseEvent): void {
+        this.event.checked = !this.event.checked;
+        this.eventChecked.emit(this.event);
+    }
+
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-events.component.ts

@@ -0,0 +1,53 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {CalendarView} from "../../../../enum/calendar-view.enum";
+import {AgendaEvent} from "../../../../model/agenda-event.model";
+
+@Component({
+    selector: "agenda-events",
+    template: `
+        <ng-container *ngIf="view !== viewTypes.WeekSelectView">
+            <agenda-event
+                    *ngFor="let event of events"
+                    [halfHourHeight]="halfHourHeight"
+                    [event]="event"
+                    (eventChecked)="eventChecked.emit($event)"
+                    [customEventObject]="customEventObject"
+            >
+
+            </agenda-event>
+        </ng-container>
+        <ng-container *ngIf="view === viewTypes.WeekSelectView">
+            <agenda-select-event
+                    *ngFor="let event of events"
+                    [event]="event"
+                    (eventChecked)="eventChecked.emit($event)"
+            ></agenda-select-event>
+        </ng-container>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaEventsComponent {
+
+    public readonly viewTypes: typeof CalendarView = CalendarView;
+
+    @Input()
+    public customEventObject: boolean;
+
+    @Input()
+    public view: CalendarView = CalendarView.WeekView;
+
+    @Input()
+    public type: string = "";
+
+    @Input()
+    public events: AgendaEvent[] = [];
+
+    @Input()
+    public halfHourHeight: number;
+
+    @Output()
+    public readonly eventChecked: EventEmitter<AgendaEvent> = new EventEmitter<AgendaEvent>();
+
+    constructor() {
+    }
+}

package/projects/sharedcomponents/src/lib/components/date-planning/component/agenda/agenda-half-hour-cell.component.ts

@@ -0,0 +1,81 @@
+import {Component, ElementRef, Input, OnDestroy, Renderer2, ViewChild, ViewEncapsulation} from "@angular/core";
+import {DateUtils} from "../../../../utils/date-utils";
+
+
+@Component({
+    selector: "agenda-half-hour-cell",
+    template: `
+        <div id="{{id}}" class="cell-wrapper">
+            <div *ngIf="showLabel" [class.show]="showLabel" class="half-hour-label">
+                <div [textContent]="date | date:'HH:mm'"></div>
+            </div>
+            <div *ngIf="showCurrentTime" id="currentTime" class="current-time" #currentTime></div>
+            <div class="content-wrapper">
+                <ng-content></ng-content>
+            </div>
+        </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class AgendaHalfHourCellComponent implements OnDestroy {
+
+    @ViewChild("currentTime")
+    public currentTimeElement: ElementRef;
+
+    @Input()
+    public set date(value: Date) {
+        this._date = value;
+        this._checkDate();
+        this._checkWorkingDayStart();
+    }
+
+    public get date(): Date {
+        return this._date;
+    }
+
+    @Input()
+    public showLabel: boolean = false;
+
+    public showCurrentTime: boolean = false;
+
+    public currentTimeTop: number = 0;
+
+    public id: string;
+
+    private _date: Date;
+    private _id: string;
+
+    constructor(
+        private _renderer: Renderer2
+    ) {
+    }
+
+    ngOnDestroy(): void {
+        this.currentTimeElement = undefined;
+    }
+
+    private _checkDate(): void {
+        const checkDate: Date = new Date();
+        const minutesFrom: number = this.date.getMinutes();
+        const minutesTo: number = minutesFrom + 30;
+
+        if (DateUtils.DatesEqual(this.date, checkDate)) {
+            if (checkDate.getHours() === this.date.getHours() && (checkDate.getMinutes() > minutesFrom && checkDate.getMinutes() < minutesTo)) {
+                this.currentTimeTop = (Math.max(checkDate.getMinutes(), .01) / 60) * 100;
+                this._positionCurrentTime();
+                this.showCurrentTime = true;
+            }
+        }
+    }
+
+    private _checkWorkingDayStart(): void {
+        this.id = (this._date.getHours() === 8 && this._date.getMinutes() === 30) ? "dayStart" : "";
+    }
+
+    private _positionCurrentTime(): void {
+        if (this.currentTimeElement) {
+            this._renderer.setStyle(this.currentTimeElement.nativeElement, "top", this.currentTimeTop + "%");
+            this.currentTimeElement.nativeElement.scrollIntoView();
+        }
+    }
+}