@elderbyte/ngx-starter 14.12.0-beta6 → 14.12.0

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

@@ -1,150 +0,0 @@
-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

@@ -1,61 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {MatIconModule} from '@angular/material/icon';
-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
-    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

@@ -1,49 +0,0 @@
-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

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

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

@@ -1,63 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<ng-container *ngIf="{state: iframeState$ | async, params: iframeParams$ | async} as ctx">
-
-    <div class="layout-col full">
-
-        <!-- In Case of Error -->
-        <div *ngIf="ctx.state.hasError"
-             class="layout-row place-center-center flex"
-        >
-            <span>Failed to load Iframe: {{ctx.state.message}}</span>
-        </div>
-
-        <!-- IFrame -->
-        <iframe #iframe
-                *ngIf="!ctx.state.hasError"
-                (load)="onIframeLoadEvent($event)"
-                (error)="onIframeErrorEvent($event)"
-                [src]="ctx.params.srcUrl | elderSafeUrl"
-                class="iframe flex"
-                allow="clipboard *;clipboard-read *;clipboard-write *;"
-        ></iframe>
-
-        <!-- Bottom Toolbar -->
-        <div *ngIf="!ctx.params.hideActionBar" class="layout-row place-between-center flex-none 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

@@ -1,172 +0,0 @@
-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

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

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

@@ -1,102 +0,0 @@
-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'
-    });
-  }
-
-
-}