feat(data-table): onclick event for datatable rows, select event only on checkboxes, multi shift click and basic a11y (closes #468) (closes #592)

src/app/components/components/data-table/data-table.component.html

@@ -354,7 +354,7 @@ <h3>No results to display.</h3>
         Selectable rows
       </md-slide-toggle>
       <md-slide-toggle class="push-left" color="accent" [(ngModel)]="multiple" [disabled]="!selectable">
-        Select multiple rows
+        Select multiple rows (shift + click for range selection)
       </md-slide-toggle>
     </div>
     <md-divider></md-divider>

src/platform/core/data-table/data-table.component.html

@@ -25,10 +25,11 @@
     <tr td-data-table-row
         [class.mat-selected]="isSelectable && isRowSelected(row)"
         *ngFor="let row of data"
-        (click)="isSelectable && select(row, !isRowSelected(row), $event)">
+        (click)="clickRow(row)">
       <td td-data-table-cell class="mat-checkbox-cell" *ngIf="isSelectable">
         <md-pseudo-checkbox
-          [state]="isRowSelected(row) ? 'checked' : 'unchecked'">
+          [state]="isRowSelected(row) ? 'checked' : 'unchecked'"
+          (click)="select(row, !isRowSelected(row), $event)">
         </md-pseudo-checkbox>
       </td>
       <td td-data-table-cell

src/platform/core/data-table/data-table.component.spec.ts

@@ -7,6 +7,7 @@ import {
 import 'hammerjs';
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
+import { MdPseudoCheckbox } from '@angular/material';
 import { TdDataTableColumnComponent } from './data-table-column/data-table-column.component';
 import { TdDataTableRowComponent } from './data-table-row/data-table-row.component';
 import { TdDataTableComponent, ITdDataTableColumn } from './data-table.component';
@@ -169,7 +170,7 @@ describe('Component: DataTable', () => {
           expect(dataTableComponent.indeterminate).toBeFalsy();
           expect(dataTableComponent.allSelected).toBeFalsy();
           // select a row with a click event
-          fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[2].triggerEventHandler('click', new Event('click'));
+          fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[2].triggerEventHandler('click', new Event('click'));
           fixture.detectChanges();
           fixture.whenStable().then(() => {
             // check to see if its in indeterminate state
@@ -225,23 +226,23 @@ describe('Component: DataTable', () => {
           expect(dataTableComponent.indeterminate).toBeFalsy();
           expect(dataTableComponent.allSelected).toBeFalsy();
           // select a row with a click event
-          fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[2].triggerEventHandler('click', new Event('click'));
+          fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[2].triggerEventHandler('click', new Event('click'));
           fixture.detectChanges();
           fixture.whenStable().then(() => {
             // check to see if its in indeterminate state
             expect(dataTableComponent.indeterminate).toBeTruthy();
             expect(dataTableComponent.allSelected).toBeFalsy();
             // select the rest of the rows
-            fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[1].triggerEventHandler('click', new Event('click'));
-            fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[3].triggerEventHandler('click', new Event('click'));
-            fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[4].triggerEventHandler('click', new Event('click'));
+            fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].triggerEventHandler('click', new Event('click'));
+            fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[1].triggerEventHandler('click', new Event('click'));
+            fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[3].triggerEventHandler('click', new Event('click'));
             fixture.detectChanges();
             fixture.whenStable().then(() => {
               // check to see if its in indeterminate state and allSelected
               expect(dataTableComponent.indeterminate).toBeTruthy();
               expect(dataTableComponent.allSelected).toBeTruthy();
               // unselect one of the rows
-              fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[2].triggerEventHandler('click', new Event('click'));
+              fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[2].triggerEventHandler('click', new Event('click'));
               fixture.detectChanges();
               fixture.whenStable().then(() => {
                 // check to see if its in indeterminate state and not allSelected
@@ -255,8 +256,70 @@ describe('Component: DataTable', () => {
       })();
     });
 
-  });
+    it('should shift click and select a range of rows',
+      (done: DoneFn) => { inject([], () => {
+        let fixture: ComponentFixture<any> = TestBed.createComponent(TdDataTableSelectableTestComponent);
+        let element: DebugElement = fixture.debugElement;
+        let component: TdDataTableSelectableTestComponent = fixture.debugElement.componentInstance;
+
+        component.selectable = true;
+        component.multiple = true;
+        component.columns = [
+          { name: 'sku', label: 'SKU #' },
+          { name: 'item', label: 'Item name' },
+          { name: 'price', label: 'Price (US$)', numeric: true },
+        ];
+
+        component.data = [{ sku: '1452-2', item: 'Pork Chops', price: 32.11 },
+                          { sku: '1421-0', item: 'Prime Rib', price: 41.15 },
+                          { sku: '1452-1', item: 'Sirlone', price: 22.11 },
+                          { sku: '1421-3', item: 'T-Bone', price: 51.15 }];
 
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          let dataTableComponent: TdDataTableComponent = fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance;
+          // check how many rows (without counting the columns) were rendered
+          expect(fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent)).length - 1).toBe(4);
+          // check to see checkboxes states
+          expect(dataTableComponent.indeterminate).toBeFalsy();
+          expect(dataTableComponent.allSelected).toBeFalsy();
+
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            // select the first and last row with shift key also selected and should then select all checkboxes
+            let clickEvent: MouseEvent = document.createEvent('MouseEvents');          
+            // the 12th parameter below 'true' sets the shift key to be clicked at the same time as as the mouse click
+            clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true/*shiftkey*/, false, 0, document.body.parentNode);
+            fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].nativeElement.dispatchEvent(clickEvent);
+            fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[3].nativeElement.dispatchEvent(clickEvent);
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+              // check to see if allSelected is true
+              expect(dataTableComponent.allSelected).toBeTruthy();
+              done();
+            });
+          });
+        });
+      })();
+    });
+
+    it('should click on a row and see the rowClick Event',
+      async(inject([], () => {
+        let fixture: ComponentFixture<any> = TestBed.createComponent(TdDataTableBasicComponent);
+        let component: TdDataTableBasicComponent = fixture.debugElement.componentInstance;
+
+        let eventSpy: jasmine.Spy = spyOn(fixture.debugElement.query(By.directive(TdDataTableComponent)).componentInstance, 'clickRow');
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[1].nativeElement.click();
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(eventSpy).toHaveBeenCalled();
+          });
+        });
+    })));
+  });
 });
 
 @Component({

src/platform/core/data-table/data-table.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef,
-         ContentChildren, TemplateRef, AfterContentInit, QueryList } from '@angular/core';
+         ContentChildren, TemplateRef, AfterContentInit, QueryList, HostListener } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
 import { ITdDataTableSortChangeEvent } from './data-table-column/data-table-column.component';
@@ -42,6 +42,10 @@ export interface ITdDataTableSelectAllEvent {
   selected: boolean;
 }
 
+export interface ITdDataTableRowClickEvent {
+  row: any;
+}
+
 @Component({
   providers: [ TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR ],
   selector: 'td-data-table',
@@ -71,6 +75,9 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
   private _sortBy: ITdDataTableColumn;
   private _sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;
 
+  /** shift select */
+  private _lastSelectedIndex: number = -1;
+
   /** template fetching support */
   private _templateMap: Map<string, TemplateRef<any>> = new Map<string, TemplateRef<any>>();
   @ContentChildren(TdDataTableTemplateDirective) _templates: QueryList<TdDataTableTemplateDirective>;
@@ -247,6 +254,13 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
    */
   @Output('rowSelect') onRowSelect: EventEmitter<ITdDataTableSelectEvent> = new EventEmitter<ITdDataTableSelectEvent>();
 
+  /**
+   * onRowClick?: function
+   * Event emitted when a row is clicked.
+   * Emits an [ITdDataTableRowClickEvent] implemented object.
+   */
+  @Output('rowClick') onRowClick: EventEmitter<ITdDataTableRowClickEvent> = new EventEmitter<ITdDataTableRowClickEvent>();
+
   /**
    * selectAll?: function
    * Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled.
@@ -333,32 +347,66 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
   }
 
   /**
-   * Selects or clears a row depending on 'checked' value
+   * Selects or clears a row depending on 'checked' value if the row 'isSelectable'
+   * handles cntrl clicks and shift clicks for multi-select
    */
   select(row: any, checked: boolean, event: Event): void {
-    event.preventDefault();
-    // clears all the fields for the dataset
-    if (!this._multiple) {
-      this.clearModel();
-    }
-
-    if (checked) {
-      this._value.push(row);
-    } else {
-      // if selection is done by a [uniqueId] it uses it to compare, else it compares by reference.
-      if (this.uniqueId) {
-        row = this._value.filter((val: any) => {
-          return val[this.uniqueId] === row[this.uniqueId];
-        })[0];
+    if (this.isSelectable) {
+      event.preventDefault();
+      // clears all the fields for the dataset
+      if (!this._multiple) {
+        this.clearModel();
       }
-      let index: number = this._value.indexOf(row);
-      if (index > -1) {
-        this._value.splice(index, 1);
+      let currentSelected: number = this._data.findIndex((d: any) => d === row);
+      this._doSelection(row);
+
+      // Check to see if Shift key is selected and need to select everything in between
+      let mouseEvent: MouseEvent = event as MouseEvent;
+      if (this.isMultiple && mouseEvent && mouseEvent.shiftKey && this._lastSelectedIndex > -1) {
+        let firstSelected: number = this._data.findIndex((d: any) => this.isRowSelected(d));
+        let lastSelected: number = this._data.concat([]).reverse().findIndex((d: any) => this.isRowSelected(d));
+        // find the index when not reversed
+        lastSelected = (this._data.length - 1) - lastSelected;
+        if (firstSelected > -1 && lastSelected > -1) {
+          for (let i: number = firstSelected; i < lastSelected; i++) {
+            if (this._data[i] !== row && i !== this._lastSelectedIndex) {
+              this._doSelection(this._data[i]);
+            }
+          }
+        }
       }
+      this._lastSelectedIndex = currentSelected;
+    }
+  }
+
+  /**
+   * Overrides the onselectstart method of the document so other text on the page
+   * doesn't get selected when doing shift selections.
+   */
+  @HostListener('window:mousedown', ['$event'])
+  disableOnSelectStart(): void {
+    if (event.srcElement.tagName === 'MD-PSEUDO-CHECKBOX') {
+      document.onselectstart = function(): boolean {
+          return false;
+      };
     }
-    this._calculateCheckboxState();
-    this.onRowSelect.emit({row: row, selected: checked});
-    this.onChange(this._value);
+  }
+
+  /**
+   * Resets the original onselectstart method.
+   */
+  @HostListener('window:mouseup', ['$event'])
+  reEnableOnSelectStart(): void {
+   if (event.srcElement.tagName === 'MD-PSEUDO-CHECKBOX') {
+      document.onselectstart = undefined;
+    }
+  }
+
+  /**
+   * emits the onRowClickEvent when a row is clicked
+   */
+  clickRow(row: any): void {
+    this.onRowClick.emit({row: row});
   }
 
   /**
@@ -405,6 +453,29 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
     }
   }
 
+  /**
+   * Does the actual Row Selection
+   */
+  private _doSelection(row: any): void {
+    if (!this.isRowSelected(row)) {
+      this._value.push(row);
+    } else {
+      // if selection is done by a [uniqueId] it uses it to compare, else it compares by reference.
+      if (this.uniqueId) {
+        row = this._value.filter((val: any) => {
+          return val[this.uniqueId] === row[this.uniqueId];
+        })[0];
+      }
+      let index: number = this._value.indexOf(row);
+      if (index > -1) {
+        this._value.splice(index, 1);
+      }
+    }
+    this._calculateCheckboxState();
+    this.onRowSelect.emit({row: row, selected: this.isRowSelected(row)});
+    this.onChange(this._value);
+  }
+
   /**
    * Calculate all the state of all checkboxes
    */
@@ -436,5 +507,4 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
       }
     }
   }
-
 }