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

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -37,7 +37,10 @@
                                            [sort]="taskFilter.filter.sort"
                                            [data]="dataTasks"
                                            [landingTaskId]="currentTaskId"
-                                           (rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
+                                           (rowClick)="onTaskRowClick($event)" 
+                                           (onSuccess)="onSuccessTaskList($event)"
+                                           (row-click)="onRowClick($event)"
+                                           (row-dblclick)="onRowDblClick($event)"
                                            #activititasklist>
                             <!-- Custom column definition demo -->
                             <!--

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -288,4 +288,12 @@ export class ActivitiDemoComponent implements AfterViewInit {
         this.activitiprocessfilter.selectFilter(null);
     }
 
+    onRowClick(event) {
+        console.log(event);
+    }
+
+    onRowDblClick(event) {
+        console.log(event);
+    }
+
 }

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -4,7 +4,9 @@
         [multiselect]="multiselect"
         [actions]="true"
         (showRowActionsMenu)="onShowRowActionsMenu($event)"
-        (executeRowAction)="onExecuteRowAction($event)">
+        (executeRowAction)="onExecuteRowAction($event)"
+        (row-click)="onRowClick($event)"
+        (row-dblclick)="onRowDblClick($event)">
       <!-- HTML column definition demo -->
         <!--
         <data-columns>

demo-shell-ng2/app/components/datatable/datatable-demo.component.ts

@@ -154,4 +154,12 @@ export class DataTableDemoComponent {
         console.log(args.action);
         window.alert(`My custom action: ${args.action.title}`);
     }
+
+    onRowClick(event) {
+        console.log(event);
+    }
+
+    onRowDblClick(event) {
+        console.log(event);
+    }
 }

ng2-components/ng2-alfresco-datatable/README.md

@@ -210,7 +210,34 @@ Here's the list of available properties you can define for a Data Column definit
 | [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
 | [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
 
-**Advanced usage example**
+### DataTable DOM Events
+
+Below are the DOM events raised by DataTable component. 
+
+| Name | Description |
+| --- | --- |
+| row-click | Emitted when user clicks the row |
+| row-dblclick | Emitted when user double-clicks the row |
+
+These events are bubbled up the element tree and can be subscribed to from within parent components.
+
+```html
+<root-component (row-click)="onRowClick($event)">
+    <child-component>
+        <alfresco-datatable></alfresco-datatable>
+    </child-component>
+</root-component>
+```
+
+```ts
+onRowClick(event) {
+    console.log(event);
+}
+```
+
+![](docs/assets/datatable-dom-events.png)
+
+### Advanced usage
 
 ```html
 <alfresco-datatable
@@ -237,15 +264,16 @@ _This event is emitted when user clicks the row._
 Event properties:
 
 ```ts
-row: DataRow, // row clicked
+sender: any     // DataTable instance 
-event: Event  // original HTML DOM event
+value: DataRow, // row clicked
+event: Event    // original HTML DOM event
 ```
 
 Handler example:
 
 ```ts
 onRowClicked(event: DataRowEvent) {
-    console.log(event.row);
+    console.log(event.value);
 }
 ```
 
@@ -258,15 +286,16 @@ _This event is emitted when user double-clicks the row._
 Event properties:
 
 ```ts
-row: DataRow, // row clicked
+sender: any     // DataTable instance 
-event: Event  // original HTML DOM event
+value: DataRow, // row clicked
+event: Event    // original HTML DOM event
 ```
 
 Handler example:
 
 ```ts
 onRowDblClicked(event: DataRowEvent) {
-    console.log(event.row);
+    console.log(event.value);
 }
 ```
 

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;
     }
 
 }

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts

@@ -444,7 +444,7 @@ describe('DocumentList', () => {
 
     it('should check [empty folder] template ', () => {
         documentList.emptyFolderTemplate = <TemplateRef<any>> {};
-        documentList.dataTable = new DataTableComponent();
+        documentList.dataTable = new DataTableComponent(null);
         expect(documentList.dataTable).toBeDefined();
         expect(documentList.isEmptyTemplateDefined()).toBeTruthy();
 

ng2-components/ng2-alfresco-documentlist/src/components/empty-folder/empty-folder-content.component.spec.ts

@@ -29,7 +29,7 @@ describe('EmptyFolderContent', () => {
     beforeEach(() => {
         let documentListService = new DocumentListServiceMock();
         documentList = new DocumentListComponent(documentListService, null, null);
-        documentList.dataTable = new DataTableComponent();
+        documentList.dataTable = new DataTableComponent(null);
         emptyFolderContent = new EmptyFolderContentComponent(documentList);
     });