feat: Datatable: onclick event for datatable rows

closes #468
Teradata · May 8, 2017 · 027d50e · 027d50e
1 parent d4d90a2
commit 027d50e
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 21 deletions.
diff --git a/src/platform/core/data-table/data-table.component.html b/src/platform/core/data-table/data-table.component.html
@@ -23,7 +23,7 @@
     <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); select(row, !isRowSelected(row), $event)">
       <td td-data-table-cell class="mat-checkbox-cell" *ngIf="isSelectable">
         <md-pseudo-checkbox
           [state]="isRowSelected(row) ? 'checked' : 'unchecked'">

diff --git a/src/platform/core/data-table/data-table.component.spec.ts b/src/platform/core/data-table/data-table.component.spec.ts
@@ -8,6 +8,7 @@ import 'hammerjs';
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TdDataTableComponent, ITdDataTableColumn } from './data-table.component';
+import { TdDataTableRowComponent } from './data-table-row/data-table-row.component';
 import { TdDataTableService } from './services/data-table.service';
 import { CovalentDataTableModule } from './data-table.module';
 import { NgModule, DebugElement } from '@angular/core';
@@ -104,6 +105,23 @@ describe('Component: DataTable', () => {
       });
     })();
   });
+
+  it('should click on a row and see the rowClick Event',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TestFilterColumnComponent);
+      let component: TestFilterColumnComponent = 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({

diff --git a/src/platform/core/data-table/data-table.component.ts b/src/platform/core/data-table/data-table.component.ts
@@ -41,6 +41,10 @@ export interface ITdDataTableSelectAllEvent {
   selected: boolean;
 }
 
+export interface ITdDataTableClickEvent {
+  row: any;
+}
+
 @Component({
   providers: [ TD_DATA_TABLE_CONTROL_VALUE_ACCESSOR ],
   selector: 'td-data-table',
@@ -229,6 +233,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 [ITdDataTableClickEvent] implemented object.
+   */
+  @Output('rowClick') onRowClick: EventEmitter<ITdDataTableClickEvent> = new EventEmitter<ITdDataTableClickEvent>();
+
   /**
    * selectAll?: function
    * Event emitted when all rows are selected/deselected by the all checkbox. [selectable] needs to be enabled.
@@ -319,31 +330,40 @@ 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'
    */
   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);
+
+      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];
+        }
+        let index: number = this._value.indexOf(row);
+        if (index > -1) {
+          this._value.splice(index, 1);
+        }
       }
+      this.onRowSelect.emit({row: row, selected: checked});
+      this.onChange(this._value);
     }
-    this.onRowSelect.emit({row: row, selected: checked});
-    this.onChange(this._value);
+  }
+
+  /**
+   * emits the onRowClickEvent when a row is clicked
+   */
+  clickRow(row: any): void {
+    this.onRowClick.emit({row: row});
   }
 
   /**