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

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

@@ -0,0 +1,359 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  Directive,
+  forwardRef,
+  Input, OnDestroy,
+  OnInit,
+  Optional,
+  SkipSelf,
+  TemplateRef,
+  TrackByFunction,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+import {BehaviorSubject, combineLatest, Observable, of} from 'rxjs';
+import {IDataContext, IDataContextContinuable, isContinuableDataContext} from '../../../../common/data/data-context/data-context';
+import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
+import {SelectionModel} from '../../../../common/selection/selection-model';
+import {debounceTime, filter, map, startWith, switchMap, takeUntil} from 'rxjs/operators';
+import {Sort} from '../../../../common/data/sort';
+import {ELDER_DATA_VIEW} from '../../base/elder-data-view';
+import {ElderDataViewBaseComponent} from '../../base/elder-data-view-base';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatTableDataContextBindingBuilder} from '../../../../common/data/data-context/mat-table-data-context-binding';
+import {ElderDataViewOptionsProvider} from '../../base/elder-data-view-options-provider';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+
+@Directive({selector: '[elderGridTile]'})
+export class ElderGridTileDirective {
+  constructor(
+    public templateRef: TemplateRef<any>,
+    public viewContainer: ViewContainerRef) {
+  }
+}
+
+/**
+ * This directive projects marked content into a toolbar.
+ */
+@Directive({selector: '[elderGridToolbar]'})
+export class ElderGridToolbarDirective {
+
+  constructor(
+    public templateRef: TemplateRef<any>,
+    public viewContainer: ViewContainerRef
+  ) {
+  }
+}
+
+@Component({
+  selector: 'elder-grid',
+  templateUrl: './elder-grid.component.html',
+  styleUrls: ['./elder-grid.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: ELDER_DATA_VIEW,
+      useExisting: forwardRef(() => ElderGridComponent)
+    }
+  ]
+})
+export class ElderGridComponent extends ElderDataViewBaseComponent implements OnInit, AfterViewInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly log = LoggerFactory.getLogger(this.constructor.name);
+
+  private _columnCount = new BehaviorSubject<number>(4);
+
+  private readonly sizeToColumns = new Map([
+    [Breakpoints.XSmall, 1],
+    [Breakpoints.Small, 2],
+    [Breakpoints.Medium, 3],
+    [Breakpoints.Large, 4],
+    [Breakpoints.XLarge, 5]
+  ]);
+
+  /**
+   * Load next chunk after current is done
+   */
+  private loadNextQueued = false;
+
+  public dataRows$: Observable<any[][]>;
+
+  public canLoadMore$: Observable<boolean>;
+  public total$: Observable<string>;
+
+  @ContentChild(ElderGridTileDirective, {read: TemplateRef, static: true})
+  public tileTemplateQuery: TemplateRef<any>;
+  private _tileTemplate: TemplateRef<any>;
+
+  @Input()
+  public toolbarVisible = true;
+
+  @Input()
+  public footerVisible = true;
+
+  @Input()
+  public itemHeight = 250;
+
+  @Input()
+  public responsiveColumnCount = true;
+
+  @ViewChild('virtualScrollViewPort', {static: true})
+  public virtualScrollViewPort: CdkVirtualScrollViewport;
+
+  @Input()
+  public availableSorts: string[] = [];
+
+  @Input()
+  public sortTranslationPrefix = 'documents.sorts.';
+
+  @Input()
+  public hiddenField: string = null;
+
+  /**
+   * @deprecated No longer required. Id is automatically picked from the DataSource.
+   */
+  @Input()
+  public idField = 'id';
+
+  @Input()
+  public selectionVisible = true;
+
+  @Input()
+  public pageSizeOptions = [30, 50, 100, 150, 200];
+  @ViewChild(MatPaginator)
+  public matPaginator: MatPaginator;
+
+  @ContentChild(ElderGridToolbarDirective, {read: TemplateRef, static: true})
+  public toolbarTemplateQuery: TemplateRef<any>;
+  private _toolbarTemplate: TemplateRef<any>;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    @Optional() selectionModel: SelectionModel<any>,
+    @Optional() @SkipSelf() dataViewOptionsProvider: ElderDataViewOptionsProvider,
+    private breakpointObserver: BreakpointObserver
+  ) {
+    super(selectionModel, dataViewOptionsProvider);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Lifecycle                                                               *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    super.ngOnInit();
+
+    const columnCount$ = (
+      this.responsiveColumnCount
+        ? this.responsiveColumn()
+        : this._columnCount);
+
+    this.dataRows$ = combineLatest(
+      [
+        this.dataContext$.pipe(
+          filter(dc => !!dc),
+          switchMap(dc => dc.data)
+        ),
+        columnCount$
+      ]).pipe(
+      debounceTime(50),
+      map(
+        ([data, columns]) => this.groupForColumns(data, columns)
+      )
+    );
+  }
+
+  public ngAfterViewInit(): void {
+
+    MatTableDataContextBindingBuilder
+      .start(this.dataContext$)
+      .withPaginator(of(this.matPaginator))
+      .bindUntil(this.destroy$);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set tileTemplate(template: TemplateRef<any>) {
+    this._tileTemplate = template;
+  }
+
+  public get tileTemplate(): TemplateRef<any> {
+    return this._tileTemplate || this.tileTemplateQuery;
+  }
+
+  @Input()
+  public set toolbarTemplate(template: TemplateRef<any>) {
+    this._toolbarTemplate = template;
+  }
+
+  public get toolbarTemplate(): TemplateRef<any> {
+    return this._toolbarTemplate || this.toolbarTemplateQuery;
+  }
+
+  @Input()
+  public set data(data: IDataContext<any>) {
+    this.dataContext$.next(data);
+
+    this.total$ = data.total.pipe(
+      map(total => total ? total + '' : '∞')
+    );
+
+    if (isContinuableDataContext(data)) {
+      this.canLoadMore$ = combineLatest([data.loading, data.hasMoreData]).pipe(
+        map(([loading, hasMoreData]) => !loading && hasMoreData)
+      );
+    } else {
+      this.canLoadMore$ = of(false);
+    }
+  }
+
+  public get dataSnapshot(): IDataContextContinuable<any> {
+    return this.dataContinuable;
+  }
+
+  @Input()
+  public set columnCount(count: number) {
+    this._columnCount.next(count);
+  }
+
+  public get columnCount(): number {
+    return this._columnCount.getValue();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public inSelectionMode(currentSelection: any[]): boolean {
+
+    if (this.interactionMode === 'selection') {
+      return true;
+    }
+
+    if (currentSelection && currentSelection.length > 0) {
+      return true;
+    }
+  }
+
+  public requestMoreDataZoned(event: any): void {
+    if (this.dataSnapshot.hasMoreDataSnapshot) {
+
+      if (this.dataSnapshot.snapshot.isLoading) {
+        this.loadNextQueued = true;
+      } else {
+        this.dataSnapshot.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) => index;
+  }
+
+  public trackByIndex(index: number, items: any[]): any {
+    return index;
+  }
+
+  public updateSort(sort: Sort): void {
+    const dc = this.dataContext$.getValue();
+    if (dc) {
+      dc.sort.replaceSorts([sort]);
+    }
+  }
+
+  public showTile(tile: any): boolean {
+    return tile && (this.hiddenField ? !tile[this.hiddenField] : true);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private scrollTop() {
+    this.virtualScrollViewPort.scrollToIndex(0, 'smooth');
+  }
+
+  private groupForColumns(nodes: any[], columns: number): any[][] {
+
+    const rows: any[][] = [];
+
+    const rowCount = nodes.length / columns;
+
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+      const rowStartIndex = rowIndex * columns;
+      const row = nodes.slice(rowStartIndex, rowStartIndex + columns);
+
+      while (row.length < columns) {
+        row.push(null); // Fill up remaining
+      }
+      rows.push(row);
+    }
+
+    return rows;
+  }
+
+  private responsiveColumn(): Observable<number> {
+    const breakpoints = Array.from(this.sizeToColumns.keys());
+    return this.breakpointObserver.observe(breakpoints).pipe(
+      takeUntil(this.destroy$),
+      map(result => {
+        let activeSize = Breakpoints.Medium;
+        for (const query of Object.keys(result.breakpoints)) {
+          if (result.breakpoints[query]) {
+            activeSize = query;
+            break;
+          }
+        }
+        return this.sizeToColumns.get(activeSize);
+      }),
+      debounceTime(100),
+      startWith(this.activeColumnCount())
+    )
+  }
+
+  private activeColumnCount(): number {
+    let columnCount = 1;
+    this.sizeToColumns.forEach((cols, mqAlias) => {
+      if (this.breakpointObserver.isMatched(mqAlias)) {
+        columnCount = cols;
+      }
+    });
+    return columnCount;
+  }
+}

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

@@ -0,0 +1,54 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ElderGridComponent, ElderGridTileDirective, ElderGridToolbarDirective} from './elder-grid/elder-grid.component';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCommonModule} from '@angular/material/core';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatSelectModule} from '@angular/material/select';
+import {A11yModule} from '@angular/cdk/a11y';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {TranslateModule} from '@ngx-translate/core';
+import {ElderInfiniteScrollModule} from '../../infinitescroll/elder-infinite-scroll.module';
+import {ElderFormsDirectivesModule} from '../../forms/directives/elder-forms-directives.module';
+import {ElderDataCommonModule} from '../common/elder-data-common.module';
+import {MatPaginatorModule} from '@angular/material/paginator';
+
+export {ElderGridTileDirective, ElderGridToolbarDirective, ElderGridComponent} from './elder-grid/elder-grid.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+
+    MatCommonModule,
+    MatProgressBarModule,
+    MatMenuModule,
+    A11yModule,
+
+    MatDividerModule, MatIconModule, MatButtonModule,
+    MatSelectModule, DragDropModule,
+
+    ScrollingModule,
+
+    TranslateModule,
+
+    ElderDataCommonModule,
+    ElderInfiniteScrollModule,
+    ElderFormsDirectivesModule, MatPaginatorModule
+  ],
+  declarations: [
+    ElderGridComponent,
+    ElderGridTileDirective,
+    ElderGridToolbarDirective
+  ],
+  exports: [
+    ElderGridComponent,
+    ElderGridTileDirective,
+    ElderGridToolbarDirective
+  ]
+})
+export class ElderGridModule {
+}

package/src/lib/components/data-view/public_api.ts

@@ -0,0 +1,5 @@
+export * from './base/public_api'
+export * from './common/elder-data-common.module';
+export * from './table/elder-table.module';
+export * from './simple/elder-simple-selection-view/elder-simple-selection-view.module';
+export * from './grid/elder-grid.module';

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

@@ -0,0 +1,3 @@
+<p>
+  elder-simple-selection-view works!
+</p>

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

@@ -0,0 +1,22 @@
+import {Component, OnInit, Optional} from '@angular/core';
+import {SelectionModel} from '../../../../common/selection/selection-model';
+
+@Component({
+  selector: 'elder-simple-selection-view',
+  templateUrl: './elder-simple-selection-view.component.html',
+  styleUrls: ['./elder-simple-selection-view.component.css']
+})
+export class ElderSimpleSelectionViewComponent implements OnInit {
+
+  constructor(
+    @Optional() selectionModel: SelectionModel<any>
+  ) {
+
+    console.log('Received selection model:', selectionModel);
+
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ElderSimpleSelectionViewComponent } from './elder-simple-selection-view.component';
+import {RouterModule} from '@angular/router';
+import {FormsModule} from '@angular/forms';
+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 { 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 {CdkTableModule} from '@angular/cdk/table';
+import {TranslateModule} from '@ngx-translate/core';
+import {ElderDataCommonModule} from '../../common/elder-data-common.module';
+import {ElderInfiniteScrollModule} from '../../../infinitescroll/elder-infinite-scroll.module';
+import {ElderFormsDirectivesModule} from '../../../forms/directives/elder-forms-directives.module';
+
+export {ElderSimpleSelectionViewComponent} from './elder-simple-selection-view.component';
+
+@NgModule({
+  declarations: [ElderSimpleSelectionViewComponent],
+  imports: [
+    CommonModule, RouterModule, FormsModule,
+
+    // Material
+    MatDividerModule,
+    MatCheckboxModule,
+    MatButtonModule, MatIconModule, MatBadgeModule,
+    MatProgressBarModule,
+    CdkTableModule, MatTableModule, MatPaginatorModule, MatSortModule,
+    MatDialogModule, MatTooltipModule, MatMenuModule,
+
+    // translations
+    TranslateModule,
+
+    ElderDataCommonModule,
+    ElderInfiniteScrollModule,
+    ElderFormsDirectivesModule,
+  ],
+  exports: [
+    ElderSimpleSelectionViewComponent
+  ]
+})
+export class ElderSimpleSelectionViewModule { }

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

@@ -0,0 +1,6 @@
+
+export interface ElderItemActivator<T> {
+
+  activate(item: T): void;
+
+}

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

@@ -0,0 +1,19 @@
+export type ElderTableActivationMode = 'once' | 'always';
+export type ElderTableActivationRow = 'none' | 'first' | 'last';
+
+export interface ElderTableActivationOptions {
+  /**
+   * After reaching the last element, start over at the first?
+   */
+  loop?: boolean;
+
+  /**
+   * Attempt to activate a row when the rows change.
+   */
+  mode?: ElderTableActivationMode;
+
+  /**
+   * Activate the specified row, if no other row is currently activated.
+   */
+  row?: ElderTableActivationRow;
+}