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

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

@@ -0,0 +1,308 @@
+import {
+  AfterViewInit,
+  Directive,
+  HostListener,
+  Input,
+  OnDestroy, Output,
+} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {ElderTableRowDirective} from '../elder-table-row.directive';
+import {switchMap, takeUntil, tap} from 'rxjs/operators';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {ElderTableComponent} from '../elder-table/elder-table.component';
+import {ElderTableActivationOptions} from './elder-table-activation-options';
+import {ElderItemActivator} from './elder-item-activator';
+
+@Directive({
+  selector: 'elder-table[elderTableActivation]',
+  exportAs: 'elderTableActivation'
+})
+export class ElderTableActivationDirective<T> implements ElderItemActivator<T>, AfterViewInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly unsubscribe$ = new Subject<void>();
+
+  public readonly activeItem$ = new BehaviorSubject<T>(null);
+
+  @Input('elderTableActivation')
+  public activationOptions: ElderTableActivationOptions = {};
+
+  private _data: T[] = [];
+
+  private readonly rows$ = new BehaviorSubject<ElderTableRowDirective<T>[]>([]);
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly elderTable: ElderTableComponent
+  ) { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngAfterViewInit(): void {
+
+    const rows$ = this.elderTable.rows$;
+    const data$ = this.elderTable.dataContext$.pipe(
+      switchMap(dc => dc.data),
+      tap(data => this._data = data)
+    );
+
+    combineLatest([rows$, data$]).pipe(
+      takeUntil(this.unsubscribe$)
+    ).subscribe(
+      ([rows, data]) => {
+        this.rows$.next(
+          this.rowDataUpdated(rows, data)
+        );
+      }
+    );
+
+    combineLatest([this.rows$, this.activeItem$]).pipe(
+      takeUntil(this.unsubscribe$)
+    ).subscribe(
+      ([rows, activeItem]) => this.updateRowsActivation(rows, activeItem)
+    );
+  }
+
+  private updateRowsActivation(rows: ElderTableRowDirective<T>[], activeItem: T): void {
+    const activeId = this.getId(activeItem);
+    rows.forEach(row => {
+      this.updateRowActivation(row, activeId);
+    });
+  }
+
+  private updateRowActivation(row: ElderTableRowDirective<T>, activeId: any): void {
+    if (row.model) {
+      if (this.itemEqualsId(row.model, activeId)) {
+        if (!row.activated) {
+          row.activated = true;
+          this.logger.debug('Activated row: ', row);
+          if (!row.hasFocus) {
+            row.bringToView();
+          }
+        }
+      } else {
+        row.activated = false;
+      }
+    } else {
+      row.activated = false;
+    }
+  }
+
+  private rowDataUpdated(
+    rows: ElderTableRowDirective<T>[],
+    data: T[]
+  ): ElderTableRowDirective<T>[] {
+    // this.logger.debug('Found rows:', rows);
+    rows.forEach(row => {
+      row.bindTableActivation(this);
+    });
+    this.handleAutoActivations();
+    return rows;
+  }
+
+  public ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+    // this.elderTable.rows$.getValue().forEach(r => r.bindTableActivation(null));
+  }
+
+  /***************************************************************************
+   *                                                                         *.
+   * Host Listeners                                                          *
+   *                                                                         *
+   **************************************************************************/
+
+  @HostListener('keydown', ['$event'])
+  public onKeydown(event: KeyboardEvent) {
+    let newActiveItem: T;
+    if (event.key === 'ArrowDown') {
+      newActiveItem = this.nextRowItem();
+    } else if (event.key === 'ArrowUp') {
+      newActiveItem = this.previousRowItem();
+    }
+
+    if (newActiveItem) {
+      this.focusAndActivate(newActiveItem);
+    }
+
+    const active = this.activeItem;
+    if (active) {
+      if (event.key === 'Enter') {
+        this.elderTable.onItemClick(active);
+        event.stopPropagation();
+      } else if (event.key === 'Spacebar' || event.key === ' ') {
+        this.elderTable.selectionModel.toggle(active);
+        event.stopPropagation();
+      }
+    }
+  }
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Output()
+  public get activeItemChange(): Observable<T> {
+    return this.activeItem$;
+  }
+
+  public get activeItem(): T {
+    return this.activeItem$.getValue();
+  }
+
+  @Input()
+  public set activeItem(item: T) {
+    if (item !== this.activeItem) {
+      this.activeItem$.next(item);
+      this.logger.debug('Set active item to ', item);
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public activate(item: T): void {
+    this.activeItem = item;
+  }
+
+  public focusAndActivate(item: T): void {
+    const row = this.getRowForItem(item);
+    if (row) {
+      row.foucs(); // Focus will auto activate the row
+    }
+  }
+
+  public isItemActive(item: T): boolean {
+    if (this.activeItem) {
+      return this.itemEquals(this.activeItem, item);
+    } else {
+      return false;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private getRowForItem(item: T): ElderTableRowDirective<T> | null {
+    const rows = this.rows$.getValue();
+    return rows.find(r => r.model === item);
+  }
+
+  private handleAutoActivations(): void {
+    if (!this.hasActiveItem || this.activationOptions.mode === 'always') {
+      switch (this.activationOptions.row) {
+        case 'none': break;
+        case 'first': this.activateFirst(); break;
+        case 'last': this.activateLast(); break;
+      }
+    }
+  }
+
+  private get hasActiveItem(): boolean {
+    return !!this.activeItem;
+  }
+
+  private activateFirst(): void {
+    const item = this.getItemAtIndex(0);
+    if (item) {
+      this.activate(item);
+    }
+  }
+
+  private activateLast(): void {
+    if (this._data) {
+      const item = this.getItemAtIndex(this._data.length - 1);
+      if (item) {
+        this.activate(item);
+      }
+    }
+  }
+
+  private previousRowItem(): T {
+    const rows = this._data;
+    let currentIndex = this.getCurrentIndex();
+    if (currentIndex > 0) {
+      --currentIndex;
+    } else {
+      if (this.activationOptions.loop) {
+        currentIndex = rows.length - 1;
+      }
+    }
+    return this.getItemAtIndex(currentIndex);
+  }
+
+  private nextRowItem(): T {
+    const rows = this._data;
+    let currentIndex = this.getCurrentIndex();
+
+    if (currentIndex < (rows.length - 1)) {
+      ++currentIndex;
+    } else {
+      if (this.activationOptions.loop) {
+        currentIndex = 0;
+      }
+    }
+    return this.getItemAtIndex(currentIndex);
+  }
+
+  private getCurrentIndex(): number {
+    const activeItem = this.activeItem;
+    if (activeItem) {
+      return this.findItemIndex(activeItem);
+    } else {
+      return -1;
+    }
+  }
+
+  private getItemAtIndex(index: number): T | undefined {
+    return  this._data[index];
+  }
+
+  private findItemIndex(item: T): number {
+    const needleId = this.getId(item);
+    return this._data.findIndex(itm => this.itemEqualsId(itm, needleId));
+  }
+
+  private itemEquals(a: T, b: T): boolean {
+    return this.getId(a) === this.getId(b);
+  }
+
+  private itemEqualsId(a: T, needleId: any): boolean {
+    return this.getId(a) === needleId;
+  }
+
+  private getId(item: T): any {
+    if (item) {
+      const dc = this.elderTable.dataContext$.getValue();
+      return dc?.dataSource?.getId(item);
+    } else {
+      return item;
+    }
+  }
+
+}

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

@@ -0,0 +1,26 @@
+import {AfterViewInit, Directive, Optional, ViewChild} from '@angular/core';
+import {MatSort, MatSortHeader} from '@angular/material/sort';
+import {ElderTableComponent} from './elder-table/elder-table.component';
+import {MatColumnDef} from '@angular/material/table';
+
+/**
+ * This directive is meant to be placed on table cells containing numbers.
+ * It will right align its content.
+ */
+@Directive({
+  selector: '[elderNumberCell]',
+  host: {
+    '[class.elder-number-cell]': 'true'
+  }
+})
+export class ElderNumberCellDirective {
+
+  constructor(
+    @Optional() private matSortHeader: MatSortHeader
+  ) {
+    if (matSortHeader) {
+      matSortHeader.arrowPosition = 'before';
+    }
+  }
+
+}

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

@@ -0,0 +1,92 @@
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import {Injectable} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+@Injectable()
+export class ElderPaginatorIntl extends MatPaginatorIntl {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly _itemCountSeparatorKey = 'paginator.itemCountSeparator';
+  private readonly _itemsPerPageKey = 'paginator.itemsPerPage';
+  private readonly _firstPageLabelKey = 'paginator.firstPage';
+  private readonly _lastPageKey = 'paginator.lastPage';
+  private readonly _nextPageKey = 'paginator.nextPage';
+  private readonly _previousPageKey = 'paginator.previousPage';
+
+  private itemCountSeparatorLabel: string;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  public constructor(
+    private translate: TranslateService
+  ) {
+    super();
+
+    this.translate.onLangChange.subscribe((e: Event) => {
+      this.translateLabels();
+    });
+
+    this.translateLabels();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public getRangeLabel = (
+    page: number,
+    pageSize: number,
+    length: number
+  ): string => {
+
+    if (length === 0 || pageSize === 0) {
+      return `0 ${this.itemCountSeparatorLabel} ${length}`;
+    }
+
+    length = Math.max(length, 0);
+
+    const startIndex: number = page * pageSize;
+    const endIndex: number = startIndex < length
+      ? Math.min(startIndex + pageSize, length)
+      : startIndex + pageSize;
+
+    return `${startIndex + 1} - ${endIndex} ${this.itemCountSeparatorLabel} ${length}`;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private translateLabels(): void {
+
+    const itemCountSeparatorLabel = this.translate.instant(this._itemCountSeparatorKey);
+    const itemsPerPageLabel = this.translate.instant(this._itemsPerPageKey);
+    const firstPageLabel = this.translate.instant(this._firstPageLabelKey);
+    const lastPageLabel = this.translate.instant(this._lastPageKey);
+    const nextPageLabel = this.translate.instant(this._nextPageKey);
+    const previousPageLabel = this.translate.instant(this._previousPageKey);
+
+    this.itemCountSeparatorLabel = itemCountSeparatorLabel !== this._itemCountSeparatorKey ? itemCountSeparatorLabel : 'of';
+    this.itemsPerPageLabel = itemsPerPageLabel !== this._itemsPerPageKey ? itemsPerPageLabel : 'Items per page';
+    this.firstPageLabel = firstPageLabel !== this._firstPageLabelKey ? firstPageLabel : 'First page';
+    this.lastPageLabel = lastPageLabel !== this._lastPageKey ? lastPageLabel : 'Last page';
+    this.nextPageLabel = nextPageLabel !== this._nextPageKey ? nextPageLabel : 'Next page';
+    this.previousPageLabel = previousPageLabel !== this._previousPageKey ? previousPageLabel : 'Previous page';
+
+    this.changes.next();
+  }
+
+}

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

@@ -0,0 +1,14 @@
+import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
+
+/**
+ * This directive projects marked content into a toolbar.
+ */
+@Directive({selector: '[elderTableToolbar]'})
+export class ElderTableToolbarDirective {
+
+  constructor(
+    public templateRef: TemplateRef<any>,
+    public viewContainer: ViewContainerRef
+  ) {
+  }
+}

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

@@ -0,0 +1,99 @@
+<div class="layout-col full elder-table"
+     [class.elder-mat-table-container]="!embedded"
+     [class.mat-elevation-z5]="float"
+     [class.elder-mat-table-flat]="!embedded && !float"
+>
+
+  <!-- Toolbar Rows -->
+  <ng-container *ngFor="let toolbarRowTemplate of toolbarRowTemplates$ | async">
+    <ng-template *ngTemplateOutlet="toolbarRowTemplate; context: {$implicit: this}">
+    </ng-template>
+  </ng-container>
+
+  <!-- Scrollable Table -->
+  <div class="layout-col scrollable elder-table-scroll"
+       infiniteScroll
+       [eventThrottle]="150"
+       [offsetFactor]="2"
+       [ignoreScrollEvent]="!isContinuable || !(canLoadMore$ | async)"
+       (closeToEnd)="requestMoreDataZoned($event)"
+  >
+    <table
+      mat-table
+      class="elder-mat-inner-table"
+      [trackBy]="trackByFn"
+      [dataSource]="$any(dataContext$ | async)"
+      [elderDataContextSelection]="dataContext$ | async" #dataSelection="elderDataContextSelection"
+      [elderDataContextSelectionModel]="selectionModel"
+    >
+
+      <!-- selection Column -->
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <elder-selection-master-checkbox></elder-selection-master-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let entity">
+          <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selectionModel.toggle(entity) : null"
+                        [checked]="selectionModel.observeSelection(entity) | async"
+                        [disabled]="!selectionModel.isSelectable(entity)"
+                        class="elder-table-checkbox"
+                        [class.elder-table-checkbox-visible]="(dataSelection.selectionState$ | async).anySelected"
+          >
+          </mat-checkbox>
+        </td>
+        <td mat-footer-cell *matFooterCellDef></td>
+      </ng-container>
+
+      <ng-container *ngIf="(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner">
+        <tr mat-header-row *matHeaderRowDef="displayedColumnsInner; sticky: true"></tr>
+        <tr mat-row class="elder-table-row"
+            *matRowDef="let entity; columns: displayedColumnsInner;"
+            [elderTableRow]="entity"
+            [class.dense]="dense"
+            [class.elder-row-hidden]="hiddenField && entity[hiddenField]"
+            [class.elder-row-removing]="removingField && entity[removingField]"
+            [class.elder-table-row-selected]="interactionMode === 'selection' && selectionModel.observeSelection(entity) | async"
+            (click)="onItemClick(entity)"
+            (dblclick)="onItemDoubleClick(entity)"
+        >
+        </tr>
+        <ng-container *ngIf="showFooter">
+          <tr mat-footer-row *matFooterRowDef="displayedColumnsInner; sticky: true"></tr>
+        </ng-container>
+      </ng-container>
+    </table>
+  </div>
+
+  <elder-data-context-state-indicator class="flex-none" [dataContext]="dataContext">
+  </elder-data-context-state-indicator>
+
+  <mat-progress-bar class="flex-none"
+                    [mode]="(dataContext?.loading | async) ? 'indeterminate' : 'determinate'"
+                    [color]="((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'">
+  </mat-progress-bar>
+
+  <!-- Optional Paginator Toolbar -->
+  <mat-paginator #matPaginator *ngIf="isActivePaged && (dataActivePaged.page | async) as page"
+                 class="flex-none"
+                 [length]="dataContext?.total | async"
+                 [pageIndex]="page?.index"
+                 [pageSize]="page?.size"
+                 [pageSizeOptions]="pageSizeOptions">
+  </mat-paginator>
+
+  <!-- Optional Continuation Footer -->
+  <div *ngIf="isContinuable" class="layout-row flex-none place-end-center gap-md elder-table-footer">
+
+    <span class="mat-caption noselect" style="color: gray">
+      {{(dataContext?.data | async)?.length}} / {{total$ | async}}
+    </span>
+
+    <button mat-icon-button type="button" color="primary"
+            [disabled]="!(canLoadMore$ | async)"
+            (click)="dataContinuable.loadMore()">
+      <mat-icon>keyboard_arrow_down</mat-icon>
+    </button>
+  </div>
+
+</div>