@elderbyte/ngx-starter 14.10.0 → 14.11.1

package/src/lib/components/dialogs/elder-dialog.service.ts

@@ -0,0 +1,198 @@
+import {ElderConfirmDialogComponent, ConfirmDialogConfig} from './confirm-dialog/elder-confirm-dialog.component';
+import { MatDialogRef, MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import { Injectable } from '@angular/core';
+import {ElderQuestionDialogComponent, QuestionDialogConfig} from './question-dialog/elder-question-dialog.component';
+import {TranslateService} from '@ngx-translate/core';
+import {Observable, of} from 'rxjs';
+import {filter, map, switchMap} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderDialogService {
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly defaultDialogConfig: MatDialogConfig = {
+    role: 'dialog',
+    disableClose: false,
+    autoFocus: true,
+    restoreFocus: true,
+    closeOnNavigation: false
+  };
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private dialog: MatDialog,
+    private translateService: TranslateService
+  ) { }
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * @deprecated Use showConfirm({...}) instead
+   *
+   * @param title
+   * @param message
+   * @param config
+   */
+  public confirm(title: string, message: string, config?: MatDialogConfig): Observable<boolean> {
+    return this.showConfirm({
+      title: title,
+      message: message,
+      config: config || this.defaultDialogConfig
+    });
+  }
+
+
+  /**
+   * Creates a modal confirmation dialog.
+   *
+   * @param config object for conform dialog
+   */
+  public showConfirm(config: ConfirmDialogConfig): Observable<boolean> {
+
+    if (!config) { throw new Error('Argument must not be null: config'); }
+
+
+    const rawMessages = new Map<string, string>();
+    rawMessages.set('title', config.title);
+    rawMessages.set('message', config.message);
+
+
+    return this.resolveTranslatedMap(rawMessages, config.interpolateParams).pipe(
+      switchMap(messages => {
+
+        const title = messages.get('title');
+        const message = messages.get('message');
+
+        let dialogRef: MatDialogRef<ElderConfirmDialogComponent>;
+
+        dialogRef = this.dialog.open(ElderConfirmDialogComponent, config.config);
+        dialogRef.componentInstance.title = title;
+        dialogRef.componentInstance.message = message;
+        dialogRef.componentInstance.yesNo = config.yesNo;
+
+        return dialogRef.afterClosed();
+      })
+    );
+  }
+
+  /**
+   * @deprecated Use showQuestion({...}) instead
+   *
+   * Creates a modal question dialog.
+   *
+   * @param title
+   * @param question
+   * @param config
+   */
+  public question(title: string, question: string, config?: MatDialogConfig): Observable<string> {
+    return this.showQuestion({
+      title: title,
+      question: question,
+      config: config || this.defaultDialogConfig
+    });
+  }
+
+
+  /**
+   * Creates a modal question dialog.
+   *
+   * @param config
+   */
+  public showQuestion(config: QuestionDialogConfig): Observable<string> {
+
+    if (!config) { throw new Error('Argument must not be null: config'); }
+
+    const rawMessages = new Map<string, string>();
+    rawMessages.set('title', config.title);
+    rawMessages.set('question', config.question);
+
+    return this.resolveTranslatedMap(rawMessages, config.interpolateParams).pipe(
+      switchMap(messages => {
+
+        const title = messages.get('title');
+        const question = messages.get('question');
+
+        const dlgConf = config.config || new MatDialogConfig();
+        dlgConf.data = {
+          title: title,
+          question: question
+        };
+
+        const dialogRef = this.dialog.open(ElderQuestionDialogComponent, dlgConf);
+
+        return dialogRef.afterClosed()
+          .pipe(filter(response => !!response));
+
+      })
+    );
+  }
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private resolveTranslatedMap(messages: Map<string, string>, interpolateParams?: object): Observable<Map<string, string>> {
+
+    const rawMessages = Array.from(messages.values());
+
+    return this.translateInterpolatedParams(interpolateParams).pipe(
+      switchMap(translatedParams =>  this.translateService.get(rawMessages, translatedParams)),
+      map(translatedValues => {
+        const translated = new Map<string, string>();
+        messages.forEach((rawValue, key) => {
+          translated.set(key, translatedValues[rawValue] || rawValue);
+        });
+        return translated;
+      }),
+    );
+  }
+
+  /**
+   * Translates a list of params
+   *
+   * @param interpolateParams
+   */
+  private translateInterpolatedParams(interpolateParams: any): Observable<string | any> {
+
+    if (!interpolateParams) { return of({}); }
+
+    const values = Object.getOwnPropertyNames(interpolateParams)
+      .map(key => interpolateParams[key])
+      .filter(value => !!value)
+      .map(value => value + '');
+
+    return this.translateService.get(values).pipe(
+      map(translated => {
+
+        Object.getOwnPropertyNames(interpolateParams)
+          .forEach(key => {
+            const value = interpolateParams[key];
+            interpolateParams[key] = translated[value];
+          });
+
+        return interpolateParams;
+      }));
+  }
+
+}

package/src/lib/components/dialogs/question-dialog/elder-question-dialog.component.html

@@ -0,0 +1,28 @@
+<h2 matDialogTitle translate>{{ data.title }}</h2>
+
+<form #f="ngForm" fxLayout="column" (ngSubmit)="confirm($event)" cdkTrapFocus>
+
+    <mat-dialog-content>
+      <p>{{data.question}}</p>
+
+      <mat-form-field class="full-width">
+        <input matInput type="text" name="name" [(ngModel)]="answer" cdkFocusInitial
+               placeholder="{{'context.name' | translate}}" required>
+      </mat-form-field>
+    </mat-dialog-content>
+
+    <mat-dialog-actions fxLayoutAlign="end center" >
+
+        <button mat-button type="button"
+                (click)="cancel($event)">
+            {{'actions.cancel' | translate}}
+        </button>
+
+        <button mat-button type="submit" color="primary"
+                [disabled]="!isValid">
+          {{'actions.ok' | translate}}
+        </button>
+
+    </mat-dialog-actions>
+
+</form>

package/src/lib/components/dialogs/question-dialog/elder-question-dialog.component.ts

@@ -0,0 +1,44 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {ElderDialogConfig} from '../elder-dialog-config';
+
+export class QuestionDialogConfig extends ElderDialogConfig {
+
+    /**
+     * String appearing as question in the dialog.
+     */
+    public question: string;
+
+}
+
+@Component({
+  selector: 'elder-question-dialog',
+  templateUrl: './elder-question-dialog.component.html',
+  styleUrls: ['./elder-question-dialog.component.scss']
+})
+export class ElderQuestionDialogComponent implements OnInit {
+
+  public answer: string;
+
+  constructor(
+    public dialogRef: MatDialogRef<ElderQuestionDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  ngOnInit() {
+
+  }
+
+  public confirm(event: Event) {
+    this.dialogRef.close(this.answer);
+  }
+
+  public cancel(event: Event): void {
+    this.dialogRef.close();
+  }
+
+  public get isValid(): boolean {
+    return !!this.answer;
+  }
+
+}

package/src/lib/components/dialogs/selection-dialog/elder-selection-dialog/elder-selection-dialog.component.html

@@ -0,0 +1,31 @@
+
+
+<div fxLayout="column" fxFill>
+
+  <div fxLayout="column">
+    <h2 *ngIf="title">{{title | translate}}</h2>
+  </div>
+
+  <div fxLayout="column" fxFlex>
+
+    <ng-template [ngTemplateOutlet]="data.template"></ng-template>
+
+  </div>
+
+  <div fxLayout="row" fxLayoutAlign="end center">
+
+    <button mat-button type="button" mat-dialog-close>
+      {{'actions.cancel' | translate}}
+    </button>
+
+    <button mat-raised-button type="button"
+            [disabled]="data.selectionModel.isEmpty()"
+            (click)="confirmSelection()">
+      {{'actions.select' | translate}}
+    </button>
+
+  </div>
+
+
+</div>
+

package/src/lib/components/dialogs/selection-dialog/elder-selection-dialog/elder-selection-dialog.component.ts

@@ -0,0 +1,55 @@
+import {AfterViewInit, Component, Inject, Input, OnInit} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'elder-selection-dialog',
+  templateUrl: './elder-selection-dialog.component.html',
+  styleUrls: ['./elder-selection-dialog.component.scss']
+})
+export class ElderSelectionDialogComponent implements OnInit, AfterViewInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public title: string;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    public dialogRef: MatDialogRef<ElderSelectionDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: any
+  ) {
+
+  }
+
+  ngOnInit() {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public confirmSelection(): void {
+
+    this.dialogRef.close();
+
+  }
+
+  ngAfterViewInit(): void {
+    // this.dialogRef.updateSize('20vw', '20vh');
+  }
+}
+
+
+

package/src/lib/components/dialogs/selection-dialog/elder-selection-dialog.directive.ts

@@ -0,0 +1,54 @@
+import {Directive, EventEmitter, Input, Output, TemplateRef, ViewContainerRef} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import {ElderSelectionDialogComponent} from './elder-selection-dialog/elder-selection-dialog.component';
+import {SelectionModel} from '../../../common/selection/selection-model';
+
+@Directive({
+  selector: '[elderDialog]',
+  exportAs: 'elderSelection'
+})
+export class ElderSelectionDialogDirective<T = any> {
+
+  @Input()
+  public selectionModel: SelectionModel<T>;
+
+  @Output()
+  public close: EventEmitter<T[]> = new EventEmitter();
+
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private dialog: MatDialog
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+
+  public open(): void {
+    const dialogRef = this.dialog.open(ElderSelectionDialogComponent, {
+      data: {
+        template: this.templateRef,
+        selectionModel: this.selectionModel
+      },
+      width: '80vw',
+      height: '80vh'
+    });
+
+    dialogRef.afterClosed().subscribe(
+      result => this.close.emit(result)
+    );
+
+  }
+
+}

package/src/lib/components/errors/elder-error.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ElderExceptionDetailComponent } from './exception-detail/elder-exception-detail.component';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {FlexModule} from '@angular/flex-layout';
+
+export * from './exception-detail/elder-exception-detail.component';
+export * from './error-util';
+
+/**
+ * Provides Error Indicators and Exception detail components.
+ */
+@NgModule({
+  declarations: [
+    ElderExceptionDetailComponent
+  ],
+  exports: [
+    ElderExceptionDetailComponent
+  ],
+  imports: [
+    CommonModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatInputModule,
+    FlexModule
+  ]
+})
+export class ElderErrorModule { }

package/src/lib/components/errors/error-util.ts

@@ -0,0 +1,107 @@
+import {HttpErrorResponse} from '@angular/common/http';
+import {IStandardErrorDetail} from '../../common/errors/standard-error-detail';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ExceptionDetail} from '../../common/errors/exception-detail';
+
+export class ErrorUtil {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private static readonly logger = LoggerFactory.getLogger('ErrorUtil');
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public static buildExceptionDetail(error: any): ExceptionDetail {
+    if (error instanceof HttpErrorResponse) {
+      return ErrorUtil.httpErrorToExceptionDetail(error);
+    } else if (error instanceof Error) {
+      return {title: 'Error', detail: error.message, stacktrace: error.stack};
+    } else if (typeof error === 'string') {
+      return ErrorUtil.stringOrObjToExceptionDetail(error);
+    } else {
+      this.logger.trace('Unknown Error format. Stringifying error ...', error);
+      return {title: 'Unknown Error', detail: error, stacktrace: JSON.stringify(error)};
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private static httpErrorToExceptionDetail(response: HttpErrorResponse): ExceptionDetail {
+    let detail: ExceptionDetail;
+    if (response.error) {
+      detail = ErrorUtil.stringOrObjToExceptionDetail(response.error);
+    }
+    if (!detail || !detail.detail) {
+      detail = {
+        title: response.statusText,
+        detail: response.message,
+        stacktrace: JSON.stringify(response)
+      };
+    }
+    return detail;
+  }
+
+  private static stringOrObjToExceptionDetail(value: string | object): ExceptionDetail {
+
+    const error = ErrorUtil.tryParseJson(value);
+
+    if (typeof error === 'string') {
+      return {
+        title: 'Error',
+        detail: error,
+        stacktrace: null
+      };
+    } else if (error) {
+      const errorDetail = error as IStandardErrorDetail;
+
+      let title = '';
+      let detail = '';
+
+      if (errorDetail.type) {
+        detail += errorDetail.type + ': ';
+      }
+
+      if (errorDetail.message) {
+        detail += errorDetail.message;
+      }
+
+      title = (errorDetail?.error ?? 'Error') + ': ' + errorDetail?.type ?? 'Unknown Exception';
+
+      return {
+        title: title,
+        detail: detail,
+        stacktrace: JSON.stringify(error)
+      };
+    } else {
+      return null;
+    }
+  }
+
+  private static tryParseJson(error: object | string): object | string {
+    if (typeof error === 'string') {
+      if ((error as string).startsWith('{')) {
+        try {
+          this.logger.trace('Error string seems to be JSON. Trying to parse JSON ...', error);
+          error = JSON.parse(error);
+        } catch (e) {
+          this.logger.trace('Failed to parse error string to JSON', e);
+        }
+      }
+    }
+    return error;
+  }
+
+
+}

package/src/lib/components/errors/exception-detail/elder-exception-detail.component.html

@@ -0,0 +1,33 @@
+<ng-container *ngIf="errorCtx$ | async as errorCtx">
+
+  <mat-accordion *ngIf="errorCtx.detail as error" fxFill>
+    <mat-expansion-panel [expanded]="expanded">
+      <mat-expansion-panel-header>
+        <mat-panel-title fxLayoutAlign="start center" fxLayoutGap="8px">
+          <mat-icon color="warn" class="noselect">warning</mat-icon>
+          <span class="noselect">{{errorCtx.panelTitle}}</span>
+        </mat-panel-title>
+        <mat-panel-description class="noselect">
+          <span class="mat-caption">{{errorCtx.panelDescription}}</span>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+
+      <div fxLayout="column" fxFlex style="overflow: hidden">
+
+        <mat-form-field class="full-width">
+          <mat-label>Detail</mat-label>
+          <input matInput [value]="error.detail" readonly>
+        </mat-form-field>
+
+        <mat-form-field class="full-width">
+          <mat-label>Stacktrace</mat-label>
+          <textarea class="stacktrace" matInput [value]="error.stacktrace" [rows]="stacktraceRows"></textarea>
+        </mat-form-field>
+
+      </div>
+    </mat-expansion-panel>
+  </mat-accordion>
+
+</ng-container>
+
+

package/src/lib/components/errors/exception-detail/elder-exception-detail.component.ts

@@ -0,0 +1,77 @@
+import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {ExceptionDetail} from '../../../common/errors/exception-detail';
+
+export class ExceptionDetailCtx {
+
+  public static Empty = new ExceptionDetailCtx(null);
+
+  public readonly panelTitle: string;
+  public readonly panelDescription: string;
+
+  public static of(detail: ExceptionDetail): ExceptionDetailCtx {
+    return new ExceptionDetailCtx(detail);
+  }
+
+  constructor(
+    public readonly detail: ExceptionDetail
+  ) {
+    if (detail) {
+      this.panelTitle = detail.title?.substring(0, 50);
+      this.panelDescription = detail.detail.substring(0, 100);
+    }
+  }
+}
+
+
+@Component({
+  selector: 'elder-exception-detail',
+  templateUrl: './elder-exception-detail.component.html',
+  styleUrls: ['./elder-exception-detail.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderExceptionDetailComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public readonly errorCtx$ = new BehaviorSubject<ExceptionDetailCtx>(ExceptionDetailCtx.Empty);
+
+  @Input()
+  public expanded = false;
+
+  @Input()
+  public stacktraceRows = 8;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set error(error: ExceptionDetail) {
+    this.errorCtx$.next(ExceptionDetailCtx.of(error));
+  }
+
+}

package/src/lib/components/expand-toggle-button/elder-expand-toggle-button.component.html

@@ -0,0 +1,14 @@
+<button mat-button type="button" class="sidenav-button"
+        (click)="onToggleExpand($event)" fxFill>
+  <div fxLayout="row" fxFlex>
+
+    <ng-content></ng-content>
+
+    <span fxFlex></span>
+
+    <div fxLayoutAlign="center center">
+      <mat-icon>{{(expandedChange | async) ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}}</mat-icon>
+    </div>
+
+  </div>
+</button>