@elderbyte/ngx-starter 14.11.0 → 14.11.1

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

@@ -0,0 +1,154 @@
+import {Directive, ElementRef, HostListener, Input, Renderer2} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject} from 'rxjs';
+import {ElderItemActivator} from './activation/elder-item-activator';
+
+@Directive({
+  selector: 'tr[elderTableRow]',
+  exportAs: 'elderTableRow'
+})
+export class ElderTableRowDirective<T> {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private _activated = false;
+  private _model: T;
+  private _tableActivation: ElderItemActivator<T>;
+
+  private readonly focused$ = new BehaviorSubject<boolean>(false);
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly rowRef: ElementRef<HTMLTableRowElement>,
+    private readonly renderer: Renderer2
+  ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Host Listener                                                           *
+   *                                                                         *
+   **************************************************************************/
+
+  @HostListener('focus', ['$event'])
+  public onFocus(event: any): void {
+    this.focused$.next(true);
+    if (this.tableActivation) {
+      this.tableActivation.activate(this._model);
+    }
+  }
+
+  @HostListener('blur', ['$event'])
+  public onBlur(event: any): void {
+    this.focused$.next(false);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Host Bindings                                                           *
+   *                                                                         *
+   **************************************************************************/
+
+  public get activated() {
+    return this._activated;
+  }
+
+  public set activated(value: boolean) {
+    if (this._activated !== value) {
+      this._activated = value;
+      this.activatedClassEnabled(value);
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input('elderTableRow')
+  public set model(model: T) {
+    this._model = model;
+  }
+
+  public get model(): T {
+    return this._model;
+  }
+
+  public get tableActivation(): ElderItemActivator<T> {
+    return this._tableActivation;
+  }
+
+  public get hasFocus(): boolean {
+    return this.focused$.getValue();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public bindTableActivation(activation: ElderItemActivator<T>): void {
+    if (this._tableActivation !== activation) {
+      this._tableActivation = activation;
+      this.enableRowFocus(!!this._tableActivation);
+      if (!activation) {
+        this.activated = false;
+      }
+    }
+  }
+
+  public bringToView(): void {
+    const row = this.rowRef.nativeElement;
+    // scroll-snap-align: start;
+    row.scrollIntoView(
+
+      {
+        block: 'nearest',   // vertical alignment
+        inline: 'nearest' // horizontal alignment
+      }
+    );
+  }
+
+  public foucs(): void {
+    const row = this.rowRef.nativeElement;
+    row.focus();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private enableRowFocus(enable: boolean): void {
+    // Make the rows focusable on click (but not on tabs)
+    if (enable) {
+      this.renderer.setAttribute(this.rowRef.nativeElement, 'tabIndex', '-1');
+    } else {
+      this.renderer.removeAttribute(this.rowRef.nativeElement, 'tabIndex');
+    }
+  }
+
+  private activatedClassEnabled(enabled: boolean): void {
+    const activatedClass = 'elder-table-row-activated';
+    if (enabled) {
+      this.renderer.addClass(this.rowRef.nativeElement, activatedClass);
+    } else {
+      this.renderer.removeClass(this.rowRef.nativeElement, activatedClass);
+    }
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import {Directive, Optional} from '@angular/core';
+import {MatSort} from '@angular/material/sort';
+import {ElderTableComponent} from './elder-table/elder-table.component';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+/**
+ * This directive projects marked content into a toolbar.
+ * @deprecated No longer required, ElderTableComponent natively supports this now.
+ */
+@Directive({selector: '[elderTableSort]'})
+export class ElderTableSortDirective {
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+  constructor() {
+    this.logger.warn('[elderTableSort] directive is no longer required. Use matSort on ElderTableComponent directly.');
+  }
+}

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

@@ -0,0 +1,95 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ElderTableComponent} from './elder-table/elder-table.component';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import {RouterModule} from '@angular/router';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {CdkTableModule} from '@angular/cdk/table';
+import {ElderInfiniteScrollModule} from '../../infinitescroll/elder-infinite-scroll.module';
+import {ElderPaginatorIntl} from './elder-paginator-intl';
+import {ElderDataCommonModule} from '../common/elder-data-common.module';
+import {ElderFormsDirectivesModule} from '../../forms/directives/elder-forms-directives.module';
+import {ElderTableSortDirective} from './elder-table-sort.directive';
+import {ElderNumberCellDirective} from './elder-number-cell.directive';
+import {ElderTableActivationDirective} from './activation/elder-table-activation.directive';
+import { ElderTableRowDirective } from './elder-table-row.directive';
+import { ElderTableExtensionDirective } from './elder-table-extension.directive';
+import { ElderTableColumnDirective } from './elder-table-column.directive';
+import { ElderTableRootDirective } from './elder-table-root.directive';
+import {ElderTableToolbarDirective} from './elder-table/elder-table-toolbar.directive';
+
+export * from './elder-number-cell.directive';
+export * from './elder-table/elder-table.component';
+export * from './elder-table-sort.directive';
+export * from './elder-table/elder-table-toolbar.directive';
+export * from './activation/elder-table-activation.directive';
+export * from './activation/elder-table-activation-options';
+export * from './elder-table-extension.directive';
+export * from './elder-table-root.directive';
+export * from './model/elder-table-model';
+export * from './model/elder-table-model-provider';
+export * from './model/elder-table-model-cdk-table-binding';
+export * from './model/elder-table-model-query-group';
+
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, FormsModule,
+
+    // Material
+    MatDividerModule,
+    MatCheckboxModule,
+    MatButtonModule, MatIconModule, MatBadgeModule,
+    MatProgressBarModule,
+    CdkTableModule, MatTableModule, MatPaginatorModule, MatSortModule,
+    MatDialogModule, MatTooltipModule, MatMenuModule,
+
+    // translations
+    TranslateModule, FlexLayoutModule,
+
+    ElderDataCommonModule,
+    ElderInfiniteScrollModule,
+    ElderFormsDirectivesModule,
+  ],
+  declarations: [
+    ElderTableComponent,
+    ElderTableToolbarDirective,
+    ElderTableSortDirective,
+    ElderNumberCellDirective,
+    ElderTableActivationDirective,
+    ElderTableRowDirective,
+    ElderTableExtensionDirective,
+    ElderTableColumnDirective,
+    ElderTableRootDirective
+  ],
+  exports: [
+    ElderTableComponent,
+    ElderTableToolbarDirective,
+    ElderDataCommonModule,
+    ElderTableSortDirective,
+    ElderNumberCellDirective,
+    ElderTableActivationDirective,
+    ElderTableExtensionDirective,
+    ElderTableRootDirective
+  ],
+  providers: [
+    {
+      provide: MatPaginatorIntl, deps: [TranslateService],
+      useClass: ElderPaginatorIntl
+    }
+  ]
+})
+export class ElderTableModule { }

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

@@ -0,0 +1,164 @@
+import {CdkColumnDef} from '@angular/cdk/table';
+import {ElderTableColumnDirective} from '../elder-table-column.directive';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {naturalValueComparator} from '../../../../common/data/field-comparator';
+
+export type ColumnPositionInsert = 'start' | 'end' | 'before' | 'after';
+
+export class ColumnPositionSpec {
+
+  public static relativeToColumn(col: string, position: ColumnPositionInsert): ColumnPositionSpec {
+    return new ColumnPositionSpec(position, col);
+  }
+
+  public static relativeToPrevGroup(position: ColumnPositionInsert): ColumnPositionSpec {
+    return new ColumnPositionSpec(position, null);
+  }
+
+  constructor(
+    public readonly position: ColumnPositionInsert,
+    public readonly relativeTo: string | null
+  ) { }
+}
+
+
+export class ElderColumnGroup {
+  constructor(
+    public readonly groupIndex: number,
+    public readonly columnsPosition: ColumnPositionSpec,
+    public readonly columns: ElderTableColumnDirective[]
+  ) { }
+}
+
+export interface ArrayBounds {
+  startIndex: number;
+  endIndex: number;
+}
+
+export class ElderColumnLayout {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public layoutColumns(
+    colGroups: ElderColumnGroup[]
+  ): CdkColumnDef[] {
+    const sortedCols = this.renderColumns(colGroups);
+    // Support absolute column positioning
+    const cdkCols = sortedCols.map(col => col.cdkColumn);
+    return cdkCols;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private renderColumns(colGroups: ElderColumnGroup[]): ElderTableColumnDirective[] {
+
+    const groupHierarchy = this.sortGroupsByIndex(colGroups);
+
+    const sorted: ElderTableColumnDirective[] = [];
+
+    // Now we can insert groups in defined order
+    let previousIndex = <ArrayBounds>{
+      startIndex: 0,
+      endIndex: 0
+    };
+
+    for (const grp of groupHierarchy) {
+      // grp defined position relative to prev group
+      previousIndex = this.insertColumnsAt(
+        sorted,
+        grp.columns,
+        grp.columnsPosition,
+        previousIndex
+      );
+    }
+    return sorted;
+  }
+
+  private insertColumnsAt(
+    existingColumns: ElderTableColumnDirective[],
+    groupItems: ElderTableColumnDirective[],
+    positionSpec: ColumnPositionSpec,
+    previousGroup: ArrayBounds
+  ): ArrayBounds {
+
+    let insertIndex: number;
+
+    if (positionSpec.relativeTo) {
+      insertIndex = this.calcInsertIndexRelativeToColumn(positionSpec.position, positionSpec.relativeTo, existingColumns);
+    } else {
+      insertIndex = this.calcInsertIndexRelativeToPreviousGroup(positionSpec.position, existingColumns, previousGroup);
+    }
+
+    existingColumns.splice(insertIndex, 0, ...groupItems);
+    return <ArrayBounds>{
+      startIndex: insertIndex,
+      endIndex: insertIndex + groupItems.length
+    };
+  }
+
+  private calcInsertIndexRelativeToColumn(
+    position: ColumnPositionInsert,
+    relativeToCol: string,
+    existingColumns: ElderTableColumnDirective[]
+  ): number {
+
+    const relativeIndex = existingColumns
+      .findIndex(c => c.cdkColumn.name === relativeToCol);
+
+    switch (position) {
+      case 'start':
+      case 'after':
+        // after relative
+        return relativeIndex + 1;
+      case 'before':
+      case 'end':
+        // before relative
+        return relativeIndex;
+    }
+  }
+
+  private calcInsertIndexRelativeToPreviousGroup(
+    position: ColumnPositionInsert,
+    existingColumns: ElderTableColumnDirective[],
+    previousGroup: ArrayBounds
+  ): number {
+    switch (position) {
+      case 'start':
+        return 0;
+      case 'end':
+        return existingColumns.length;
+      case 'after':
+        // after relative to previous group
+        return previousGroup.endIndex;
+      case 'before':
+        // before relative to previous group
+       return previousGroup.startIndex;
+    }
+  }
+
+
+  private sortGroupsByIndex(colGroups: ElderColumnGroup[]): ElderColumnGroup[] {
+    return  colGroups
+      .sort((a, b) => {
+        return naturalValueComparator(a.groupIndex, b.groupIndex);
+      }).reverse();
+  }
+
+}
+

package/src/lib/components/data-view/table/model/elder-table-model-cdk-table-binding.ts

@@ -0,0 +1,115 @@
+import {CdkColumnDef, CdkRowDef, CdkTable} from '@angular/cdk/table';
+import {ElderTableModel} from './elder-table-model';
+import {Observable} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+/**
+ * Binds the elder table model to the CDK table.
+ */
+export class ElderTableModelCdkTableBinding {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  private cdkTable: CdkTable<any>;
+
+  private _currentColumnDefs: CdkColumnDef[] = [];
+  private _currentRowDefs: CdkRowDef<any>[] = [];
+
+  /***************************************************************************
+   *                                                                         *
+   * Static Builder                                                          *
+   *                                                                         *
+   **************************************************************************/
+
+  public static of(tableModel: ElderTableModel): ElderTableModelCdkTableBinding {
+    return new ElderTableModelCdkTableBinding(tableModel);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly tableModel: ElderTableModel
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public table(table: CdkTable<any>): this {
+    if (!table) {
+      throw new Error('CdkTable must not be null!');
+    }
+    this.cdkTable = table;
+    return this;
+  }
+
+  public bindUntil(
+    destroy$: Observable<any>
+  ): this {
+
+    if (!this.cdkTable) {
+      throw new Error('CdkTable must be defined to start binding. Use .table(cdkTable)!');
+    }
+
+    this.tableModel.columnDefs$.pipe(
+      takeUntil(destroy$),
+    ).subscribe(columnDefs => this.applyColumnDefs(columnDefs));
+
+    this.tableModel.rowDefs$.pipe(
+      takeUntil(destroy$),
+    ).subscribe(rowDefs => this.applyRowDefs(rowDefs));
+
+    return this;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private applyColumnDefs(columnDefs: CdkColumnDef[]): void {
+
+    // remove columns not desired
+    this._currentColumnDefs
+      .filter(currentColumnDef => columnDefs.indexOf(currentColumnDef) === -1)
+      .forEach(columnToRemove => this.cdkTable.removeColumnDef(columnToRemove));
+
+    // add missing columns
+    columnDefs
+      .filter(desired => this._currentColumnDefs.indexOf(desired) === -1)
+      .forEach(columnToAdd => this.cdkTable.addColumnDef(columnToAdd));
+
+    // remember new state
+    this._currentColumnDefs = columnDefs;
+  }
+
+  private applyRowDefs(rowDefs: CdkRowDef<any>[]): void {
+    // remove columns not desired
+    this._currentRowDefs
+      .filter(currentRowDef => rowDefs.indexOf(currentRowDef) === -1)
+      .forEach(rowToRemove => this.cdkTable.removeRowDef(rowToRemove));
+
+    // add missing columns
+    rowDefs
+      .filter(desired => this._currentRowDefs.indexOf(desired) === -1)
+      .forEach(rowToAdd => this.cdkTable.addRowDef(rowToAdd));
+
+    // remember new state
+    this._currentRowDefs = rowDefs;
+  }
+}
+

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

@@ -0,0 +1,49 @@
+import {ElderTableModel} from './elder-table-model';
+import {Optional, Provider, SkipSelf} from '@angular/core';
+
+export function existingOrNewElderTableModel(
+  modelProvider: ElderTableModel | null
+): ElderTableModel {
+  return modelProvider ?? newElderTableModel();
+}
+
+export function newElderTableModel(): ElderTableModel {
+  return new ElderTableModel();
+}
+
+export class ElderTableProviders {
+
+  /**
+   * Uses the existing ElderTableModel from a parent if available.
+   * Otherwise, creates a new ElderTableModel and provides it.
+   */
+  public static readonly ExistingOrNewTableModel = <Provider>{
+    provide: ElderTableModel,
+    useFactory: existingOrNewElderTableModel,
+    deps: [[new Optional(), new SkipSelf(), ElderTableModel]]
+  };
+
+  /**
+   * Creates a new ElderTableModel root and provides it,
+   * even if there is an existing parent table model.
+   */
+  public static readonly NewTableModelRoot = <Provider>{
+    provide: ElderTableModel,
+    useFactory: newElderTableModel
+  };
+
+  /**
+   * If there is an existing ElderTableModel service provided, clears it.
+   *
+   * Child components will therefore be blocked from accessing any parent TableModel service
+   * and are instead forced to create their own.
+   *
+   * This supports nesting ElderTable without sharing the table model / columns.
+   */
+  public static readonly ClearTableModel = <Provider>{
+    provide: ElderTableModel,
+    useValue: null
+  };
+}
+
+