@elderbyte/ngx-starter 14.11.0 → 14.11.1

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

@@ -0,0 +1,153 @@
+import {combineLatest, EMPTY, Observable, of} from 'rxjs';
+import {QueryListBinding} from '../../../../common/utils/query-list-binding';
+import {CdkColumnDef, CdkRowDef} from '@angular/cdk/table';
+import {ElderTableGroup, ElderTableModel} from './elder-table-model';
+import {QueryList} from '@angular/core';
+import {MatSort} from '@angular/material/sort';
+import {map, takeUntil, tap} from 'rxjs/operators';
+import {ColumnPositionInsert, ColumnPositionSpec, ElderColumnGroup} from './elder-column-layout';
+import {ElderTableColumnDirective} from '../elder-table-column.directive';
+
+export class ElderTableModelQueryGroup {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private columnDefsQuery: QueryList<CdkColumnDef>;
+  private elderColumnQuery: QueryList<ElderTableColumnDirective>;
+  private rowDefsQuery: QueryList<CdkRowDef<any>>;
+
+  private matSort: MatSort;
+  private columnsPosition: ColumnPositionSpec;
+
+  /***************************************************************************
+   *                                                                         *
+   * Static Builder                                                          *
+   *                                                                         *
+   **************************************************************************/
+
+  public static start(
+    tableModel: ElderTableModel,
+    groupIndex: number,
+  ): ElderTableModelQueryGroup {
+    return new ElderTableModelQueryGroup(tableModel, ElderTableGroup.create(groupIndex));
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly tableModel: ElderTableModel,
+    public readonly group: ElderTableGroup
+  ) {  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public withColumnDefs(
+    columnDefs: QueryList<CdkColumnDef>,
+    elderColumns: QueryList<ElderTableColumnDirective>,
+  ): this {
+    this.columnDefsQuery = columnDefs;
+    this.elderColumnQuery = elderColumns;
+    return this;
+  }
+
+  public withRowDefs(rowDefs: QueryList<CdkRowDef<any>>): this {
+    this.rowDefsQuery = rowDefs;
+    return this;
+  }
+
+  public withSort(matSort: MatSort): this {
+    this.matSort = matSort;
+    return this;
+  }
+
+  public withColumnsPosition(positionSpec: ColumnPositionSpec): this {
+    this.columnsPosition = positionSpec;
+    return this;
+  }
+
+  public bindUntil(
+    destroy$: Observable<any>
+  ): this {
+
+    destroy$.subscribe(() => this.tableModel.deRegisterGroup(this.group));
+    this.tableModel.registerGroup(this.group);
+
+    this.bindMatAndElderColumns(this.columnDefsQuery, this.elderColumnQuery, destroy$)
+      .subscribe(elderColumns => this.updateColumnDefs(elderColumns));
+
+    if (this.rowDefsQuery) {
+      QueryListBinding
+        .of(this.rowDefsQuery)
+        .updated(rowDefs => this.updateRowDefs(rowDefs))
+        .bindUntil(destroy$);
+    }
+
+    if (this.matSort) {
+      this.tableModel.updateSortGroup(
+        this.group,
+        this.matSort
+      );
+    }
+
+    return this;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private bindMatAndElderColumns(
+    columnDefsQuery: QueryList<CdkColumnDef>,
+    elderColumnQuery: QueryList<ElderTableColumnDirective>,
+    destroy$: Observable<any>
+  ): Observable<ElderTableColumnDirective[]> {
+    const columnDefs$ = columnDefsQuery ? QueryListBinding.asColdObservable(columnDefsQuery) : of([]);
+    const elderColumns$ = elderColumnQuery ? QueryListBinding.asColdObservable(elderColumnQuery) : of([]);
+    return combineLatest([columnDefs$, elderColumns$]).pipe(
+      takeUntil(destroy$),
+      map(([columnDefs, elderColumns]) => this.asElderColumnsOnly(columnDefs, elderColumns))
+    );
+  }
+
+  private asElderColumnsOnly(
+    columnDefs: CdkColumnDef[],
+    elderColumns: ElderTableColumnDirective[]
+  ): ElderTableColumnDirective[] {
+    // TODO Support elderColumns definitions!
+    return this.convertToElderColumns(columnDefs);
+  }
+
+  private convertToElderColumns(columns: CdkColumnDef[]): ElderTableColumnDirective[] {
+    return columns.map(c => new ElderTableColumnDirective(c));
+  }
+
+  private updateColumnDefs(columns: ElderTableColumnDirective[]): void {
+    this.tableModel.updateColumnGroup(
+      this.group,
+      new ElderColumnGroup(this.group.index, this.columnsPosition, columns)
+    );
+  }
+
+  private updateRowDefs(rows: CdkRowDef<any>[]): void {
+    this.tableModel.updateRowDefs(
+      this.group,
+      rows
+    );
+  }
+
+
+}

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

@@ -0,0 +1,221 @@
+import {Injectable} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
+import {CdkColumnDef, CdkRowDef} from '@angular/cdk/table';
+import {map} from 'rxjs/operators';
+import {ReactiveMap} from '../../../../common/reactive-map';
+import {MatSort} from '@angular/material/sort';
+import {UuidUtil} from '../../../../common/utils/uuid-util';
+import {naturalValueComparator} from '../../../../common/data/field-comparator';
+import {CollectionUtil} from '../../../../common/utils/collection-util';
+import {ElderColumnGroup, ElderColumnLayout} from './elder-column-layout';
+
+export class ElderTableGroup {
+
+  public static create(
+    groupIndex: number
+  ): ElderTableGroup {
+    return ElderTableGroup.of(UuidUtil.weakUuid4(), groupIndex);
+  }
+
+  public static of(
+    id: string,
+    groupIndex: number
+  ): ElderTableGroup {
+    return new ElderTableGroup(id, groupIndex);
+  }
+
+  constructor(
+    public readonly id: string,
+    public readonly index: number
+  ) {
+  }
+}
+
+@Injectable()
+export class ElderTableModel<T = any> {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private readonly elderColumnLayout = new ElderColumnLayout();
+
+  private readonly _groups = new Map<string, ElderTableGroup>();
+  private readonly _columnGroups = new ReactiveMap<string, ElderColumnGroup>();
+  private readonly _rowDefGroups = new ReactiveMap<string, CdkRowDef<T>[]>();
+  private readonly _sortGroups = new ReactiveMap<string, MatSort>();
+
+  public readonly selectionVisible$ = new BehaviorSubject<boolean>(false);
+
+  /**
+   * The columns to display explicitly set by the user.
+   * We need to support inserting display columns by index or anchored to existing ones.
+   * before([columns])
+   * after()
+   * start()
+   * end([])
+   * @private
+   */
+  private readonly displayedColumns$ = new BehaviorSubject<string[]>(undefined);
+
+  public readonly displayedColumnsInner$: Observable<string[]>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+    this.displayedColumnsInner$ = this.renderDisplayedColumns(
+      this.displayedColumns$,
+      this.columnDefs$,
+      this.selectionVisible$
+    );
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public set selectionVisible(visible: boolean) {
+    this.selectionVisible$.next(visible);
+  }
+
+  public get selectionVisible(): boolean {
+    return this.selectionVisible$.getValue();
+  }
+
+  public set displayedColumns(columns: string[]) {
+    this.displayedColumns$.next(columns);
+  }
+
+  public get displayedColumns(): string[] {
+    return this.displayedColumns$.getValue();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Rendered Properties                                                     *
+   *                                                                         *
+   **************************************************************************/
+
+  public get columnDefs$(): Observable<CdkColumnDef[]> {
+    return this._columnGroups.values$.pipe(
+      map(groups => this.elderColumnLayout.layoutColumns(groups)),
+    );
+  }
+
+  public get rowDefs$(): Observable<CdkRowDef<T>[]> {
+    return this.sortAndFlatten(this._rowDefGroups);
+  }
+
+  public get sorts$(): Observable<MatSort[]> {
+    return this._sortGroups.values$;
+  }
+
+  // ---
+
+  private valuesSortedByGroupIndex<TValue>(myMap: Map<string, TValue>, groups: Map<string, ElderTableGroup>): TValue[] {
+    return Array.from(myMap.entries())
+      .sort(([a_key], [b_key]) => {
+        const grpAIndex = groups.get(a_key)?.index ?? 0;
+        const grpBIndex = groups.get(b_key)?.index ?? 0;
+        return naturalValueComparator(grpAIndex, grpBIndex);
+      }).map(([a_key, a_value]) => a_value);
+  }
+
+  private sortAndFlatten<TValue>(reactMap: ReactiveMap<string, TValue[]>): Observable<TValue[]> {
+    return reactMap.map$.pipe(
+      map(myMap => this.valuesSortedByGroupIndex(myMap, this._groups)),
+      map(columns => CollectionUtil.flatten(columns))
+    );
+  }
+
+  /*
+  public get sortHeaders$(): Observable<MatSortHeader[]> {
+    return this._sortGroups.values$.pipe(
+      map(groups => this.flattenDefs(groups))
+    );
+  }*/
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public registerGroup(group: ElderTableGroup): void { // TODO
+    this._groups.set(group.id, group);
+  }
+
+  public updateColumnGroup(group: ElderTableGroup, columnGroup: ElderColumnGroup): void {
+    this._columnGroups.set(group.id, columnGroup);
+  }
+
+  public updateRowDefs(group: ElderTableGroup, rows: CdkRowDef<T>[]): void {
+    this._rowDefGroups.set(group.id, rows);
+  }
+
+  public updateSortGroup(group: ElderTableGroup, sort: MatSort): void {
+    this._sortGroups.set(group.id, sort);
+  }
+
+  public clearColumnDefGroup(group: ElderTableGroup) {
+    this._columnGroups.delete(group.id);
+  }
+
+  public clearRowDefGroup(group: ElderTableGroup) {
+    this._rowDefGroups.delete(group.id);
+  }
+
+  public clearSortGroup(group: ElderTableGroup) {
+    this._sortGroups.delete(group.id);
+  }
+
+  public deRegisterGroup(group: ElderTableGroup) {
+    this.clearColumnDefGroup(group);
+    this.clearRowDefGroup(group);
+    this.clearSortGroup(group);
+    this._groups.delete(group.id);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private renderDisplayedColumns(
+    userDefinedColumns$: Observable<string[]>,
+    columnDefs$: Observable<CdkColumnDef[]>,
+    selectionVisible$: Observable<boolean>
+  ): Observable<string[]> {
+    return combineLatest([userDefinedColumns$, columnDefs$, selectionVisible$]).pipe(
+      map(([displayedColumns, columnDefs, selectionVisible]) => {
+        let columns = displayedColumns;
+        if (!columns) {
+          columns = [];
+          // If the user did not define columns to display
+          // Assume he wants all his own columns in given order
+          if (columnDefs) {
+            columnDefs.forEach(col => {
+              columns.push(col.name);
+            });
+          }
+        }
+        if (this.selectionVisible) {
+          columns = ['select', ...columns];
+        }
+        return columns;
+      })
+    );
+  }
+}

package/src/lib/components/dialogs/confirm-dialog/elder-confirm-dialog.component.html

@@ -0,0 +1,23 @@
+
+<h2 matDialogTitle translate>{{ title }}</h2>
+
+
+<mat-dialog-content>
+  <p translate>{{ message }}</p>
+</mat-dialog-content>
+
+
+<mat-dialog-actions fxLayoutAlign="end center" cdkTrapFocus>
+
+  <button type="button" mat-button
+          (click)="dialogRef.close(false)">
+    {{ (yesNo ? "actions.no" : "actions.cancel") | translate}}
+  </button>
+
+  <button type="submit" mat-raised-button cdkFocusInitial
+          (click)="dialogRef.close(true)">
+    {{ (yesNo ? "actions.yes" : "actions.ok") | translate}}
+  </button>
+
+</mat-dialog-actions>
+

package/src/lib/components/dialogs/confirm-dialog/elder-confirm-dialog.component.ts

@@ -0,0 +1,34 @@
+import {MatDialogRef} from '@angular/material/dialog';
+import {Component} from '@angular/core';
+import {ElderDialogConfig} from '../elder-dialog-config';
+
+export class ConfirmDialogConfig extends ElderDialogConfig {
+
+  /**
+   * String appearing as message in the dialog.
+   */
+  public message: string;
+
+  /**
+   * If true, dialog will show 'yes' and 'no' instead of 'ok' and 'cancel' as options.
+   */
+  public yesNo?: boolean;
+
+}
+
+@Component({
+  selector: 'elder-confirm-dialog',
+  templateUrl: './elder-confirm-dialog.component.html',
+  styleUrls: ['./elder-confirm-dialog.component.scss']
+})
+export class ElderConfirmDialogComponent {
+
+  public title: string;
+  public message: string;
+  public yesNo = false;
+
+  constructor(
+    public dialogRef: MatDialogRef<ElderConfirmDialogComponent>
+  ) {}
+
+}

package/src/lib/components/dialogs/elder-dialog-config.ts

@@ -0,0 +1,21 @@
+
+import { MatDialogConfig } from '@angular/material/dialog';
+
+export class ElderDialogConfig {
+
+    /**
+     * String displayed as title of dialog.
+     */
+    public title: string;
+
+    /**
+     * Configuration object of Angular Material Dialog.
+     */
+    public config?: MatDialogConfig;
+
+    /**
+     * Parameter object holding key value pairs to use for interpolation
+     * during translation.
+     */
+    public interpolateParams?: Object;
+}

package/src/lib/components/dialogs/elder-dialog.module.ts

@@ -0,0 +1,65 @@
+import { ElderDialogService } from './elder-dialog.service';
+import {Injectable, ModuleWithProviders, NgModule} from '@angular/core';
+
+import {ElderConfirmDialogComponent} from './confirm-dialog/elder-confirm-dialog.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule} from '@angular/forms';
+import {ElderQuestionDialogComponent} from './question-dialog/elder-question-dialog.component';
+import {ElderDialogConfig} from './elder-dialog-config';
+import {A11yModule} from '@angular/cdk/a11y';
+import {ElderSelectionDialogComponent} from './selection-dialog/elder-selection-dialog/elder-selection-dialog.component';
+import {ElderSelectionDialogDirective} from './selection-dialog/elder-selection-dialog.directive';
+
+export {ElderSelectionDialogComponent} from './selection-dialog/elder-selection-dialog/elder-selection-dialog.component';
+export {ElderSelectionDialogDirective} from './selection-dialog/elder-selection-dialog.directive';
+export {ElderDialogService} from './elder-dialog.service';
+export {ElderDialogConfig} from './elder-dialog-config';
+
+export * from './confirm-dialog/elder-confirm-dialog.component';
+export * from './question-dialog/elder-question-dialog.component';
+
+/**
+ * @deprecated Please switch to ElderDialogService
+ */
+@Injectable()
+export class EbsCommonDialogService extends ElderDialogService { }
+
+@NgModule({
+    imports: [
+        CommonModule, FormsModule,
+        MatIconModule, MatButtonModule, MatDialogModule, MatToolbarModule, MatInputModule,
+        A11yModule,
+        FlexLayoutModule, TranslateModule
+    ],
+    declarations: [
+        ElderConfirmDialogComponent,
+        ElderQuestionDialogComponent,
+        ElderSelectionDialogComponent,
+        ElderSelectionDialogDirective
+    ],
+    exports: [
+        ElderConfirmDialogComponent,
+        ElderQuestionDialogComponent,
+        ElderSelectionDialogComponent,
+        ElderSelectionDialogDirective
+    ]
+})
+export class ElderDialogModule {
+
+  public static forRoot(): ModuleWithProviders<ElderDialogModule> {
+    return {
+      ngModule: ElderDialogModule,
+      providers: [
+        // ElderDialogService,
+        EbsCommonDialogService
+      ]
+    };
+  }
+}