Allow asynchronous List View Grid headings (#1436)

blackbaud · Feb 7, 2018 · f4d21a6 · f4d21a6
1 parent 76c5998
commit f4d21a6
Show file tree

Hide file tree

Showing 16 changed files with 514 additions and 313 deletions.
diff --git a/src/demos/grid/grid-demo.component.html b/src/demos/grid/grid-demo.component.html
@@ -5,7 +5,7 @@
   <sky-grid-column
     id="column1"
     field="column1"
-    heading="Column1">
+    [heading]="asyncHeading | async">
   </sky-grid-column>
   <sky-grid-column
     id="column2"

diff --git a/src/demos/grid/grid-demo.component.ts b/src/demos/grid/grid-demo.component.ts
@@ -1,11 +1,19 @@
-import { Component } from '@angular/core';
-import { ListSortFieldSelectorModel } from '../../core';
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+import {
+  ListSortFieldSelectorModel
+} from '../../core';
 
 @Component({
   selector: 'sky-grid-demo',
   templateUrl: './grid-demo.component.html'
 })
-export class SkyGridDemoComponent {
+export class SkyGridDemoComponent implements OnInit {
   public items: any[] = [
     { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples', composite: 'Comp A' },
     { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas', composite: 'Comp B' },
@@ -18,9 +26,19 @@ export class SkyGridDemoComponent {
       composite: 'Comp G' }
   ];
 
+  public asyncHeading = new BehaviorSubject<string>('');
+
+  public ngOnInit() {
+    // Simulate async request:
+    setTimeout(() => {
+      this.asyncHeading.next('Column1');
+    }, 1000);
+  }
+
   public sortChanged(activeSort: ListSortFieldSelectorModel) {
-    let sortField = activeSort.fieldSelector;
-    let descending = activeSort.descending;
+    const sortField = activeSort.fieldSelector;
+    const descending = activeSort.descending;
+
     this.items = this.items.sort((a: any, b: any) => {
       let value1 = a[sortField];
       let value2 = b[sortField];
@@ -32,6 +50,7 @@ export class SkyGridDemoComponent {
       if (value2 && typeof value2 === 'string') {
         value2 = value2.toLowerCase();
       }
+
       if (value1 === value2) {
         return 0;
       }
@@ -41,6 +60,7 @@ export class SkyGridDemoComponent {
       if (descending) {
         result *= -1;
       }
+
       return result;
     }).slice();
   }

diff --git a/src/demos/list-view-grid/list-view-grid-demo.component.html b/src/demos/list-view-grid/list-view-grid-demo.component.html
@@ -10,7 +10,7 @@
     <sky-grid-column
       field="column1"
       [locked]="true"
-      heading="Column1"
+      [heading]="asyncHeading | async"
       description="A numbered column">
     </sky-grid-column>
     <sky-grid-column

diff --git a/src/demos/list-view-grid/list-view-grid-demo.component.ts b/src/demos/list-view-grid/list-view-grid-demo.component.ts
@@ -1,5 +1,9 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit
+} from '@angular/core';
 
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/distinctUntilChanged';
@@ -8,7 +12,7 @@ import 'rxjs/add/operator/distinctUntilChanged';
   selector: 'sky-list-view-grid-demo',
   templateUrl: './list-view-grid-demo.component.html'
 })
-export class SkyListViewGridDemoComponent {
+export class SkyListViewGridDemoComponent implements OnInit {
   public items = Observable.of([
     { id: '1', column1: 101, column2: 'Apple', column3: 'Anne eats apples' },
     { id: '2', column1: 202, column2: 'Banana', column3: 'Ben eats bananas' },
@@ -18,4 +22,13 @@ export class SkyListViewGridDemoComponent {
     { id: '6', column1: 606, column2: 'Lemon', column3: 'Larry eats lemons' },
     { id: '7', column1: 707, column2: 'Strawberry', column3: 'Sally eats strawberries' }
   ]);
+
+  public asyncHeading = new BehaviorSubject<string>('');
+
+  public ngOnInit() {
+    // Simulate async request:
+    setTimeout(() => {
+      this.asyncHeading.next('Column1');
+    }, 1000);
+  }
 }
diff --git a/src/modules/grid/fixtures/grid-async.component.fixture.ts b/src/modules/grid/fixtures/grid-async.component.fixture.ts
@@ -1,24 +1,27 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit
+} from '@angular/core';
 
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 @Component({
   selector: 'sky-test-cmp',
   templateUrl: './grid-async.component.fixture.html'
 })
-export class GridAsyncTestComponent {
+export class GridAsyncTestComponent implements OnInit {
   public items: Array<any> = [
     { 'id': 1, 'name': 'Windstorm', 'email': '[email protected]' },
     { 'id': 2, 'name': 'Bombasto', 'email': '[email protected]' },
     { 'id': 3, 'name': 'Magneta', 'email': '[email protected]' },
     { 'id': 4, 'name': 'Tornado', 'email': '[email protected]' }
   ];
 
-  public asyncHeading = new BehaviorSubject<string>(undefined);
+  public asyncHeading = new BehaviorSubject<string>('');
 
-  constructor() {
+  public ngOnInit() {
     setTimeout(() => {
-      this.asyncHeading.next('updated');
+      this.asyncHeading.next('Column1');
     }, 100);
   }
 }
diff --git a/src/modules/grid/fixtures/grid.component.fixture.ts b/src/modules/grid/fixtures/grid.component.fixture.ts
@@ -1,67 +1,103 @@
 import {
-  Component, ViewChild, TemplateRef, ContentChildren, QueryList, ViewChildren
+  Component,
+  ViewChild,
+  TemplateRef,
+  ContentChildren,
+  QueryList,
+  ViewChildren
 } from '@angular/core';
+
 import { SkyGridComponent } from '../grid.component';
+
 import {
   ListItemModel,
   ListSortFieldSelectorModel
 } from '../../list/state';
 
-let moment = require('moment');
+const moment = require('moment');
 
 @Component({
   selector: 'sky-test-cmp',
   template: require('./grid.component.fixture.html')
 })
 export class GridTestComponent {
-  public hasToolbar: boolean = false;
+  @ViewChild(SkyGridComponent)
+  public grid: SkyGridComponent;
 
+  @ContentChildren(TemplateRef)
+  public templates: QueryList<TemplateRef<any>>;
+
+  @ViewChildren(TemplateRef)
+  public viewtemplates: QueryList<TemplateRef<any>>;
+
+  public hasToolbar = false;
   public searchedData: any;
   public searchText: string;
+  public activeSortSelector: ListSortFieldSelectorModel;
+  public sortField: ListSortFieldSelectorModel;
 
-  public selectedColumnIds: Array<string> = [
+  public selectedColumnIds: string[] = [
     'column1',
     'column2',
     'column3',
     'column4',
     'column5'
   ];
-  public data: any[] = [
-        new ListItemModel('1', { column1: '1', column2: 'Apple',
-          column3: 1, column4: moment().add(1, 'minute') }),
-        new ListItemModel('2', { column1: '01', column2: 'Banana',
-          column3: 1, column4: moment().add(6, 'minute'), column5: 'test' }),
-        new ListItemModel('3', { column1: '11', column2: 'Carrot',
-          column3: 11, column4: moment().add(4, 'minute') }),
-        new ListItemModel('4', { column1: '12', column2: 'Daikon',
-          column3: 12, column4: moment().add(2, 'minute') }),
-        new ListItemModel('5', { column1: '13', column2: 'Edamame',
-          column3: 13, column4: moment().add(5, 'minute') }),
-        new ListItemModel('6', { column1: '20', column2: 'Fig',
-          column3: 20, column4: moment().add(3, 'minute') }),
-        new ListItemModel('7', { column1: '21', column2: 'Grape',
-          column3: 21, column4: moment().add(7, 'minute') })
-      ];
-
-  @ViewChild(SkyGridComponent)
-  public grid: SkyGridComponent;
-  @ContentChildren(TemplateRef)
-  public templates: QueryList<TemplateRef<any>>;
-  @ViewChildren(TemplateRef)
-  public viewtemplates: QueryList<TemplateRef<any>>;
 
-  public activeSortSelector: ListSortFieldSelectorModel;
+  public data: any[] = [
+    new ListItemModel('1', {
+      column1: '1',
+      column2: 'Apple',
+      column3: 1,
+      column4: moment().add(1, 'minute')
+    }),
+    new ListItemModel('2', {
+      column1: '01',
+      column2: 'Banana',
+      column3: 1,
+      column4: moment().add(6, 'minute'),
+      column5: 'test'
+    }),
+    new ListItemModel('3', {
+      column1: '11',
+      column2: 'Carrot',
+      column3: 11,
+      column4: moment().add(4, 'minute')
+    }),
+    new ListItemModel('4', {
+      column1: '12',
+      column2: 'Daikon',
+      column3: 12,
+      column4: moment().add(2, 'minute')
+    }),
+    new ListItemModel('5', {
+      column1: '13',
+      column2: 'Edamame',
+      column3: 13,
+      column4: moment().add(5, 'minute')
+    }),
+    new ListItemModel('6', {
+      column1: '20',
+      column2: 'Fig',
+      column3: 20,
+      column4: moment().add(3, 'minute')
+    }),
+    new ListItemModel('7', {
+      column1: '21',
+      column2: 'Grape',
+      column3: 21,
+      column4: moment().add(7, 'minute')
+    })
+  ];
 
-  public sortField: ListSortFieldSelectorModel;
+  public searchFunction: (data: any, searchText: string) => boolean =
+    (data: any, searchText: string) => {
+      this.searchedData = data;
+      this.searchText = searchText;
+      return true;
+    }
 
   public onSort(sortSelector: ListSortFieldSelectorModel) {
     this.activeSortSelector = sortSelector;
   }
-
-  public searchFunction: (data: any, searchText: string) => boolean =
-    (data: any, searchText: string) => {
-    this.searchedData = data;
-    this.searchText = searchText;
-    return true;
-  }
 }
diff --git a/src/modules/grid/grid-column.component.ts b/src/modules/grid/grid-column.component.ts
@@ -10,6 +10,10 @@ import {
   QueryList
 } from '@angular/core';
 
+import {
+  SkyGridColumnHeadingModelChange
+} from './types';
+
 @Component({
   selector: 'sky-grid-column',
   template: '<ng-content></ng-content>',
@@ -52,14 +56,19 @@ export class SkyGridColumnComponent implements OnChanges {
   /* tslint:enable:no-input-rename */
 
   public headingChanges: EventEmitter<string> = new EventEmitter<string>();
+  public headingModelChanges = new EventEmitter<SkyGridColumnHeadingModelChange>();
 
   @ContentChildren(TemplateRef)
   private templates: QueryList<TemplateRef<any>>;
 
   public ngOnChanges(changes: SimpleChanges) {
     if (changes.heading && changes.heading.firstChange === false) {
-      this.heading = changes.heading.currentValue;
       this.headingChanges.emit(this.heading);
+      this.headingModelChanges.emit({
+        value: this.heading,
+        id: this.id,
+        field: this.field
+      });
     }
   }