@elderbyte/ngx-starter 14.10.0 → 14.11.1

package/src/lib/components/iframes/data-view/data-view-iframe-adapter.directive.ts

@@ -0,0 +1,150 @@
+import {
+  Directive,
+  HostListener,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {SelectionModel} from '../../../common/selection/selection-model';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+import {DataViewMessage, DataViewSelection, DataViewSelectionInit} from '../typed-event-message';
+import {IframeService} from '../iframe.service';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderDataViewOptionsProvider} from '../../data-view/base/elder-data-view-options-provider';
+
+export function createSelectionModel(): SelectionModel<any> {
+  return new SelectionModel<any>();
+}
+
+export function createDataOptionsProvider(): ElderDataViewOptionsProvider {
+  return new ElderDataViewOptionsProvider();
+}
+
+/**
+ * An adapter bridging communication between
+ * a data view displayed in an iframe and its parent.
+ *
+ * For example propagates selection model changes
+ * to the iframe parent.
+ */
+@Directive({
+  selector: '[elderDataViewIframeAdapter]',
+  providers: [
+    {
+      provide: SelectionModel,
+      useFactory: createSelectionModel
+    },
+    {
+      provide: ElderDataViewOptionsProvider,
+      useFactory: createDataOptionsProvider
+    }
+  ]
+})
+export class DataViewIframeAdapterDirective implements OnInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly _destroy$ = new Subject<void>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly iframeService: IframeService,
+    private readonly selectionModel: SelectionModel<any>,
+    private readonly dataViewOptionsProvider: ElderDataViewOptionsProvider
+  ) {
+    selectionModel.selection.pipe(
+      takeUntil(this._destroy$)
+    ).subscribe(
+      selection => this.propagateSelectionToParent(selection)
+    )
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Listeners                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Listens for messages from parent window.
+   * Makes it possible to react upon messages from iframe parent.
+   *
+   * @param event message from parent window
+   */
+  @HostListener('window:message', ['$event'])
+  public onWindowsMessage(event: MessageEvent): boolean {
+    this.log.debug('Received message event from parent:', event);
+    if (event) {
+      if (DataViewMessage.isOfType(event.data)) {
+        this.log.debug('Received data view message from parent:', event);
+        this.handleMessageFromParent(event.data);
+      }
+    }
+    return true;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+  }
+
+  public ngOnDestroy(): void {
+    this._destroy$.next();
+    this._destroy$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private handleMessageFromParent(message: DataViewMessage<any, any>): void {
+    switch (message.type) {
+      case 'SELECTION_INIT':
+        this.initializeDataView(message.data)
+        break;
+    }
+  }
+
+  private initializeDataView(init: DataViewSelectionInit<any>): void {
+
+    // updating options of child data view given by iframe parent
+    this.dataViewOptionsProvider.updateOptions(
+      options => options.withOptions(init.options)
+    )
+
+    this.selectionModel.keyGetterFn = (entity) => entity[init.idField];
+    this.selectionModel.isMultipleSelection = init.options.selectionMultiEnabled;
+    if (init.initialSelection) {
+      this.selectionModel.replaceSelection(init.initialSelection);
+    }
+  }
+
+  private propagateSelectionToParent(selection: any[]): void {
+    this.log.debug('Propagating selection to iframe parent:', selection);
+
+    const message = this.buildSelectionMessage(selection);
+    this.iframeService.postDataMessage(message);
+  }
+
+  private buildSelectionMessage(selection: any[]): DataViewMessage<any> {
+    return DataViewMessage.selection(new DataViewSelection(selection));
+  }
+
+}

package/src/lib/components/iframes/elder-iframe.module.ts

@@ -0,0 +1,63 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatIconModule} from '@angular/material/icon';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {TranslateModule} from '@ngx-translate/core';
+import {IframeHostComponent} from './iframe-host/iframe-host.component';
+import {IframeDialogComponent} from './iframe-dialog/iframe-dialog.component';
+import {IframeSideContentComponent} from './iframe-side-content/iframe-side-content.component';
+import {MatButtonModule} from '@angular/material/button';
+import {ElderPipesModule} from '../../pipes/elder-pipes.module';
+import {IframeCloseDirective} from './iframe-close.directive';
+import { DataViewIframeComponent } from './data-view/data-view-iframe/data-view-iframe.component';
+import {DataViewIframeAdapterDirective} from './data-view/data-view-iframe-adapter.directive';
+
+export * from './iframe.service';
+export * from './iframe-close.directive';
+export * from './iframe-host/iframe-host.component';
+export * from './iframe-side-content/iframe-side-content.component';
+export * from './iframe-dialog/iframe-dialog.component';
+export * from './typed-event-message';
+export * from './data-view/data-view-iframe/data-view-iframe.component'
+export * from './data-view/data-view-iframe-adapter.directive'
+
+@NgModule({
+  imports: [
+
+    // Angular
+    CommonModule,
+    RouterModule,
+    FormsModule,
+
+    // Third Party
+    FlexLayoutModule,
+    TranslateModule,
+
+    // Angular Material
+    MatIconModule,
+    MatButtonModule,
+
+    // ElderByte
+    ElderPipesModule
+  ],
+  declarations: [
+    IframeHostComponent,
+    IframeDialogComponent,
+    IframeSideContentComponent,
+    IframeCloseDirective,
+    DataViewIframeComponent,
+    DataViewIframeAdapterDirective
+  ],
+  exports: [
+    IframeHostComponent,
+    IframeDialogComponent,
+    IframeSideContentComponent,
+    IframeCloseDirective,
+    DataViewIframeComponent,
+    DataViewIframeAdapterDirective
+  ]
+})
+export class ElderIFrameModule {
+}

package/src/lib/components/iframes/iframe-close.directive.ts

@@ -0,0 +1,49 @@
+import {Directive, HostListener, Input} from '@angular/core';
+import {IframeService} from './iframe.service';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+@Directive({
+    selector: '[elderIframeClose]',
+    exportAs: 'elderIframeClose',
+})
+export class IframeCloseDirective {
+
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+
+    private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+    /**
+     * Iframe close input.
+     */
+    @Input('elderIframeClose')
+    public iframeResult: any;
+
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+
+    constructor(
+        private iframeService: IframeService
+    ) { }
+
+    @HostListener(
+        'click',
+        ['$event']
+    ) onClick(event: any) {
+        this.logger.debug('Iframe result:', this.iframeResult);
+        this.iframeService.postCloseMessage<any>(this.iframeResult);
+    }
+
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+
+}

package/src/lib/components/iframes/iframe-dialog/iframe-dialog.component.html

@@ -0,0 +1,11 @@
+<div *ngIf="iframeParams$ | async as iFrameParams" fxFill>
+
+    <elder-i-frame-host fxFlex
+                        [iframeParams]="iFrameParams"
+                        (close)="close($event)">
+    </elder-i-frame-host>
+
+</div>
+
+
+

package/src/lib/components/iframes/iframe-dialog/iframe-dialog.component.ts

@@ -0,0 +1,63 @@
+import {ChangeDetectionStrategy, Component, Inject, OnInit} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject} from 'rxjs';
+import {MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef} from '@angular/material/dialog';
+import {IFrameParams} from '../iframe-host/iframe-host.component';
+
+@Component({
+  selector: 'elder-i-frame-dialog',
+  templateUrl: './iframe-dialog.component.html',
+  styleUrls: ['./iframe-dialog.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IframeDialogComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  public readonly iframeParams$ = new BehaviorSubject<IFrameParams>(null);
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    public dialogRef: MatDialogRef<IframeDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: IFrameParams
+  ) {
+    this.iframeParams$.next(data);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Lifecycle                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public close(data?: any): void {
+    this.dialogRef.close(data);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+
+}

package/src/lib/components/iframes/iframe-host/iframe-host.component.html

@@ -0,0 +1,43 @@
+<ng-container *ngIf="{state: iframeState$ | async, params: iframeParams$ | async} as ctx">
+
+    <div fxLayout="column" fxFill>
+
+        <!-- In Case of Error -->
+        <div *ngIf="ctx.state.hasError"
+             fxLayout="row"
+             fxLayoutAlign="center center"
+             fxFlex
+        >
+            <span>Failed to load Iframe: {{ctx.state.message}}</span>
+        </div>
+
+        <!-- IFrame -->
+        <iframe fxFlex #iframe
+                *ngIf="!ctx.state.hasError"
+                (load)="onIframeLoadEvent($event)"
+                (error)="onIframeErrorEvent($event)"
+                [src]="ctx.params.srcUrl | elderSafeUrl"
+                class="iframe"
+                allow="clipboard *;clipboard-read *;clipboard-write *;"
+        ></iframe>
+
+        <!-- Bottom Toolbar -->
+        <div *ngIf="!ctx.params.hideActionBar" fxLayout="row" fxLayoutAlign="space-between center" fxFlex="none" class="toolbar">
+
+            <a mat-icon-button (click)="doClose($event)" class="dense-button">
+                <mat-icon class="small-icon">close</mat-icon>
+            </a>
+
+            <a mat-icon-button class="dense-button"
+               [href]="ctx.params.srcUrl | elderSafeUrl" target="_blank">
+                <mat-icon class="small-icon">open_in_new</mat-icon>
+            </a>
+
+        </div>
+
+  </div>
+
+</ng-container>
+
+
+

package/src/lib/components/iframes/iframe-host/iframe-host.component.ts

@@ -0,0 +1,172 @@
+import {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject} from 'rxjs';
+import {TypedEventMessage} from '../typed-event-message';
+
+export type IFrameStateType = 'LOADING' | 'LOADED' | 'ERROR';
+
+export class IFrameState {
+
+  constructor(
+    public readonly type: IFrameStateType,
+    public readonly message: string | null = null
+  ) {
+  }
+
+  public get isLoading(): boolean {
+    return this.type === 'LOADING'
+  }
+
+  public get hasLoaded(): boolean {
+    return this.type == 'LOADED'
+  }
+
+  public get hasError(): boolean {
+    return this.type === 'ERROR';
+  }
+
+}
+
+export interface IFrameParams {
+
+  /**
+   * Source URL of iframe.
+   */
+  readonly srcUrl: string;
+
+  /**
+   * Width of the iframe.
+   */
+  readonly width?: string;
+
+  /**
+   * Height of the iframe.
+   */
+  readonly height?: string;
+
+  /**
+   * If true, the bottom action bar
+   * is hidden.
+   */
+  readonly hideActionBar?: boolean;
+
+}
+
+
+@Component({
+  selector: 'elder-i-frame-host',
+  templateUrl: './iframe-host.component.html',
+  styleUrls: ['./iframe-host.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IframeHostComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  public readonly iframeParams$ = new BehaviorSubject<IFrameParams>(null);
+  public readonly iframeState$ = new BehaviorSubject<IFrameState>(new IFrameState('LOADING'));
+
+  @ViewChild('iframe')
+  public iframe: ElementRef;
+
+  @Output()
+  public message = new EventEmitter<TypedEventMessage<any, any>>();
+
+  @Output()
+  public close = new EventEmitter<any>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {}
+
+  /***************************************************************************
+   *                                                                         *
+   * Listeners                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Listens for messages from window.
+   * Makes it possible to react upon messages from iframe child window.
+   *
+   * @param event message from child window
+   */
+  @HostListener('window:message', ['$event'])
+  public onWindowMessage(event: MessageEvent): boolean {
+    this.log.debug('Received message from child:', event);
+    if (event) {
+      if (TypedEventMessage.isOfType(event.data))
+      this.handleMessageFromChild(event.data);
+    }
+    return true;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Lifecycle                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set iframeParams(params: IFrameParams) {
+    this.iframeParams$.next(params);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onIframeLoadEvent(event: Event): void {
+    this.log.debug('Finished loading iframe', event);
+    this.iframeState$.next(new IFrameState('LOADED'));
+  }
+
+  public onIframeErrorEvent(err: any): void {
+    this.log.warn('Failed to load iframe', err);
+    this.iframeState$.next(new IFrameState('ERROR', err + ''));
+  }
+
+  public sendMessageToChild(msg: TypedEventMessage<any,any>): void {
+    this.log.debug('Sending message to iframe child:', msg);
+    this.iframe.nativeElement.contentWindow.postMessage(msg, "*");
+  }
+
+  public doClose(event?: Event): void {
+    this.close.emit();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private handleMessageFromChild(message: TypedEventMessage<any, any>): void {
+    this.message.next(message);
+
+    if (message.type === 'CLOSE') {
+      this.close.emit(message.data);
+    }
+  }
+
+}

package/src/lib/components/iframes/iframe-side-content/iframe-side-content.component.html

@@ -0,0 +1,14 @@
+
+<div *ngIf="iframeParams$ | async as iFrameParams"
+     [style.width]="iFrameParams.width" fxFill
+>
+
+    <elder-i-frame-host fxFlex
+                        [iframeParams]="iFrameParams"
+                        (close)="close($event)">
+    </elder-i-frame-host>
+
+</div>
+
+
+

package/src/lib/components/iframes/iframe-side-content/iframe-side-content.component.ts

@@ -0,0 +1,102 @@
+import {ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Params, Router} from '@angular/router';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {IFrameParams} from '../iframe-host/iframe-host.component';
+import {takeUntil} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderShellService} from '../../shell/elder-shell.service';
+
+@Component({
+  selector: 'elder-i-frame-side-host',
+  templateUrl: './iframe-side-content.component.html',
+  styleUrls: ['./iframe-side-content.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IframeSideContentComponent implements OnInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private static readonly QUERY_PARAM_SRC_URL = 'srcUrl';
+  private static readonly QUERY_PARAM_WIDTH = 'width';
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly iframeParams$ = new BehaviorSubject<IFrameParams>(null);
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private shellService: ElderShellService
+  ) {
+    this.route.queryParams.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(params => {
+      this.iframeParams$.next(
+        {
+          srcUrl: params[IframeSideContentComponent.QUERY_PARAM_SRC_URL],
+          width: params['width'] || '1000px'
+        }
+      );
+    });
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Lifecycle                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void { }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public close(data?: any): void {
+    this.shellService.closeSideContent().then(
+        () => this.removeQueryParams(
+            [
+              IframeSideContentComponent.QUERY_PARAM_SRC_URL,
+              IframeSideContentComponent.QUERY_PARAM_WIDTH
+            ]
+        )
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private removeQueryParams(paramNames: string[]): void {
+    const params: Params = {};
+    paramNames.forEach(paramName => params[paramName] = null);
+
+    this.router.navigate([], {
+      queryParams: params,
+      queryParamsHandling: 'merge'
+    });
+  }
+
+
+}