extra DOM events for DataTable (#1723)

* extra DOM events for DataTable

- support for ‘row-click’ DOM event (bubbling)
- support for ‘row-dblclick’ DOM event (bubbling)
- DataRowEvent exposes ‘sender’ property to simplify access to
component from within handlers
- readme and test updates

* fix unit tests

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -46,10 +46,6 @@ describe('DataTable', () => {
         fixture = TestBed.createComponent(DataTableComponent);
         dataTable = fixture.componentInstance;
         element = fixture.debugElement.nativeElement;
-
-        // usernameInput = element.querySelector('#username');
-        // passwordInput = element.querySelector('#password');
-
         fixture.detectChanges();
     });
 
@@ -93,7 +89,7 @@ describe('DataTable', () => {
     });
 
     it('should initialize default adapter', () => {
-        let table = new DataTableComponent();
+        let table = new DataTableComponent(null);
         expect(table.data).toBeUndefined();
         table.ngAfterContentInit();
         expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter));
@@ -128,6 +124,28 @@ describe('DataTable', () => {
         dataTable.onRowDblClick(row, null);
     });
 
+    it('should emit row-click dom event', (done) => {
+        let row = <DataRow> {};
+
+        fixture.nativeElement.addEventListener('row-click', (e) => {
+            expect(e.detail.value).toBe(row);
+            done();
+        });
+
+        dataTable.onRowClick(row, null);
+    });
+
+    it('should emit row-dblclick dom event', (done) => {
+        let row = <DataRow> {};
+
+        fixture.nativeElement.addEventListener('row-dblclick', (e) => {
+            expect(e.detail.value).toBe(row);
+            done();
+        });
+
+        dataTable.onRowDblClick(row, null);
+    });
+
     it('should prevent default behaviour on row click event', () => {
         let e = jasmine.createSpyObj('event', ['preventDefault']);
         dataTable.ngAfterContentInit();

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, TemplateRef, AfterContentInit, ContentChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, TemplateRef, AfterContentInit, ContentChild, Optional } from '@angular/core';
 import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter } from '../../data/index';
 import { DataCellEvent } from './data-cell.event';
 import { DataRowActionEvent } from './data-row-action.event';
@@ -73,6 +73,9 @@ export class DataTableComponent implements AfterContentInit {
         return this.data.selectedRow;
     }
 
+    constructor(@Optional() private el: ElementRef) {
+    }
+
     ngAfterContentInit() {
         let schema: DataColumn[] = [];
 
@@ -101,7 +104,17 @@ export class DataTableComponent implements AfterContentInit {
             this.data.selectedRow = row;
         }
 
-        this.rowClick.emit(new DataRowEvent(row, e));
+        let event = new DataRowEvent(row, e, this);
+        this.rowClick.emit(event);
+
+        if (!event.defaultPrevented && this.el.nativeElement) {
+            this.el.nativeElement.dispatchEvent(
+                new CustomEvent('row-click', {
+                    detail: event,
+                    bubbles: true
+                })
+            );
+        }
     }
 
     onRowDblClick(row: DataRow, e?: Event) {
@@ -109,7 +122,17 @@ export class DataTableComponent implements AfterContentInit {
             e.preventDefault();
         }
 
-        this.rowDblClick.emit(new DataRowEvent(row, e));
+        let event = new DataRowEvent(row, e, this);
+        this.rowDblClick.emit(event);
+
+        if (!event.defaultPrevented && this.el.nativeElement) {
+            this.el.nativeElement.dispatchEvent(
+                new CustomEvent('row-dblclick', {
+                    detail: event,
+                    bubbles: true
+                })
+            );
+        }
     }
 
     onColumnHeaderClick(column: DataColumn) {

ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts

@@ -56,10 +56,13 @@ export class DataSorting {
 
 export class DataRowEvent extends BaseUIEvent<DataRow> {
 
-    constructor(value: DataRow, domEvent: Event) {
+    sender: any;
+
+    constructor(value: DataRow, domEvent: Event, sender?: any) {
         super();
         this.value = value;
         this.event = domEvent;
+        this.sender = sender;
     }
 
 }