@elderbyte/ngx-starter 14.10.0 → 14.11.1

package/src/lib/common/enums/elder-enum-translation.service.ts

@@ -0,0 +1,116 @@
+import {Injectable} from '@angular/core';
+import {map} from 'rxjs/operators';
+import {TranslateService} from '@ngx-translate/core';
+import {Observable} from 'rxjs';
+import {ComparatorBuilder} from '../data/field-comparator';
+import {IDataSource} from '../data/datasource/data-source';
+import {DelegateListDataSource} from '../data/datasource/fetcher/delegate-data-source';
+
+
+export class TranslatedEnumValue {
+
+  constructor(
+    public value: string,
+    public displayValue: string
+  ) {
+  }
+
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderEnumTranslationService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private translateService: TranslateService
+  ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Translates the given Enum class. Loads translations of given translationPrefix
+   * and creates for each enum value a TranslatedEnumValue.
+   *
+   * @param enumClass enum to translate
+   * @param translationPrefix prefix to load translations
+   * @param sort if true, data will be sorted by translations
+   * @param asc if true, data will be sorted in ascending order
+   */
+  public translate(
+    enumClass: any,
+    translationPrefix: string,
+    sort = true,
+    asc = true
+  ): Observable<TranslatedEnumValue[]> {
+
+    return this.translateService.stream(translationPrefix).pipe(
+      map((translation: string | any) => {
+        return Object.keys(enumClass)
+          .map(enumKey => {
+            const enumValue = enumClass[enumKey];
+            const translated = translation[enumValue] ?? enumKey;
+            return new TranslatedEnumValue(enumValue, translated);
+          });
+      }),
+      map((data: TranslatedEnumValue[]) => {
+        return sort ?
+          data.sort(ComparatorBuilder.fieldSort(asc ? 'displayValue' : '-displayValue')) :
+          data;
+      })
+    );
+
+  }
+
+  /**
+   * Translates the given element. Loads the translation
+   * and creates a TranslatedEnumValue.
+   *
+   * @param translationPrefix prefix to load translation
+   * @param enumKey key of the translation to load
+   */
+  public translateOne(
+    translationPrefix: string,
+    enumKey: string
+  ): Observable<TranslatedEnumValue> {
+
+    return this.translateService.get(translationPrefix + '.' + enumKey)
+      .pipe(
+        map(translatedValue => new TranslatedEnumValue(enumKey, translatedValue))
+      );
+  }
+
+  /**
+   * Creates a data source of translations of the given enum class.
+   *
+   * @param enumClass enum to translate
+   * @param translationPrefix prefix to load translations
+   * @param sort if true, data will be sorted by translations
+   * @param asc if true, data will be sorted in ascending order
+   */
+  public enumDateSource(
+    enumClass: any,
+    translationPrefix: string,
+    sort = true,
+    asc = true
+  ): IDataSource<TranslatedEnumValue> {
+    return DelegateListDataSource.listFetcher(() =>
+        this.translate(enumClass, translationPrefix, sort, asc),
+      'value',
+      (id) => this.translateOne(translationPrefix, id)
+    );
+  }
+
+
+}

package/src/lib/common/enums/public_api.ts

@@ -0,0 +1,3 @@
+
+
+export * from './elder-enum-translation.service';

package/src/lib/common/errors/exception-detail.ts

@@ -0,0 +1,6 @@
+
+export interface ExceptionDetail {
+  readonly title: string;
+  readonly detail: string;
+  readonly stacktrace: string;
+}

package/src/lib/common/errors/standard-error-detail.ts

@@ -0,0 +1,27 @@
+
+export interface IStandardErrorDetail {
+  /**
+   * Detail message that describes the error
+   */
+  message: string;
+
+  /**
+   * The request uri that caused the error
+   */
+  request: string;
+
+  /**
+   * The Exception Type
+   */
+  type: string;
+
+  /**
+   * The Http Error Code
+   */
+  status: number;
+
+  /**
+   * The Http Error Name / Description
+   */
+  error: string;
+}

package/src/lib/common/format/bytes-format.ts

@@ -0,0 +1,25 @@
+
+export class BytesFormat {
+
+  private static units = [
+    'bytes',
+    'KB',
+    'MB',
+    'GB',
+    'TB',
+    'PB'
+  ];
+
+  public static format(bytes: number, precision = 2): string {
+    if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes)) { return '?'; }
+
+    let unit = 0;
+
+    while (bytes >= 1024) {
+      bytes /= 1024;
+      unit++;
+    }
+
+    return bytes.toFixed(+precision) + ' ' + this.units[unit];
+  }
+}

package/src/lib/common/format/bytes-per-second-format.ts

@@ -0,0 +1,44 @@
+
+export class BytesPerSecondFormat {
+
+  public static formatBytesPerSecond(bytesPerSecond: number, precision: number = null): string {
+
+    const KBPerSecond = bytesPerSecond / 1000;
+    const MBPerSecond = KBPerSecond / 1000;
+    const GBPerSecond = MBPerSecond / 1000;
+
+    if (bytesPerSecond < 500) {
+      return BytesPerSecondFormat.format(bytesPerSecond, precision || 0) + ' Bps';
+    } else if (KBPerSecond < 999) {
+      return BytesPerSecondFormat.format(KBPerSecond, precision || 0) + ' KBps';
+    } else if (MBPerSecond < 999) {
+      return BytesPerSecondFormat.format(MBPerSecond, precision || 2) + ' MBps';
+    } else {
+      return BytesPerSecondFormat.format(GBPerSecond, precision || 2) + ' GBps';
+    }
+  }
+
+  public static formatAsBitsPerSecond(bytesPerSecond: number, precision: number = null): string {
+
+    const bitsPerSecond = bytesPerSecond * 8;
+
+    const KbPerSecond = bitsPerSecond / 1000;
+    const MbPerSecond = KbPerSecond / 1000;
+    const GbPerSecond = MbPerSecond / 1000;
+
+    if (bitsPerSecond < 500) {
+      return BytesPerSecondFormat.format(bitsPerSecond, precision || 0) + ' bps';
+    } else if (KbPerSecond < 999) {
+      return BytesPerSecondFormat.format(KbPerSecond, precision || 0) + ' Kbps';
+    } else if (MbPerSecond < 999) {
+      return BytesPerSecondFormat.format(MbPerSecond, precision || 2) + ' Mbps';
+    } else {
+      return BytesPerSecondFormat.format(GbPerSecond, precision || 2) + ' Gbps';
+    }
+  }
+
+  private static format(value: number, precision: number): number {
+    return +value.toFixed(precision);
+  }
+
+}

package/src/lib/common/forms/elder-entity-value-accessor.ts

@@ -0,0 +1,70 @@
+import {Observable} from 'rxjs';
+import {startWith} from 'rxjs/operators';
+
+/**
+ * Represents a control which is backed by entities (along  values).
+ *
+ * The core idea is that a control tracks an id as value, but it will
+ * also side load the corresponding entity from a datasource.
+ */
+export interface IElderEntityValueAccessor<TEntity, TId, TValue> {
+
+  /**
+   * Gets or sets the entity
+   */
+  entity: TEntity;
+
+  /**
+   * Gets or sets the entity id
+   */
+  entityId: TId;
+
+  /**
+   * Emits when the entity id has changed.
+   */
+  entityIdChange: Observable<TId>;
+
+  /**
+   * Emits when the entity has changed.
+   */
+  entityChange: Observable<TEntity>;
+
+  /**
+   * Update the control value by the given entity
+   * and emit a value-updated event which simulates
+   * a user action.
+   * @param entity
+   */
+  updateValueByEntity(entity: TEntity): void;
+
+  /**
+   * Convert an entity to a value for this control.
+   * @param entity
+   */
+  entityToValue(entity: TEntity): TValue;
+
+}
+
+export class ElderEntityValueAccessorUtil {
+  public static entity$<TEntity>(vac: IElderEntityValueAccessor<TEntity, any, any>): Observable<TEntity> {
+    return vac.entityChange.pipe(startWith(vac.entity));
+  }
+  public static entityId$<TId>(vac: IElderEntityValueAccessor<any, TId, any>): Observable<TId> {
+    return vac.entityIdChange.pipe(startWith(vac.entityId));
+  }
+}
+
+
+export function isElderEntityValueAccessor(object: any): object is IElderEntityValueAccessor<any, any, any> {
+
+  if (!object) { return false; }
+
+  const vac = object as IElderEntityValueAccessor<any, any, any>;
+
+  return 'entity' in vac // This might be undefined
+    && 'entityId' in vac // This might be undefined
+    && vac.entityIdChange !== undefined
+    && vac.entityChange !== undefined
+    && vac.updateValueByEntity !== undefined
+    && vac.entityToValue !== undefined;
+}

package/src/lib/common/forms/elder-form-field-control-base.directive.ts

@@ -0,0 +1,240 @@
+import {MatFormFieldControl} from '@angular/material/form-field';
+import {ValueAccessorBase} from './value-accessor-base';
+import {mergeWith, Observable, Subject} from 'rxjs';
+import {AbstractControl, AbstractControlDirective, NgControl, ValidationErrors, Validator} from '@angular/forms';
+import {map, takeUntil} from 'rxjs/operators';
+import {Directive, ElementRef, HostBinding, Input, OnDestroy} from '@angular/core';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {FocusMonitor} from '@angular/cdk/a11y';
+import {TranslateService} from '@ngx-translate/core';
+
+/**
+ * Base for custom material form field controls.
+ * https://material.angular.io/guide/creating-a-custom-form-field-control
+ *
+ * Implementors must provide the MatFormFieldControl:
+ * providers: [{provide: MatFormFieldControl, useExisting: MyCoolInput}]
+ */
+@Directive()
+export abstract class ElderFormFieldControlBase<T>
+  extends ValueAccessorBase<T>
+  implements MatFormFieldControl<T>, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private static nextId = 0;
+
+  private readonly _focusMonitor: FocusMonitor;
+  private readonly _translate: TranslateService;
+
+  private _placeholder: string;
+  private _disabled = false;
+  private _required = false;
+  private _readonly = false;
+
+  private _focused = false;
+  private readonly stateChangePusher$ = new Subject<void>();
+
+  protected readonly destroy$ = new Subject<void>();
+
+  @HostBinding() public readonly id: string;
+  public readonly ngControl: NgControl | AbstractControlDirective | null;
+  public readonly controlType: string;
+
+  // TODO ...
+  readonly autofilled: boolean;
+  readonly userAriaDescribedBy: string;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly hostRef: ElementRef,
+    controlType: string,
+    focusMonitor: FocusMonitor,
+    translateService: TranslateService,
+    ngControl?: NgControl
+  ) {
+    super();
+    this._focusMonitor = focusMonitor;
+    this._translate = translateService;
+    this.controlType = controlType;
+    this.ngControl = ngControl;
+    this.id = `elder-control-${this.controlType}-${ElderFormFieldControlBase.nextId++}`;
+    if (this.ngControl) {
+      ngControl.valueAccessor = this;
+    }
+    this.initFocusMonitor();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  private initFocusMonitor(): void {
+    this._focusMonitor
+      .monitor(this.hostRef, true)
+      .pipe(
+        takeUntil(this.destroy$)
+      ).subscribe(
+      focusOrigin => {
+        if (focusOrigin) {
+          this.onFocusInternal();
+        }else{
+          this.onBlurInternal();
+        }
+      }
+    );
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set placeholder(value: string) {
+    if(value){
+      this._translate.get(value).subscribe(
+        {
+          next: translated => this._placeholder = translated
+        }
+      );
+    } else {
+      this._placeholder = value;
+    }
+  }
+
+  public get placeholder(): string {
+    return this._placeholder;
+  }
+
+  @Input()
+  public set required(value: BooleanInput) {
+    this._required = coerceBooleanProperty(value);
+  }
+  public get required(): boolean {
+    return this._required;
+  }
+
+  @Input()
+  public set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  public get disabled(): boolean {
+    return this._disabled;
+  }
+
+  @Input()
+  public set readonly(value: BooleanInput) {
+    this._readonly = coerceBooleanProperty(value);
+  }
+  public get readonly(): boolean {
+    return this._readonly;
+  }
+
+  public get isLocked(): boolean {
+    return this._disabled || this._readonly;
+  }
+
+  public get stateChanges(): Observable<void> {
+    return this.value$.pipe(
+      map(x => <any>x),
+      mergeWith(this.stateChangePusher$)
+    );
+  }
+
+  public get errorState(): boolean {
+    return this.ngControl?.invalid && this.ngControl?.dirty;
+  }
+
+  public get empty(): boolean {
+    return (this.value === undefined) || (this.value === null) || (<any>this.value === '');
+  }
+
+  public get shouldLabelFloat(): boolean {
+    return !this.empty || this._focused;
+  }
+
+  public get focused(): boolean {
+    return this._focused;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public onContainerClick(event: MouseEvent): void {
+    this.focus();
+  }
+
+  public setDescribedByIds(ids: string[]): void {
+    if (ids.length) {
+      // this._elementRef.nativeElement.setAttribute('aria-describedby', ids.join(' '));
+    } else {
+      // this._elementRef.nativeElement.removeAttribute('aria-describedby');
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Abstract API                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Focus this control.
+   * @param options
+   */
+  public abstract focus(options?: FocusOptions): void;
+
+  /**
+   * Blur this control.
+   */
+  public abstract blur(): void;
+
+  /***************************************************************************
+   *                                                                         *
+   * Internal API                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  protected emitStateChange(): void {
+    this.stateChangePusher$.next();
+  }
+
+  protected writeToControl(value: T): void { }
+
+  protected onFocusInternal(): void {
+    if (!this.disabled) {
+      this._focused = true;
+      this.emitStateChange();
+    }
+  }
+
+  protected onBlurInternal(): void {
+    this._focused = false;
+    if (!this.disabled) {
+      // this._onTouched();
+      // this._changeDetectorRef.markForCheck();
+      this.emitStateChange();
+    }
+  }
+}

package/src/lib/common/forms/elder-from-field-base.ts

@@ -0,0 +1,113 @@
+import {ContentChild, Directive, OnInit, ViewChild} from '@angular/core';
+import {BehaviorSubject, Observable, switchMap} from 'rxjs';
+import {MatFormField, MatFormFieldControl} from '@angular/material/form-field';
+import {filter, map, startWith} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+
+export type ElderApplyControlFn<TControl> = (ctrl: TControl) => void
+
+@Directive()
+export abstract class ElderFromFieldBase<TValue, TControl extends MatFormFieldControl<TValue>> implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  protected readonly _logger = LoggerFactory.getLogger(this.constructor.name);
+
+  protected readonly formFieldControl$ = new BehaviorSubject<TControl>(null);
+
+  @ViewChild(MatFormField, {static: true})
+  public matFormField: MatFormField;
+
+  private readonly _value$: Observable<TValue>;
+
+  private readonly _controlActionQueue: ElderApplyControlFn<TControl>[] = [];
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  protected constructor() {
+    this._value$ = this.formFieldControl$.pipe(
+      filter(ctrl => !!ctrl),
+      switchMap(ctrl => this.controlValue$(ctrl))
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    const control = this.formFieldControl$.getValue();
+    this.matFormField._control = control;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @ContentChild(MatFormFieldControl, { static: true })
+  public set formFieldControl(ctrl: TControl){
+    this.formFieldControl$.next(ctrl);
+    if (ctrl) {
+      this.executeQueuedActions(ctrl);
+    }
+  }
+
+  public get formFieldControl(): TControl {
+    return this.formFieldControl$.getValue();
+  }
+
+  public get value$(): Observable<TValue> {
+    return this._value$;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public applyToControl(applyFn: (ctrl: TControl) => void){
+    const ctrl = this.formFieldControl;
+    if (ctrl) {
+      applyFn(ctrl);
+    } else {
+      this._controlActionQueue.push(applyFn);
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private executeQueuedActions(ctrl: TControl): void {
+    try {
+      this._controlActionQueue.forEach(fn => fn(ctrl));
+      this._controlActionQueue.length = 0; // Clear Array
+    } catch (err) {
+      this._logger.error('Applying function to control failed with error. Control: ', ctrl);
+      throw err;
+    }
+  }
+
+  private controlValue$(ctrl: TControl): Observable<TValue> {
+    return ctrl.stateChanges.pipe(
+      map(() => ctrl.value),
+      startWith(ctrl.value)
+    );
+  }
+}