@elderbyte/ngx-starter 14.10.0 → 14.11.1

package/src/lib/components/toasts/elder-toast.service.ts

@@ -0,0 +1,244 @@
+import {Injectable} from '@angular/core';
+import {Subject, Observable} from 'rxjs';
+import {Toast} from './toast';
+import {ToastType} from './toast-type';
+import {TranslateService} from '@ngx-translate/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {catchError} from 'rxjs/operators';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {HttpErrorResponse} from '@angular/common/http';
+import {IStandardErrorDetail} from '../../common/errors/standard-error-detail';
+import {StandardToastComponent} from './standard-toast/standard-toast.component';
+import {ErrorUtil} from '../errors/error-util';
+
+export * from './toast';
+export * from './toast-type';
+
+export interface ToastErrorDetails {
+  status: string;
+  detail?: string;
+}
+
+export interface ToastOptions {
+  msg?: string;
+  detail?: string;
+  interpolateParams?: Object;
+  displayDurationMs?: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderToastService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private subject = new Subject<Toast>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private translate: TranslateService,
+    private snackBar: MatSnackBar
+  ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get notifications(): Observable<Toast> {
+    return this.subject.asObservable();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public info(msg: string, options?: ToastOptions): void {
+    options = this.prepareOptions(msg, options);
+    this.translateMessage(options).subscribe(
+      (translatedMsg) => this.toast({
+        status: 'Info',
+        message: translatedMsg,
+        detail: options.detail,
+        type: ToastType.Success
+      }, options?.displayDurationMs || 3000)
+    );
+  }
+
+  public warn(msg: string, options?: ToastOptions): void {
+    options = this.prepareOptions(msg, options);
+    this.translateMessage(options).subscribe(
+      (translatedMsg) => this.toast({
+        status: 'Warning',
+        message: translatedMsg,
+        detail: options.detail,
+        type: ToastType.Warning
+      }, options?.displayDurationMs || 5000)
+    );
+  }
+
+  public error(msg: string, error: any, options?: ToastOptions): void {
+
+    this.logger.error(msg, error);
+
+    options = this.prepareOptions(msg, options);
+    this.translateMessage(options).subscribe(
+      (translatedMsg) => {
+        const errDetail = this.errorToToast(error);
+        this.toast({
+          status: errDetail.status,
+          message: translatedMsg,
+          detail: errDetail.detail,
+          type: ToastType.Error
+        }, options?.displayDurationMs || 10000);
+      }
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API (Old)                                                        *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * @deprecated Use info()
+   */
+  public pushInfoRaw(msg: string): void {
+    this.info(msg);
+  }
+
+  /**
+   * @deprecated Use info()
+   */
+  public pushInfo(msgKey: string, interpolateParams?: Object) {
+    this.info(msgKey, interpolateParams);
+  }
+
+  /**
+   * @deprecated Use error()
+   */
+  public pushErrorRaw(msg: string, error?: any) {
+    this.error(msg, error);
+  }
+
+  /**
+   * @deprecated Use error()
+   */
+  public pushError(msgKey: string, interpolateParams?: any, error?: any) {
+    this.error(msgKey, error, interpolateParams);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private prepareOptions(msg: string, options?: ToastOptions): ToastOptions {
+    options = options ? options : {};
+    options.msg = msg;
+    return options;
+  }
+
+  private errorToToast(error: any): ToastErrorDetails {
+    const errorDetail = ErrorUtil.buildExceptionDetail(error);
+    if (errorDetail) {
+      return {
+        status: errorDetail.title,
+        detail: errorDetail.detail
+      };
+    } else {
+      return {
+        status: 'Unknown Error',
+        detail: JSON.stringify(error)
+      };
+    }
+
+  }
+
+  private toast(
+    toast: Toast,
+    durationMs: number
+  ): void {
+    this.subject.next(toast);
+    this.showToast(toast, durationMs);
+  }
+
+  private showToast(
+    toast: Toast,
+    durationMs: number = 5000
+  ): void {
+    this.snackBar.openFromComponent(
+      StandardToastComponent,
+      {
+        data: toast,
+        duration: durationMs,
+        panelClass: 'elder-primary-toast'
+      }
+    );
+    /*
+    this.snackBar.open(
+      toast.status + ': ' + toast.message + ' -> ' + toast.detail,
+      'OK', {
+        duration: 3000,
+        panelClass: this.toastClass(toast.type)
+      }
+      );*/
+  }
+
+  private toastClass(type: ToastType): string {
+    switch (type) {
+      case ToastType.Success:
+        return 'elder-success-toast';
+      case ToastType.Warning:
+        return 'elder-warning-toast';
+      case ToastType.Error:
+        return 'elder-error-toast';
+    }
+  }
+
+  private translateMessage(
+    options: ToastOptions
+  ): Observable<string> {
+    return this.translate.get(options.msg, options.interpolateParams)
+      .pipe(
+        catchError(err => options.msg) // // no translation found, we use the translation key
+      );
+  }
+
+}
+
+/**
+ * @deprecated Please switch to ElderToastService
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastService extends ElderToastService {
+}
+
+/**
+ * @deprecated Please switch to EbsToastService
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class EbsToastService extends ElderToastService {
+}

package/src/lib/components/toasts/standard-toast/standard-toast.component.html

@@ -0,0 +1,34 @@
+<div fxLayout="column" fxLayoutGap="4px">
+
+  <!-- Icon and Status -->
+  <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <mat-icon class="noselect" [color]="iconColor(toast.type)">{{icon(toast.type)}}</mat-icon>
+    <span
+      class="toast-title mat-body-2 noselect"
+      [class.elder-warn-text]="toast.type == ToastType.Error"
+      [class.elder-accent-text]="toast.type == ToastType.Warning"
+    >{{toast.status}}</span>
+  </div>
+
+  <span></span>
+
+  <!-- Toast Message -->
+  <span class="mat-body noselect"
+        [class.elder-warn-text]="toast.type == ToastType.Error"
+        [class.elder-accent-text]="toast.type == ToastType.Warning"
+  >{{toast.message}}</span>
+
+  <span></span>
+
+  <!-- Toast Detail -->
+  <span class="mat-small noselect"
+        [class.elder-warn-text]="toast.type == ToastType.Error"
+        [class.elder-accent-text]="toast.type == ToastType.Warning"
+  >{{trimDetailText(toast.detail, 200)}}</span>
+
+  <!-- Actions -->
+  <div fxLayout="row" fxLayoutAlign="end center">
+    <button mat-button type="button" [color]="iconColor(toast.type)" (click)="close()">Ok</button>
+  </div>
+
+</div>

package/src/lib/components/toasts/standard-toast/standard-toast.component.ts

@@ -0,0 +1,80 @@
+import {Component, OnInit, ChangeDetectionStrategy, Inject} from '@angular/core';
+import {MAT_SNACK_BAR_DATA, MatSnackBarRef} from '@angular/material/snack-bar';
+import {Toast} from '../toast';
+import {ToastType} from '../toast-type';
+
+@Component({
+  selector: 'elder-standard-toast',
+  templateUrl: './standard-toast.component.html',
+  styleUrls: ['./standard-toast.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StandardToastComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public readonly ToastType = ToastType;
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    public readonly snackBarRef: MatSnackBarRef<StandardToastComponent>,
+    @Inject(MAT_SNACK_BAR_DATA) public readonly toast: Toast
+  ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  ngOnInit(): void {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public close(): void {
+    this.snackBarRef.dismiss();
+  }
+
+  public iconColor(type: ToastType): string {
+    switch (type) {
+      case ToastType.Success: return 'primary';
+      case ToastType.Warning: return 'accent';
+      case ToastType.Error: return 'warn';
+      default: return '';
+    }
+  }
+
+  public icon(type: ToastType): string {
+    switch (type) {
+      case ToastType.Success: return 'info';
+      case ToastType.Warning: return 'warning';
+      case ToastType.Error: return 'error';
+      default: return '';
+    }
+  }
+
+  public trimDetailText(text: string, length: number): string {
+    if (text?.length > length) {
+      return text.substr(0, length) + '...';
+    } else {
+      return text;
+    }
+  }
+
+}

package/src/lib/components/toasts/toast-type.ts

@@ -0,0 +1,5 @@
+export enum ToastType {
+  Error,
+  Warning,
+  Success
+}

package/src/lib/components/toasts/toast.ts

@@ -0,0 +1,12 @@
+import {ToastType} from './toast-type';
+
+export interface Toast {
+
+  message: string;
+
+  status: string;
+
+  detail?: string;
+
+  type: ToastType;
+}

package/src/lib/components/url-fragment/elder-url-fragment.module.ts

@@ -0,0 +1,36 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ElderUrlFragmentSwitcherComponent} from './url-fragment-switcher/elder-url-fragment-switcher.component';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {FlexModule} from '@angular/flex-layout';
+import {ElderButtonGroupModule} from '../button-group/elder-button-group.module';
+
+export * from './elder-url-fragment';
+export {ElderUrlFragmentSwitcherComponent} from './url-fragment-switcher/elder-url-fragment-switcher.component';
+
+@NgModule({
+  declarations: [
+    ElderUrlFragmentSwitcherComponent
+  ],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    MatButtonModule,
+    FlexModule,
+    ElderButtonGroupModule
+  ],
+  exports: [
+    ElderUrlFragmentSwitcherComponent
+  ]
+})
+export class ElderUrlFragmentModule {
+}

package/src/lib/components/url-fragment/elder-url-fragment.ts

@@ -0,0 +1,10 @@
+export class ElderUrlFragment {
+
+  constructor(
+    public name: string,
+    public fragment: string,
+    public color: string = 'white',
+    public backgroundColor: string = 'transparent',
+  ) {
+  }
+}

package/src/lib/components/url-fragment/url-fragment-switcher/elder-url-fragment-switcher.component.html

@@ -0,0 +1,25 @@
+<ng-container *ngIf="activeUrlFragment$ | async as activeUrlFragment">
+  <elder-button-group>
+    <button mat-stroked-button type="button" disabled [ngStyle]="{'background-color': activeUrlFragment.color}">
+      <div fxLayout="column">
+        <span *ngIf="!disable" class="caption">{{activeUrlFragment.name}}</span>
+      </div>
+    </button>
+
+    <button mat-stroked-button type="button"
+            *ngIf="!disable "  [matMenuTriggerFor]="fragmentMenu"
+            [ngStyle]="{'background-color': activeUrlFragment.color}">
+      <mat-icon>flip_camera_android</mat-icon>
+    </button>
+  </elder-button-group>
+</ng-container>
+
+<mat-menu #fragmentMenu="matMenu">
+  <button mat-menu-item type="button"
+          *ngFor="let urlFragment of urlFragments"
+          (click)="setActiveUrlFragment(urlFragment.fragment)">
+    <mat-icon [ngStyle]="{'color': urlFragment.color}">flip_camera_android</mat-icon>
+    <span>{{  urlFragment.name }}</span>
+  </button>
+
+</mat-menu>

package/src/lib/components/url-fragment/url-fragment-switcher/elder-url-fragment-switcher.component.ts

@@ -0,0 +1,107 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ActivatedRoute, Router, UrlSegment} from '@angular/router';
+import {BehaviorSubject, Observable, of} from 'rxjs';
+import {filter, first, flatMap, map, tap} from 'rxjs/operators';
+import {ElderUrlFragment} from '../elder-url-fragment';
+
+@Component({
+  selector: 'elder-url-fragment-switcher',
+  templateUrl: './elder-url-fragment-switcher.component.html',
+  styleUrls: ['./elder-url-fragment-switcher.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderUrlFragmentSwitcherComponent implements OnInit {
+
+
+  private readonly logger = LoggerFactory.getLogger('ElderUrlFragmentSwitcherComponent');
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+  @Input()
+  public readonly disable: boolean = true;
+
+  /*
+    List of url fragments which can replace a part of the window location
+   */
+  @Input()
+  public urlFragments: ElderUrlFragment[];
+  /*
+  Regex which matches the part of the url which will get replaced
+   */
+  @Input()
+  public urlRegex: RegExp = new RegExp('[\.](\\w+)');
+
+  @Input()
+
+  /*
+  Index of the regex group which will be replaced
+   */
+  @Input()
+  public regexArrayIndex: number = 0;
+
+  /*
+  Window which will open the created url
+   */
+  @Input()
+  public windowOpenIn: string = "_self";
+
+  public readonly activeUrlFragment$ = new BehaviorSubject(new ElderUrlFragment('No match', ''));
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+  constructor() {
+
+  }
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  ngOnInit(): void {
+    if (!this.disable) {
+      let urlFragment = this.urlFragments.find(
+        c => {
+          try {
+            return c.fragment === this.urlRegex.exec(window.location.href)[this.regexArrayIndex];
+          } catch (e) {
+            return false;
+          }
+        });
+      if (urlFragment) {
+        this.activeUrlFragment$.next(urlFragment);
+      }
+    }
+
+  }
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public setActiveUrlFragment(urlFragment: string) {
+    this.logger.debug(urlFragment);
+    window.open(
+      window.location.href.replace(this.urlRegex.exec(window.location.href)[this.regexArrayIndex], urlFragment),
+      this.windowOpenIn);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+}

package/src/lib/components/viewers/elder-svg-viewer/elder-svg-viewer.component.html

@@ -0,0 +1 @@
+<div class="svg" #dataContainer></div>

package/src/lib/components/viewers/elder-svg-viewer/elder-svg-viewer.component.ts

@@ -0,0 +1,81 @@
+import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
+
+@Component({
+  selector: 'elder-svg-viewer',
+  templateUrl: './elder-svg-viewer.component.html',
+  styleUrls: ['./elder-svg-viewer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderSvgViewerComponent implements OnInit, AfterViewInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public readonly svgContent$ = new BehaviorSubject<SafeHtml>(null);
+
+  @ViewChild('dataContainer', {static: true}) dataContainer: ElementRef;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private sanitizer: DomSanitizer
+  ) {
+
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit() {
+
+  }
+
+  public ngAfterViewInit(): void {
+    this.update();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set svg(svgData: string) {
+
+    /*
+    this.svgContent$.next(
+      this.sanitizer.bypassSecurityTrustHtml(svgData)
+    );*/
+    this.svgContent$.next(
+      svgData
+    );
+    this.update();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private update(): void {
+    if (this.dataContainer) {
+      this.dataContainer.nativeElement.innerHTML = this.svgContent$.getValue();
+    }
+  }
+
+
+}

package/src/lib/components/viewers/elder-viewers.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ElderSvgViewerComponent } from './elder-svg-viewer/elder-svg-viewer.component';
+
+export {ElderSvgViewerComponent} from './elder-svg-viewer/elder-svg-viewer.component';
+
+@NgModule({
+  declarations: [
+    ElderSvgViewerComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ElderSvgViewerComponent
+  ]
+})
+export class ElderViewersModule { }