@colijnit/corecomponents_v12 12.2.23 → 12.2.25

package/projects/corecomponents/src/lib/components/core-dialog/core-dialog.service.ts

@@ -0,0 +1,61 @@
+import {ApplicationRef, ComponentFactoryResolver, Injectable, Injector} from '@angular/core';
+import {CoreDynamicComponentService} from './core-dynamic-component.service';
+import {DialogResponseInterface} from '../../interfaces/dialog-response.interface';
+import {AppPopupType} from '../../model/enum/app-popup-type.enum';
+import {ConfirmationDialogComponent} from './confirmation-dialog/confirmation-dialog.component';
+
+@Injectable({
+  providedIn: "root"
+})
+export class CoreDialogService {
+
+  private _componentRefs: any[] = [];
+
+  constructor(
+    private _compFactoryResolver: ComponentFactoryResolver,
+    private appRef: ApplicationRef,
+    private injector: Injector,
+    private dynamicComponentService: CoreDynamicComponentService
+  ) {
+  }
+
+  public async showYesNo(title: string, text: string, showRememberChoice: boolean = false): Promise<DialogResponseInterface> {
+    const data: {} = {
+      title: title,
+      text: text,
+      type: AppPopupType.Confirmation,
+      showRememberCheckbox: showRememberChoice
+    };
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+
+  public showError(message: string, details?: string): Promise<any> {
+    const data: any = {
+      title: 'ERROR',
+      text: message,
+      type: AppPopupType.Error
+    };
+    if (details) {
+      data.details = details;
+    }
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+
+  public showInformation(message: string): Promise<any> {
+    const data: {} = {
+      title: 'INFORMATION',
+      text: message,
+      type: AppPopupType.Information
+    };
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+
+  public showWarning(message: string): Promise<any> {
+    const data: {} = {
+      title: 'WARNING',
+      text: message,
+      type: AppPopupType.Warning
+    };
+    return this.dynamicComponentService.createComponent(ConfirmationDialogComponent, data);
+  }
+}

package/projects/corecomponents/src/lib/components/core-dialog/core-dynamic-component.service.ts

@@ -0,0 +1,101 @@
+import {ApplicationRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injectable, Injector, StaticProvider} from "@angular/core";
+import {DialogResponseInterface} from '../../interfaces/dialog-response.interface';
+
+@Injectable({
+  providedIn: "root"
+})
+export class CoreDynamicComponentService {
+
+  private _componentRefs: any[] = [];
+
+  constructor(
+    private _compFactoryResolver: ComponentFactoryResolver,
+    private appRef: ApplicationRef,
+    private injector: Injector
+  ) { }
+
+  public getComponentRefs(): ComponentRef<any>[] {
+    return this._componentRefs;
+  }
+
+  public createAndReturnComponentRef(componentClass: any, inputs?: any): Promise<any> {
+    return new Promise((resolve: Function) => {
+      const componentRef: any = this._compFactoryResolver
+        .resolveComponentFactory(componentClass)
+        .create(this.injector);
+
+      if (inputs) {
+        for (let property in inputs) {
+          if (inputs.hasOwnProperty(property)) {
+            componentRef.instance[property] = inputs[property];
+          }
+        }
+      }
+
+      this.appRef.attachView(componentRef.hostView);
+
+      const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
+        .rootNodes[0] as HTMLElement;
+
+      document.body.appendChild(domElem);
+      componentRef.onDestroy(() => {
+        this.appRef.detachView(componentRef.hostView);
+      });
+      resolve(componentRef);
+    })
+  }
+
+  public createComponent(componentClass: any, inputs?: any, outputs?: any, providers?: StaticProvider[]): Promise<DialogResponseInterface> {
+    return new Promise((resolve: Function) => {
+      if (providers) {
+        Injector.create(providers, this.injector);
+      }
+      const componentRef: any = this._compFactoryResolver
+        .resolveComponentFactory(componentClass)
+        .create(this.injector);
+      this._componentRefs.push(componentRef);
+
+      if (inputs) {
+        for (let property in inputs) {
+          if (inputs.hasOwnProperty(property)) {
+            componentRef.instance[property] = inputs[property];
+          }
+        }
+      }
+
+      if (outputs) {
+        for (let event in outputs) {
+          if (outputs.hasOwnProperty(event)) {
+            componentRef.instance[event].subscribe(() => outputs[event]());
+          }
+        }
+      }
+
+      this.appRef.attachView(componentRef.hostView);
+
+      const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
+        .rootNodes[0] as HTMLElement;
+
+      document.body.appendChild(domElem);
+      componentRef.onDestroy(() => {
+        this.appRef.detachView(componentRef.hostView);
+      });
+
+      componentRef.instance.onClose = (button: any, output?: any, rememberChoice?: boolean) => {
+        const idx: number = this._componentRefs.indexOf(componentRef);
+        this.appRef.detachView(componentRef.hostView);
+        this._componentRefs[idx] = undefined;
+        this._componentRefs.splice(idx, 1);
+
+        if (outputs) {
+          for (let event in outputs) {
+            if (outputs.hasOwnProperty(event)) {
+              componentRef.instance[event].unsubscribe();
+            }
+          }
+        }
+        resolve({button: button, output: output ? output : undefined, rememberChoice: rememberChoice});
+      }
+    })
+  }
+}

package/projects/corecomponents/src/lib/components/double-calendar/double-calendar.component.ts

@@ -0,0 +1,102 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from "@angular/core";
+import {BaseInputDatePickerDirective} from "../base-input-date-picker/base-input-date-picker.directive";
+
+@Component({
+  selector: "co-double-calendar",
+  template: `
+    <div class="dual-calendar-wrapper" [overlay]="parentForOverlay" (clickOutside)="clickedOutside.next()">
+      <calendar-template
+        [selectedDate]="selectedFirstDate"
+        [secondSelectedDate]="selectedSecondDate"
+        [secondHoveringDate]="secondHoveringDate"
+        [highlightDaysBetweenDates]="true"
+        (dateSelected)="handleFirstDateSelected($event)"
+      ></calendar-template>
+      <calendar-template
+        [selectedDate]="selectedSecondDate"
+        [secondSelectedDate]="selectedFirstDate"
+        [highlightDaysBetweenDates]="true"
+        (hoveringDate)="handleSecondHoveringDate($event)"
+        (dateSelected)="handleSecondDateSelected($event)"
+      ></calendar-template>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class DoubleCalendarComponent extends BaseInputDatePickerDirective implements OnInit {
+
+  @Input()
+  public selectedDates: Date[] = [undefined, undefined];
+
+  @Input()
+  public parentForOverlay: ElementRef;
+
+  @Output()
+  public datesSelected: EventEmitter<Date[]> = new EventEmitter<Date[]>();
+
+  @Output()
+  public secondDateSelected: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output()
+  public clickedOutside: EventEmitter<void> = new EventEmitter<void>();
+
+  public selectedFirstDate: Date;
+  public selectedSecondDate: Date;
+  public secondHoveringDate: Date;
+
+  @HostBinding("class.co-double-calendar")
+  public showClass() {
+    return true;
+  }
+
+  public ngOnInit(): void {
+    this.selectedFirstDate = this.selectedDates[0];
+    this.selectedSecondDate = this.selectedDates[1];
+  }
+
+  public handleFirstDateSelected(date: Date): void {
+    this.selectedFirstDate = date;
+    this.selectedDates[0] = date;
+
+    if (this.selectedSecondDate && this.selectedFirstDate.getTime() > this.selectedSecondDate.getTime()) {
+      this.selectedSecondDate = null;
+    }
+
+    this.outputRangeIfValid();
+  }
+
+  public handleSecondDateSelected(date: Date): void {
+    this.selectedSecondDate = date;
+    this.selectedDates[1] = date;
+
+    if (this.selectedFirstDate && this.selectedSecondDate.getTime() < this.selectedFirstDate.getTime()) {
+      this.selectedFirstDate = null;
+      this.selectedSecondDate = null;
+      this.secondHoveringDate = null;
+    }
+
+    if (this.selectedSecondDate && this.selectedDates[0] instanceof Date) {
+      this.outputRangeIfValid();
+      this.secondDateSelected.next();
+    }
+  }
+
+  public outputRangeIfValid(): void {
+    if (this.selectedDates[0] instanceof Date && this.selectedDates[1] instanceof Date) {
+      this.datesSelected.next(this.selectedDates);
+    }
+  }
+
+  public handleSecondHoveringDate(day: Date): void {
+    this.secondHoveringDate = day;
+  }
+}

package/projects/corecomponents/src/lib/components/double-calendar/double-calendar.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {DoubleCalendarComponent} from "./double-calendar.component";
+import {CalendarModule} from "../calendar/calendar.module";
+import {OverlayModule} from "../../directives/overlay/overlay.module";
+import {ClickoutsideModule} from "../../directives/clickoutside/clickoutside.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CalendarModule,
+    OverlayModule,
+    ClickoutsideModule
+  ],
+  declarations: [
+    DoubleCalendarComponent
+  ],
+  exports: [
+    DoubleCalendarComponent
+  ]
+})
+export class DoubleCalendarModule {
+}

package/projects/corecomponents/src/lib/components/filter-item/filter-item-viewmodel.ts

@@ -0,0 +1,20 @@
+import {NumberUtils} from "../../core/utils/number-utils";
+
+export class FilterItemViewmodel {
+
+  public checked: boolean = false;
+  public code: string | number;
+  public description: string;
+  public count?: number;
+  public valueName?: string;
+
+  codeAsNumber?(): number { return NumberUtils.ParseInt(this.code);}
+
+  constructor(code: string | number, description: string | number, checked: boolean, count?: number, valueName?: string) {
+    this.code = code;
+    this.description = description?.toString();
+    this.checked = checked;
+    this.count = count;
+    this.valueName = valueName;
+  }
+}