move logic from baserow to table

Author: andrewseguin

src/cdk/table/row.ts

@@ -9,7 +9,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Directive,
+  Directive, IterableChanges,
   IterableDiffer,
   IterableDiffers,
   SimpleChanges,
@@ -33,35 +33,26 @@ export abstract class BaseRowDef {
   /** The columns to be displayed on this row. */
   columns: string[];
 
-  /** Event stream that emits when changes are made to the columns. */
-  columnsChange: Subject<void> = new Subject<void>();
-
   /** Differ used to check if any changes were made to the columns. */
-  protected _columnsDiffer: IterableDiffer<any>;
-
-  private viewInitialized = false;
+  columnsDiffer: IterableDiffer<any>;
 
   constructor(public template: TemplateRef<any>,
               protected _differs: IterableDiffers) { }
 
-  ngAfterViewInit() {
-    this.viewInitialized = true;
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     // Create a new columns differ if one does not yet exist. Initialize it based on initial value
     // of the columns property.
-    if (!this._columnsDiffer && changes['columns'].currentValue) {
-      this._columnsDiffer = this._differs.find(changes['columns'].currentValue).create();
+    if (!this.columnsDiffer && changes['columns'].currentValue) {
+      this.columnsDiffer = this._differs.find(changes['columns'].currentValue).create();
     }
   }
 
-  ngDoCheck(): void {
-    if (!this.viewInitialized || !this._columnsDiffer || !this.columns) { return; }
-
-    // Notify the table if there are any changes to the columns.
-    const changes = this._columnsDiffer.diff(this.columns);
-    if (changes) { this.columnsChange.next(); }
+  /**
+   * Returns the difference between the current columns and the collumns from the last diff, or null
+   * if there is no difference.
+   */
+  getColumnsDiff(): IterableChanges<any> | null {
+    return this.columnsDiffer.diff(this.columns);
   }
 }
 

src/cdk/table/table.ts

@@ -31,7 +31,6 @@ import {
 } from '@angular/core';
 import {CollectionViewer, DataSource} from './data-source';
 import {CdkCellOutlet, CdkCellOutletRowContext, CdkHeaderRowDef, CdkRowDef} from './row';
-import {merge} from 'rxjs/observable/merge';
 import {takeUntil} from 'rxjs/operator/takeUntil';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Subscription} from 'rxjs/Subscription';
@@ -174,6 +173,27 @@ export class CdkTable<T> implements CollectionViewer {
     }
   }
 
+  ngOnInit() {
+    // TODO(andrewseguin): Setup a listener for scrolling, emit the calculated view to viewChange
+    this._dataDiffer = this._differs.find([]).create(this._trackByFn);
+  }
+
+  ngAfterContentInit() {
+    this._updateColumnDefinitions();
+    this._columnDefinitions.changes.subscribe(() => this._updateColumnDefinitions());
+  }
+
+  ngAfterContentChecked() {
+    this._checkColumnsChange();
+  }
+
+  ngAfterViewInit() {
+    this._isViewInitialized = true;
+    if (this.dataSource && !this._renderChangeSubscription) {
+      this._observeRenderChanges();
+    }
+  }
+
   ngOnDestroy() {
     this._onDestroy.next();
     this._onDestroy.complete();
@@ -182,52 +202,34 @@ export class CdkTable<T> implements CollectionViewer {
     }
   }
 
-  ngOnInit() {
-    // TODO(andrewseguin): Setup a listener for scroll events
-    //   and emit the calculated view to this.viewChange
-  }
-
-  ngAfterContentInit() {
+  /** Update the map containing the content's column definitions. */
+  private _updateColumnDefinitions() {
     // TODO(andrewseguin): Throw an error if two columns share the same name
     this._columnDefinitions.forEach(columnDef => {
       this._columnDefinitionsByName.set(columnDef.name, columnDef);
     });
+  }
 
-    this._columnDefinitions.changes.subscribe(() => {
-      console.log('Column def change');
-    });
-
-    // Re-render the rows if any of their columns change.
-    // TODO(andrewseguin): Determine how to only re-render the rows that have their columns changed.
-    const columnChangeEvents = this._rowDefinitions.map(rowDef => rowDef.columnsChange);
+  /**
+   * Check if the header or rows have changed what columns they want to display. If there is a diff,
+   * then re-render that section.
+   */
+  private _checkColumnsChange() {
+    // Re-render the rows when the row definition columns change.
+    this._rowDefinitions.forEach(def => {
+      if (!!def.getColumnsDiff()) {
+        // Reset the data to an empty array so that renderRowChanges will re-render all new rows.
+        this._dataDiffer.diff([]);
 
-    takeUntil.call(merge(...columnChangeEvents), this._onDestroy).subscribe(() => {
-      // Reset the data to an empty array so that renderRowChanges will re-render all new rows.
-      this._rowPlaceholder.viewContainer.clear();
-      this._dataDiffer.diff([]);
-      this._renderRowChanges();
+        this._rowPlaceholder.viewContainer.clear();
+        this._renderRowChanges();
+      }
     });
 
-    // Re-render the header row if the columns change
-    takeUntil.call(this._headerDefinition.columnsChange, this._onDestroy).subscribe(() => {
-      console.log('Header columns changed');
+    // Re-render the header row if there is a difference in its columns.
+    if (this._headerDefinition.getColumnsDiff()) {
       this._headerRowPlaceholder.viewContainer.clear();
       this._renderHeaderRow();
-    });
-  }
-
-  ngAfterViewInit() {
-    // Find and construct an iterable differ that can be used to find the diff in an array.
-    this._dataDiffer = this._differs.find([]).create(this._trackByFn);
-    this._isViewInitialized = true;
-  }
-
-  ngDoCheck() {
-    if (this._isViewInitialized && this.dataSource && !this._renderChangeSubscription) {
-      this._renderHeaderRow();
-      if (this.dataSource && !this._renderChangeSubscription) {
-        this._observeRenderChanges();
-      }
     }
   }
 

src/demo-app/table/table-demo.html

@@ -27,14 +27,16 @@
   </div>
 
   <div>
-    <button md-raised-button (click)="addDynamicColumnDef()">Add Dynamic Column Def</button>
+    <button md-raised-button (click)="addDynamicColumnDef()" [disabled]="dynamicColumnIds.length >= 4">
+      Add Dynamic Column Def
+    </button>
   </div>
 </div>
 
 <h3>CdkTable With Dynamic Column Def</h3>
 
 <cdk-table [dataSource]="dataSource">
-  <ng-container cdkColumnDef="column.id" *ngFor="let column of dynamicColumns">
+  <ng-container [cdkColumnDef]="column.id" *ngFor="let column of dynamicColumnDefs">
     <cdk-header-cell *cdkHeaderCellDef> {{column.headerText}} </cdk-header-cell>
     <cdk-cell *cdkCellDef="let row"> {{row[column.property]}} </cdk-cell>
   </ng-container>

src/demo-app/table/table-demo.ts

@@ -1,13 +1,19 @@
-import {Component, ViewChild} from '@angular/core';
+import {
+  ChangeDetectorRef, Component, ContentChildren, QueryList, ViewChild,
+  ViewChildren
+} from '@angular/core';
 import {PeopleDatabase, UserData} from './people-database';
 import {PersonDataSource} from './person-data-source';
 import {MdPaginator} from '@angular/material';
 import {MdSort} from '@angular/material';
+import {CdkColumnDef} from '@angular/cdk';
 
 export type UserProperties = 'userId' | 'userName' | 'progress' | 'color' | undefined;
 
 export type TrackByStrategy = 'id' | 'reference' | 'index';
 
+const properties = ['id', 'name', 'progress', 'color'];
+
 @Component({
   moduleId: module.id,
   selector: 'table-demo',
@@ -21,7 +27,7 @@ export class TableDemo {
   changeReferences = false;
   highlights = new Set<string>();
 
-  dynamicColumns: any[] = [];
+  dynamicColumnDefs: any[] = [];
   dynamicColumnIds: string[] = [];
 
   @ViewChild(MdPaginator) _paginator: MdPaginator;
@@ -35,15 +41,13 @@ export class TableDemo {
   }
 
   addDynamicColumnDef() {
-    const properties = ['userId', 'userName', 'progress', 'color'];
-    const nextProperty = properties[this.dynamicColumns.length];
-    this.dynamicColumns.push({
-      id: nextProperty,
+    const nextProperty = properties[this.dynamicColumnDefs.length];
+    this.dynamicColumnDefs.push({
+      id: nextProperty.toUpperCase(),
       property: nextProperty,
       headerText: nextProperty
     });
-
-    this.dynamicColumnIds.push(nextProperty);
+    this.dynamicColumnIds = this.dynamicColumnDefs.map(columnDef => columnDef.id);
   }
 
   connect() {