@elderbyte/ngx-starter 14.12.0-beta4 → 14.12.0-beta6

package/src/lib/components/data-transfer/http-data-transfer-indicator/http-data-transfer-indicator.component.ts

@@ -0,0 +1,61 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit
+} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ElderDataTransferService} from '../elder-data-transfer.service';
+import {DataTransferProgressAggregate} from '../../../common/http/transfer/data-transfer-progress-aggregate';
+import {ThemePalette} from '@angular/material/core';
+
+@Component({
+  selector: 'elder-data-transfer-indicator',
+  templateUrl: './http-data-transfer-indicator.component.html',
+  styleUrls: ['./http-data-transfer-indicator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HttpDataTransferIndicatorComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public activeColor: ThemePalette = undefined;
+
+  @Input()
+  public inactiveColor: ThemePalette = undefined;
+
+  public aggregate$: Observable<DataTransferProgressAggregate>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private transferService: ElderDataTransferService,
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    this.aggregate$ = this.transferService.transferAggregate;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+
+}

package/src/lib/components/data-transfer/http-data-transfer-overview/http-data-transfer-overview.component.html

@@ -0,0 +1,24 @@
+<div class="layout-col full">
+
+  <div class="layout-col flex" *ngIf="transfers$ | async as transfers">
+
+    <div *ngIf="transfers.length > 0 else noData" class="layout-col flex scroll-list">
+      <elder-data-transfer class="flex-none"
+                         *ngFor="let transfer of transfers"
+                         [transfer]="transfer">
+      </elder-data-transfer>
+    </div>
+
+    <ng-template #noData>
+      <div class="layout-col place-center-center flex">
+        <span class="mat-body-2 noselect" style="color: gray">No data transfers.</span>
+      </div>
+    </ng-template>
+
+  </div>
+
+
+  <mat-toolbar class="flex-none mat-elevation-z5">
+    <elder-data-transfer-aggregate class="flex" [hiddenWhenInactive]="false"></elder-data-transfer-aggregate>
+  </mat-toolbar>
+</div>

package/src/lib/components/data-transfer/http-data-transfer-overview/http-data-transfer-overview.component.ts

@@ -0,0 +1,41 @@
+import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ElderDataTransferService} from '../elder-data-transfer.service';
+import {HttpDataTransfer} from '../../../common/http/transfer/http-data-transfer';
+
+@Component({
+  selector: 'elder-data-transfer-overview',
+  templateUrl: './http-data-transfer-overview.component.html',
+  styleUrls: ['./http-data-transfer-overview.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HttpDataTransferOverviewComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public transfers$: Observable<HttpDataTransfer[]>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private transferService: ElderDataTransferService
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    this.transfers$ =  this.transferService.transfers;
+  }
+}

package/src/lib/components/data-view/base/data-view-options-provider-binding.ts

@@ -0,0 +1,99 @@
+import {Observable} from 'rxjs';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {takeUntil} from 'rxjs/operators';
+import {ElderDataViewBaseComponent} from './elder-data-view-base';
+import {ElderDataViewOptionsProvider} from './elder-data-view-options-provider';
+import {ElderDataViewOptions} from './elder-data-view-options';
+
+export class DataViewOptionsProviderBinding {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  private _optionsProvider: ElderDataViewOptionsProvider;
+
+  /***************************************************************************
+   *                                                                         *
+   * Static Builder                                                          *
+   *                                                                         *
+   **************************************************************************/
+
+  public static of(dataViewBaseComponent: ElderDataViewBaseComponent): DataViewOptionsProviderBinding {
+    return new DataViewOptionsProviderBinding(dataViewBaseComponent);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  protected constructor(
+    private readonly _dataViewBaseComponent: ElderDataViewBaseComponent
+  ) {
+    if (_dataViewBaseComponent == null) {
+      throw new Error('dataViewBaseComponent must not be null!');
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public dataViewOptionsProvider(optionsProvider: ElderDataViewOptionsProvider): this {
+    if (!optionsProvider) {
+      throw new Error('dataViewSelection must not be null!');
+    }
+    this._optionsProvider = optionsProvider;
+    return this;
+  }
+
+  public bindUntil(
+    unsubscribe$: Observable<any>
+  ): this {
+
+    if (!this._optionsProvider) {
+      throw new Error('DataView must be defined to start binding. Use .dataView(dataView)!');
+    }
+
+    this._optionsProvider.options$.pipe(
+      takeUntil(unsubscribe$)
+    ).subscribe(
+      options => this.applyOptions(options)
+    );
+
+    return this;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  public applyOptions(options: ElderDataViewOptions) {
+    const dataCtx = this._dataViewBaseComponent.dataContext;
+
+    if (dataCtx) {
+      dataCtx.filter.updateFilters(options.filters);
+      dataCtx.sort.updateSorts(options.sorts);
+    }
+
+    this._dataViewBaseComponent.interactionMode = options.interactionMode;
+    this._dataViewBaseComponent.selectionMultiEnabled = options.selectionMultiEnabled;
+
+    if (options.interactionMode === 'selection') {
+      this._dataViewBaseComponent.selectionVisible = true;
+      this._dataViewBaseComponent.float = false;
+    }
+  }
+
+
+}

package/src/lib/components/data-view/base/elder-data-view-base.ts

@@ -0,0 +1,322 @@
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Component, Directive, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {
+  IDataContext,
+  IDataContextActivePage,
+  IDataContextContinuable,
+  isActivePagedDataContext,
+  isContinuableDataContext
+} from '../../../common/data/data-context/data-context';
+import {SelectionModel} from '../../../common/selection/selection-model';
+import {ElderDataViewInteractionMode, IElderDataView} from './elder-data-view';
+import {ElderDataViewOptionsProvider} from './elder-data-view-options-provider';
+import {DataViewOptionsProviderBinding} from './data-view-options-provider-binding';
+
+@Directive()
+export abstract class ElderDataViewBaseComponent implements IElderDataView, OnInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Underlying data context.
+   */
+  public readonly dataContext$ = new BehaviorSubject<IDataContext<any>>(null);
+
+  /**
+   * Holds the current selection
+   */
+  public readonly selectionModel: SelectionModel<any>;
+
+  @Input()
+  public interactionMode: ElderDataViewInteractionMode = 'open';
+
+  /**
+   * Define if elder-table should clean up the
+   * data-context resources for you.
+   *
+   * In more advanced scenarios where you plan to reuse the same data-context
+   * set this to false and release the resources yourself. (dataContext.close)
+   */
+  @Input()
+  public cleanUp = true;
+
+  /**
+   * If true, this table is in dense mode.
+   * Heights are generally reduced.
+   */
+  private _dense = false;
+
+  /**
+   * If true, this table is in a floating card mode.
+   * Otherwise, it is flat on the current panel.
+   */
+  private _float = false;
+
+  /**
+   * If true, this table is in embedded mode.
+   * No borders / floating visible so that the table can be embedded into another container
+   */
+  private _embedded = false;
+
+  private readonly _itemClickSubject = new Subject<any>();
+
+  private readonly EntityIdKeyFn = (entity: any) => entity ? this.getId(entity) : 0;
+
+  protected readonly destroy$ = new Subject<void>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    selectionModel: SelectionModel<any>,
+    protected readonly dataViewOptionsProvider: ElderDataViewOptionsProvider
+  ) {
+    if (!selectionModel) {
+      this.selectionModel = new SelectionModel<any>(false, [], this.EntityIdKeyFn);
+    } else {
+      this.selectionModel = selectionModel;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    if (this.dataViewOptionsProvider) {
+
+      if (this.dataContext) {
+        DataViewOptionsProviderBinding.of(this)
+          .dataViewOptionsProvider(this.dataViewOptionsProvider)
+          .bindUntil(this.destroy$);
+      }
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.autoCleanUp();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get dataContext(): IDataContext<any> {
+    return this.dataContext$.getValue();
+  }
+
+  public set dataContext(data: IDataContext<any>) {
+    this.dataContext$.next(data);
+    this.onDataContextSet(data);
+  }
+
+  public get dataActivePaged(): IDataContextActivePage<any> {
+    return this.dataContext as IDataContextActivePage<any>;
+  }
+
+  public get dataContinuable(): IDataContextContinuable<any> {
+    return this.dataContext as IDataContextContinuable<any>;
+  }
+
+  public get isContinuable(): boolean {
+    if (!this.dataContext) {
+      return false;
+    }
+    return isContinuableDataContext(this.dataContext);
+  }
+
+  public get isActivePaged(): boolean {
+    if (!this.dataContext) {
+      return false;
+    }
+    return isActivePagedDataContext(this.dataContext);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Selection Properties                                                    *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set selectableEvaluatorFn(
+    selectableEvaluatorFn: (entity: any) => boolean
+  ) {
+    this.selectionModel.selectableEvaluatorFn = selectableEvaluatorFn;
+  }
+
+  @Input()
+  public set selection(selection: any[]) {
+    this.selectionModel.replaceSelection(selection);
+  }
+
+  @Output()
+  public get selectionChange(): Observable<any[]> {
+    return this.selectionModel.changed;
+  }
+
+  @Output()
+  public get selectionSingleChange(): Observable<any> {
+    return this.selectionModel.changed.pipe(
+      map((selection) => {
+        if (selection.length > 0) {
+          return selection[0];
+        } else {
+          return null;
+        }
+      })
+    );
+  }
+
+  @Input()
+  public set selectionMultiEnabled(enableMultiSelection: boolean) {
+    if (this.selectionModel) {
+      this.selectionModel.isMultipleSelection = enableMultiSelection;
+    }
+  }
+
+  abstract get selectionVisible();
+
+  abstract set selectionVisible(selectionVisible: boolean);
+
+  /***************************************************************************
+   *                                                                         *
+   * On click properties                                                     *
+   *                                                                         *
+   **************************************************************************/
+
+  @Output()
+  public get itemClick(): Observable<any> {
+    return this._itemClickSubject;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Style Properties                                                        *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set dense(value: boolean | '') {
+    this._dense = coerceBooleanProperty(value);
+  }
+
+  public get dense(): boolean | '' {
+    return this._dense;
+  }
+
+  @Input()
+  public set float(value: boolean | '') {
+    this._float = coerceBooleanProperty(value);
+  }
+
+  public get float(): boolean | '' {
+    return this._float;
+  }
+
+  @Input()
+  public set embedded(value: boolean | '') {
+    this._embedded = coerceBooleanProperty(value);
+  }
+
+  public get embedded(): boolean | '' {
+    return this._embedded;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Event Entry Points                                                      *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Called after a new DataContext has been set.
+   * Subclasses may add additional behaviour at this stage.
+   * @param data
+   * @protected
+   */
+  protected onDataContextSet(data: IDataContext<any>): void {
+  }
+
+  public onItemClick(entity: any): void {
+
+    if (entity) {
+
+      switch (this.interactionMode) {
+
+        case 'open':
+          if (this.selectionModel.hasValue) {
+            this.selectionModel.toggle(entity);
+          } else {
+            this._itemClickSubject.next(entity);
+          }
+          break;
+
+        case 'selection':
+          this.selectionModel.toggle(entity);
+          break;
+      }
+
+    }
+
+  }
+
+  public onItemDoubleClick(entity: any): void {
+
+    if (entity) {
+
+      switch (this.interactionMode) {
+
+        // double-click in open mode not supported
+        case 'open':
+          break;
+
+        // double-click in selection mode triggers normal item click
+        case 'selection':
+          this._itemClickSubject.next(entity);
+          break;
+
+      }
+
+    }
+
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  protected getId(entity: any): any {
+    return this.dataContext?.dataSource?.getId(entity) || entity;
+  }
+
+  /**
+   * Performs clean up of the current data context if auto clean up is enabled.
+   */
+  protected autoCleanUp(): void {
+    if (this.cleanUp && this.dataContext) {
+      //this.logger.debug('Releasing DataContext resources to prevent memory leak. [cleanUp]="true"');
+      this.dataContext.close();
+    }
+  }
+
+
+
+}

package/src/lib/components/data-view/base/elder-data-view-options-provider.ts

@@ -0,0 +1,55 @@
+import {BehaviorSubject} from 'rxjs';
+import {ElderDataViewOptions} from './elder-data-view-options';
+
+
+export class ElderDataViewOptionsProvider {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  public readonly options$ = new BehaviorSubject<ElderDataViewOptions>(ElderDataViewOptions.defaultOptions());
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get options(): ElderDataViewOptions {
+    return this.options$.getValue();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Example usage:
+   *
+   * this.updateOptions(
+   *      options => options.withInteractionMode('open')
+   *                        .withFilters([])
+   * )
+   *
+   * @param optionsFn function modifying the options
+   */
+  public updateOptions(optionsFn: ((opt: ElderDataViewOptions) => ElderDataViewOptions)): void {
+    this.options$.next(
+      optionsFn(this.options$.getValue())
+    );
+  }
+
+}

package/src/lib/components/data-view/base/elder-data-view-options.ts

@@ -0,0 +1,89 @@
+import {Sort} from '../../../common/data/sort';
+import {Filter} from '../../../common/data/filters/filter';
+import {ElderDataViewInteractionMode} from '../elder-data-view-interaction-mode';
+
+/**
+ * Options for supporting data view components.
+ */
+export class ElderDataViewOptions {
+
+  public static defaultOptions(): ElderDataViewOptions {
+    return new ElderDataViewOptions(
+      [],
+      [],
+      false,
+      'open'
+    )
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    public readonly sorts: Sort[],
+    public readonly filters: Filter[],
+    public readonly selectionMultiEnabled: boolean,
+    public readonly interactionMode: ElderDataViewInteractionMode
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public withSorts(sorts: Sort[]): ElderDataViewOptions {
+    return new ElderDataViewOptions(
+      sorts,
+      this.filters,
+      this.selectionMultiEnabled,
+      this.interactionMode
+    )
+  }
+
+  public withFilters(filters: Filter[]): ElderDataViewOptions {
+    return new ElderDataViewOptions(
+      this.sorts,
+      filters,
+      this.selectionMultiEnabled,
+      this.interactionMode
+    )
+  }
+
+  public withSelectionMultiEnabled(selectionMultiEnabled: boolean): ElderDataViewOptions {
+    return new ElderDataViewOptions(
+      this.sorts,
+      this.filters,
+      selectionMultiEnabled,
+      this.interactionMode
+    )
+  }
+
+  public withInteractionMode(interactionMode: ElderDataViewInteractionMode): ElderDataViewOptions {
+    return new ElderDataViewOptions(
+      this.sorts,
+      this.filters,
+      this.selectionMultiEnabled,
+      interactionMode
+    )
+  }
+
+  public withOptions(options: ElderDataViewOptions): ElderDataViewOptions {
+    return new ElderDataViewOptions(
+      options.sorts ? options.sorts : this.sorts,
+      options.filters ? options.filters : this.filters,
+      options.selectionMultiEnabled ? options.selectionMultiEnabled : this.selectionMultiEnabled,
+      options.interactionMode ? options.interactionMode : this.interactionMode,
+    )
+  }
+
+}