714 list view grid highlighting

skyux-spa-visual-tests/src/app/grid/grid-visual.component.html

@@ -1,7 +1,14 @@
 <div id="screenshot-grid">
-  <sky-grid fit="scroll" [data]="items">
+  <sky-grid fit="scroll" [data]="items" [highlightText]="highlightText">
     <sky-grid-column field="column1" heading="Column1"></sky-grid-column>
     <sky-grid-column field="column2" heading="Column2"></sky-grid-column>
-    <sky-grid-column field="column3" heading="Column3"></sky-grid-column>
+    <sky-grid-column field="column3" heading="Column3" [excludeFromHighlighting]="true"></sky-grid-column>
   </sky-grid>
 </div>
+<button
+  id="highlight-button"
+  class="sky-btn sky-btn-primary"
+  (click)="triggerHighlight()"
+>
+  Trigger Highlight
+</button>

skyux-spa-visual-tests/src/app/grid/grid-visual.component.ts

@@ -10,6 +10,8 @@ import { ListItemModel } from '@blackbaud/skyux/dist/core';
 })
 export class GridVisualComponent {
 
+  public highlightText: string;
+
   public items = [
     new ListItemModel('1', { column1: '1', column2: 'Apple', column3: 'aa' }),
     new ListItemModel('2', { column1: '01', column2: 'Banana', column3: 'bb' }),
@@ -19,4 +21,8 @@ export class GridVisualComponent {
     new ListItemModel('6', { column1: '20', column2: 'Fig', column3: 'ff' }),
     new ListItemModel('7', { column1: '21', column2: 'Grape', column3: 'gg' })
   ];
+
+  public triggerHighlight() {
+    this.highlightText = 'e';
+  }
 }

skyux-spa-visual-tests/src/app/grid/grid.visual-spec.ts

@@ -38,4 +38,16 @@ describe('grid component', () => {
     });
 
   });
+
+  it('should highlight cells correctly', () => {
+    return SkyVisualTest.setupTest('grid')
+    .then(() => {
+      element(by.css('#highlight-button')).click();
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'grid-highlight',
+        selector: '#screenshot-grid'
+      });
+    });
+
+  });
 });

src/modules/grid/grid-column.component.ts

@@ -47,6 +47,9 @@ export class SkyGridColumnComponent implements OnChanges {
   @Input()
   public isSortable: boolean = true;
 
+  @Input()
+  public excludeFromHighlighting: boolean;
+
   /* tslint:disable:no-input-rename */
   @Input('search')
   public searchFunction: (value: any, searchText: string) => boolean = this.search;

src/modules/grid/grid-column.model.ts

@@ -11,6 +11,7 @@ export class SkyGridColumnModel {
   public locked: boolean;
   public description: string;
   public isSortable: boolean = true;
+  public excludeFromHighlighting: boolean;
   public searchFunction: (data: any, searchText: string) => boolean;
 
   constructor(template: TemplateRef<any>, data?: any) {
@@ -27,6 +28,7 @@ export class SkyGridColumnModel {
       this.description = data.description;
       this.searchFunction = data.searchFunction;
       this.isSortable = data.isSortable;
+      this.excludeFromHighlighting = data.excludeFromHighlighting;
     }
   }
 }

src/modules/grid/grid.component.html

@@ -35,6 +35,7 @@
             class="sky-grid-cell"
             *ngFor="let column of displayedColumns; let last = last; let i = index">
             <sky-grid-cell
+              [skyHighlight]="!column.excludeFromHighlighting ? highlightText : undefined"
               [template]="column.template || defaultCellTemplate"
               [fieldSelector]="column.field"
               [item]="item"

src/modules/grid/grid.component.ts

@@ -70,6 +70,9 @@ export class SkyGridComponent implements AfterContentInit, OnChanges, OnDestroy
   @Input()
   public sortField: ListSortFieldSelectorModel;
 
+  @Input()
+  public highlightText: string;
+
   @Output()
   public selectedColumnIdsChange = new EventEmitter<Array<string>>();
 

src/modules/grid/grid.module.ts

@@ -4,6 +4,7 @@ import { SkyGridComponent } from './grid.component';
 import { SkyGridColumnComponent } from './grid-column.component';
 import { SkyGridCellComponent } from './grid-cell.component';
 import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { SkyTextHighlightModule } from '../text-highlight';
 
 @NgModule({
   declarations: [
@@ -13,6 +14,7 @@ import { DragulaModule } from 'ng2-dragula/ng2-dragula';
   ],
   imports: [
     CommonModule,
+    SkyTextHighlightModule,
     DragulaModule
   ],
   exports: [

src/modules/list-view-grid/list-view-grid.component.html

@@ -8,6 +8,7 @@
     [selectedColumnIds]="selectedColumnIds | async"
     [columns]="columns | async"
     [hasToolbar]="hasToolbar | async"
+    [highlightText]="highlightSearchText ? (currentSearchText | async) : undefined"
     (selectedColumnIdsChange)="columnIdsChanged($event)"
     [sortField]="sortField | async"
     (sortFieldChange)="sortFieldChanged($event)"

src/modules/list-view-grid/list-view-grid.component.spec.ts

@@ -196,6 +196,24 @@ describe('List View Grid Component', () => {
         expect(firstHeading.textContent.trim()).toEqual('Column1');
       }));
 
+      it('should handle a search being applied', fakeAsync(() => {
+        setupTest();
+
+        flush();
+        tick();
+
+        state.take(1).subscribe((current) => {
+          dispatcher.searchSetText('searchText');
+          tick();
+          flush();
+          component.grid.currentSearchText.subscribe(currentText => {
+            expect(currentText).toBe('searchText');
+          });
+        });
+
+        tick();
+      }));
+
       describe('Models and State', () => {
         it('should run ListViewGridColumnsLoadAction action', async(() => {
           setupTest();

src/modules/list-view-grid/list-view-grid.component.ts

@@ -93,6 +93,9 @@ export class SkyListViewGridComponent
   @Input()
   public height: number | Observable<number>;
 
+  @Input()
+  public highlightSearchText: boolean = true;
+
   @Output()
   public selectedColumnIdsChange = new EventEmitter<Array<string>>();
 
@@ -109,6 +112,8 @@ export class SkyListViewGridComponent
 
   public sortField: Observable<ListSortFieldSelectorModel>;
 
+  public currentSearchText: Observable<string>;
+
   /* tslint:disable */
   @Input('search')
   private searchFunction: (data: any, searchText: string) => boolean;
@@ -203,6 +208,9 @@ export class SkyListViewGridComponent
         }
       });
 
+      this.currentSearchText = this.state.map(s => s.search.searchText)
+        .distinctUntilChanged();
+
     this.gridDispatcher.next(new ListViewGridColumnsLoadAction(columnModels, true));
 
     this.handleColumnChange();