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

package/src/lib/components/data-view/table/elder-table/elder-table.component.ts

@@ -0,0 +1,388 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Directive,
+  forwardRef,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Optional,
+  QueryList,
+  SkipSelf,
+  TemplateRef,
+  TrackByFunction,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import {MatTableDataContextBindingBuilder} from '../../../../common/data/data-context/mat-table-data-context-binding';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatColumnDef, MatRowDef, MatTable} from '@angular/material/table';
+import {IDataContext, isDataContext} from '../../../../common/data/data-context/data-context';
+import {SelectionModel} from '../../../../common/selection/selection-model';
+import {BehaviorSubject, combineLatest, Observable, of, Subject, Subscription} from 'rxjs';
+import {map, takeUntil} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {CdkColumnDef, CdkRowDef, CdkTable} from '@angular/cdk/table';
+import {DataContextBuilder} from '../../../../common/data/data-context/data-context-builder';
+import {ELDER_DATA_VIEW} from '../../base/elder-data-view';
+import {ElderTableRowDirective} from '../elder-table-row.directive';
+import {IDataSource, isDataSource} from '../../../../common/data/datasource/data-source';
+import {ElderDataViewBaseComponent} from '../../base/elder-data-view-base';
+import {ElderTableModel} from '../model/elder-table-model';
+import {ElderTableProviders} from '../model/elder-table-model-provider';
+import {QueryListBinding} from '../../../../common/utils/query-list-binding';
+import {ElderTableModelCdkTableBinding} from '../model/elder-table-model-cdk-table-binding';
+import {ElderTableModelQueryGroup} from '../model/elder-table-model-query-group';
+import {ElderTableExtensionDirective} from '../elder-table-extension.directive';
+import {ElderTableColumnDirective} from '../elder-table-column.directive';
+import {ColumnPositionSpec} from '../model/elder-column-layout';
+import {ElderTableToolbarDirective} from './elder-table-toolbar.directive';
+import {DataViewOptionsProviderBinding} from '../../base/data-view-options-provider-binding';
+import {ElderDataViewOptionsProvider} from '../../base/elder-data-view-options-provider';
+
+@Component({
+  selector: 'elder-table, ebs-table', // ebs-table is deprecated
+  templateUrl: './elder-table.component.html',
+  styleUrls: ['./elder-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    ElderTableProviders.ExistingOrNewTableModel,
+    {
+      provide: ELDER_DATA_VIEW,
+      useExisting: forwardRef(() => ElderTableComponent)
+    }
+  ]
+})
+export class ElderTableComponent extends ElderDataViewBaseComponent implements OnInit, AfterContentInit, AfterViewInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  /**
+   * Load next chunk after current is done
+   */
+  private loadNextQueued = false;
+
+  /// Table
+  @ViewChild(MatTable, {static: true})
+  public matTable: CdkTable<any>;
+
+  @ViewChild(MatPaginator)
+  public matPaginator: MatPaginator;
+
+  private readonly _matSort: MatSort;
+
+  @ContentChildren(MatColumnDef)
+  public columnDefs: QueryList<CdkColumnDef>;
+
+  @ContentChildren(ElderTableColumnDirective)
+  public elderColumns: QueryList<ElderTableColumnDirective>;
+
+  @ContentChildren(MatRowDef)
+  public rowDefs: QueryList<CdkRowDef<any>>;
+
+  /**
+   * Field to identify the data records (ID field).
+   * Note: This property is only considered in case the
+   * underlying data is an Array.
+   * In case of DataContext, the ID field needs to be defined in the context.
+   * In case of DataSource, the ID field is automatically picked from the DataSource.
+   */
+  @Input()
+  public idField: string;
+
+  /**
+   * When this field is present and true,
+   * the coresponding row is marked to be in the processed of being removed.
+   *
+   * I.e. 'removing'
+   */
+  @Input()
+  public removingField: string = null;
+
+  /**
+   * When this field is present and true,
+   * the corresponding row is hidden.
+   *
+   * I.e. 'deleted'
+   *
+   */
+  @Input()
+  public hiddenField: string = null;
+
+  @Input()
+  public pageSizeOptions = [30, 50, 100, 150, 200];
+
+  @Input()
+  public keepSelection = true;
+
+  @Input()
+  public showFooter = false;
+
+  public canLoadMore$: Observable<boolean>;
+  public total$: Observable<string>;
+
+  /**
+   * The table toolbar
+   */
+  @ContentChildren(ElderTableToolbarDirective, {read: TemplateRef})
+  public toolbarRowTemplateQuery: QueryList<TemplateRef<any>>;
+  public readonly toolbarRowTemplates$ = new BehaviorSubject<TemplateRef<any>[]>([]);
+
+  /**
+   * Selection model life cycle
+   */
+  private selectionLifeCycle: Subscription;
+
+  @ViewChildren(ElderTableRowDirective)
+  private rowsQuery: QueryList<ElderTableRowDirective<any>>;
+
+  /**
+   * Gets the current rows of this table.
+   */
+  public readonly rows$ = new BehaviorSubject<ElderTableRowDirective<any>[]>([]);
+
+  /**
+   * The index of this table group extension
+   * @private
+   */
+  private readonly _extensionGroupIndex: number;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    public readonly tableModel: ElderTableModel,
+    @Optional() selectionModel: SelectionModel<any>,
+    @Optional() @SkipSelf() dataViewOptionsProvider: ElderDataViewOptionsProvider,
+    @Optional() matSort: MatSort,
+    @Optional() @SkipSelf() private readonly parentExtension: ElderTableExtensionDirective,
+    private cdr: ChangeDetectorRef,
+    private zone: NgZone
+  ) {
+    super(selectionModel, dataViewOptionsProvider);
+    this._matSort = matSort;
+    this._extensionGroupIndex = (parentExtension?.extensionGroupIndex ?? 0) + 1;
+    if (this._matSort) {
+      this._matSort.disableClear = true;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public override ngOnInit(): void {
+    super.ngOnInit();
+
+    ElderTableModelCdkTableBinding
+      .of(this.tableModel)
+      .table(this.matTable)
+      .bindUntil(this.destroy$);
+  }
+
+  public ngAfterContentInit(): void {
+
+    ElderTableModelQueryGroup
+      .start(this.tableModel, this._extensionGroupIndex)
+      .withColumnsPosition(ColumnPositionSpec.relativeToPrevGroup('start'))
+      .withColumnDefs(this.columnDefs, this.elderColumns)
+      .withRowDefs(this.rowDefs)
+      .withSort(this._matSort)
+      .bindUntil(this.destroy$);
+
+    QueryListBinding
+      .of(this.toolbarRowTemplateQuery)
+      .updated(toolbarRows => this.toolbarRowTemplates$.next(toolbarRows))
+      .bindUntil(this.destroy$);
+  }
+
+  public ngAfterViewInit(): void {
+
+    MatTableDataContextBindingBuilder
+      .start(this.dataContext$)
+      .withSorts(this.tableModel.sorts$)
+      .withPaginator(of(this.matPaginator))
+      .bindUntil(this.destroy$);
+
+    QueryListBinding
+      .of(this.rowsQuery)
+      .updated(rows => this.rows$.next(rows))
+      .bindUntil(this.destroy$);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * @deprecated
+   */
+  @Input()
+  public set toolbarTemplate(template: TemplateRef<any>) {
+    this.toolbarRowTemplates$.next([template]);
+  }
+
+  @Input()
+  public set data(data: Array<any> | IDataSource<any> | IDataContext<any>) {
+
+    this.autoCleanUp();
+
+    let dc: IDataContext<any>;
+
+    if (data instanceof Array) {
+      dc = DataContextBuilder.start()
+        .localSort()
+        .buildLocal(data, this.idField); // Potential Memory leak (See autoCleanUp)
+      dc.start();
+    } else if (isDataSource(data)) {
+      dc = DataContextBuilder.start()
+        .localSort()
+        .reloadOnLocalChanges()
+        .build(data); // Potential Memory leak (See autoCleanUp)
+      dc.start();
+    } else if (isDataContext(data)) {
+      dc = data;
+    } else if (data === null || data === undefined) {
+      dc = DataContextBuilder.start().buildEmpty();
+    } else {
+      throw new Error('The data must either be an Array, IDataSource or IDataContext, but was: ' + (typeof data));
+    }
+    this.dataContext = dc;
+  }
+
+  protected onDataContextSet(data: IDataContext<any>): void {
+    this.total$ = data.total.pipe(
+      map(total => total ? total + '' : '∞')
+    );
+
+    this.setupSelectionLifeCycle(data);
+
+    // this.selectionModel.clear(); // TODO Support changeable data-context for static array use case
+
+    if (this.isContinuable) {
+      this.canLoadMore$ = combineLatest([data.loading, this.dataContinuable.hasMoreData]).pipe(
+        map(([loading, hasMoreData]) => !loading && hasMoreData)
+      );
+    } else {
+      this.canLoadMore$ = of(false);
+    }
+  }
+
+  @Input()
+  public set displayedColumns(displayedColumns: string[]) {
+    this.tableModel.displayedColumns = displayedColumns;
+  }
+
+  public get displayedColumns(): string[] {
+    return this.tableModel.displayedColumns;
+  }
+
+  /** Indicates if selection column is shown. */
+  @Input()
+  public set selectionVisible(visible: boolean) {
+    this.tableModel.selectionVisible = visible;
+  }
+
+  public get selectionVisible(): boolean {
+    return this.tableModel.selectionVisible;
+  }
+
+  /*
+  @Output()
+  public get activeItem(): Observable<any> {
+    return this.elderTableActivation.activeItem$;
+  }*/
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public requestMoreDataZoned(event: any): void {
+
+    if (this.dataContinuable.hasMoreDataSnapshot) {
+
+      if (this.dataContinuable.snapshot.isLoading) {
+        this.loadNextQueued = true;
+      } else {
+        this.zone.run(() => {
+          this.dataContinuable.loadMore()
+            .subscribe(
+              loaded => {
+                if (this.loadNextQueued) {
+                  this.loadNextQueued = false;
+                  this.requestMoreDataZoned(event);
+                }
+              }
+            );
+        });
+      }
+    } else {
+      this.loadNextQueued = false;
+    }
+  }
+
+  public get trackByFn(): TrackByFunction<any> {
+    return (index: number, entity: any) => this.getId(entity);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private setupSelectionLifeCycle(data: IDataContext<any>): void {
+
+    if (this.selectionLifeCycle) {
+      this.selectionLifeCycle.unsubscribe(); // Clean up previous sub
+    }
+
+    this.selectionLifeCycle = data.data.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(newData => {
+
+      if (this.keepSelection) {
+        // If keep selection enabled
+        if (this.selectionModel.hasValue) {
+
+          // Check that all selected values are still present or remove them
+          const existingIds = new Set<any>(
+            newData
+              .map(d => this.getId(d))
+          );
+
+          const noLongerAvailableIds = this.selectionModel.selectionSnapshot
+            .map(selected => this.getId(selected))
+            .filter(selectedId => !existingIds.has(selectedId));
+
+          this.selectionModel.deselectIds(noLongerAvailableIds);
+        }
+      } else {
+        this.selectionModel.clear();
+      }
+    });
+  }
+
+
+}

package/src/lib/components/data-view/table/elder-table-column.directive.ts

@@ -0,0 +1,29 @@
+import {Directive, Input} from '@angular/core';
+import {CdkColumnDef} from '@angular/cdk/table';
+import {ColumnPositionSpec} from './model/elder-column-layout';
+
+@Directive({
+  selector: 'th[elderColumnDef]'
+})
+export class ElderTableColumnDirective {
+
+  private _columnPosition: ColumnPositionSpec;
+
+  constructor(
+    public readonly cdkColumn: CdkColumnDef
+  ) { }
+
+  /**
+   * Define the relative column position in the table
+   * Usage example:
+   * columnPosition="after:name"
+   */
+  // @Input()
+  // public set columnPosition(val: ColumnPositionSpec) {
+  //   this._columnPosition = val;
+  // }
+
+  // public get columnPosition(): ColumnPositionSpec {
+  //   return this._columnPosition;
+  // }
+}

package/src/lib/components/data-view/table/elder-table-extension.directive.ts

@@ -0,0 +1,107 @@
+import {AfterContentInit, ContentChildren, Directive, Host, Input, OnDestroy, Optional, QueryList, SkipSelf} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {MatColumnDef, MatRowDef} from '@angular/material/table';
+import {CdkColumnDef, CdkRowDef} from '@angular/cdk/table';
+import {Subject} from 'rxjs';
+import {ElderTableProviders} from './model/elder-table-model-provider';
+import {ElderTableModel} from './model/elder-table-model';
+import {ElderTableModelQueryGroup} from './model/elder-table-model-query-group';
+import {MatSort} from '@angular/material/sort';
+import {ElderTableColumnDirective} from './elder-table-column.directive';
+import {ColumnPositionSpec} from './model/elder-column-layout';
+
+
+/**
+ * Allows to extend an ElderTable from a parent component.
+ *
+ */
+@Directive({
+  selector: '[elderTableExtension]',
+  providers: [
+    ElderTableProviders.ExistingOrNewTableModel
+  ]
+})
+export class ElderTableExtensionDirective implements AfterContentInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  /**
+   * The index of this table group extension
+   * @private
+   */
+  private readonly _extensionGroupIndex: number;
+
+  @ContentChildren(MatColumnDef)
+  public columnDefsQuery: QueryList<CdkColumnDef>;
+
+  @ContentChildren(ElderTableColumnDirective)
+  public elderColumnsQuery: QueryList<ElderTableColumnDirective>;
+
+  @ContentChildren(MatRowDef)
+  public rowDefsQuery: QueryList<CdkRowDef<any>>;
+
+  @Input()
+  public columnsPosition: ColumnPositionSpec = ColumnPositionSpec.relativeToPrevGroup('start');
+
+  private readonly destroy$ = new Subject<void>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly tableModel: ElderTableModel,
+    @Optional() private readonly _matSort: MatSort,
+    @Optional() @SkipSelf() private readonly parentExtension: ElderTableExtensionDirective,
+  ) {
+    this._extensionGroupIndex = (parentExtension?.extensionGroupIndex ?? 0) + 1;
+    if (this._matSort) {
+      this._matSort.disableClear = true;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngAfterContentInit(): void {
+    ElderTableModelQueryGroup
+      .start(this.tableModel, this.extensionGroupIndex)
+      .withColumnsPosition(this.columnsPosition)
+      .withColumnDefs(this.columnDefsQuery, this.elderColumnsQuery)
+      .withRowDefs(this.rowDefsQuery)
+      .withSort(this._matSort)
+      .bindUntil(this.destroy$);
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public get extensionGroupIndex(): number {
+    return this._extensionGroupIndex;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+}

package/src/lib/components/data-view/table/elder-table-root.directive.ts

@@ -0,0 +1,24 @@
+import { Directive } from '@angular/core';
+import {ElderTableProviders} from './model/elder-table-model-provider';
+
+/**
+ * Forces a new Elder Table Model, thus breaking this component and its children from a potential parent elder-table.
+ * With this, nested elder-tables are possible.
+ */
+@Directive({
+  selector: '[elderTableRoot]',
+  providers: [
+    ElderTableProviders.ClearTableModel
+  ]
+})
+export class ElderTableRootDirective {
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() { }
+
+}