[ADF-833] DataTable - improve the single and double click event (#1979)

* Improve the single and double click event * Fix unit test
2025-07-31 17:38:48 +00:00 · 2017-06-19 13:16:54 +01:00
parent 3ca7503ddb
commit 4e7c5bfdbf
3 changed files with 142 additions and 68 deletions
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -7,7 +7,6 @@
        <th *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-header">
            <span class="sr-only">Actions</span>
        </th>
-
        <!-- Columns -->
        <th *ngIf="multiselect">
            <md-checkbox [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)"></md-checkbox>
@@ -29,7 +28,6 @@
    </tr>
    </thead>
    <tbody>
-    <ng-container *ngIf="!loading">

        <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
            class="alfresco-datatable__row"
@@ -55,40 +53,38 @@
                </ul>
            </td>

-            <td *ngIf="multiselect">
-                <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
-            </td>
-            <td *ngFor="let col of data.getColumns()"
-                class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
-                (click)="onRowClick(row, $event)"
-                (dblclick)="onRowDblClick(row, $event)"
-                [context-menu]="getContextMenuActions(row, col)"
-                [context-menu-enabled]="contextMenu">
-                <div *ngIf="!col.template" class="cell-container">
-                    <ng-container [ngSwitch]="col.type">
-                        <div *ngSwitchCase="'image'" class="cell-value">
-                            <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row,
-                                col)}}</i>
-                            <img *ngIf="!isIconValue(row, col)"
-                                 class="image-cell"
-                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                                 src="{{ data.getValue(row, col) }}"
-                                 (error)="onImageLoadingError($event)">
-                        </div>
-                        <div *ngSwitchCase="'icon'" class="cell-value">
-                            <img class="image-cell"
-                                 alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
-                                 src="{{ data.getValue(row, col) }}"
-                                 (error)="onImageLoadingError($event)">
-                        </div>
-                        <div *ngSwitchCase="'date'" class="cell-value"
-                             [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
-                        </div>
-                        <div *ngSwitchCase="'text'" class="cell-value"
-                             [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                            <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
-                        </div>
+        <td *ngIf="multiselect">
+            <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
+        </td>
+        <td *ngFor="let col of data.getColumns()"
+            class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
+            (click)="onRowClick(row, $event)"
+            [context-menu]="getContextMenuActions(row, col)"
+            [context-menu-enabled]="contextMenu">
+            <div *ngIf="!col.template" class="cell-container">
+                <ng-container [ngSwitch]="col.type">
+                    <div *ngSwitchCase="'image'" class="cell-value">
+                        <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
+                        <img *ngIf="!isIconValue(row, col)"
+                             class="image-cell"
+                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                             src="{{ data.getValue(row, col) }}"
+                             (error)="onImageLoadingError($event)">
+                    </div>
+                    <div *ngSwitchCase="'icon'" class="cell-value">
+                        <img class="image-cell"
+                             alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
+                             src="{{ data.getValue(row, col) }}"
+                             (error)="onImageLoadingError($event)">
+                    </div>
+                    <div *ngSwitchCase="'date'" class="cell-value"
+                         [attr.data-automation-id]="'date_' + data.getValue(row, col)">
+                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                    </div>
+                    <div *ngSwitchCase="'text'" class="cell-value"
+                         [attr.data-automation-id]="'text_' + data.getValue(row, col)">
+                        <alfresco-datatable-cell [data]="data" [column]="col" [row]="row"></alfresco-datatable-cell>
+                    </div>
                    <span *ngSwitchDefault class="cell-value">
                    <!-- empty cell for unknown column type -->
                    </span>
@@ -129,8 +125,6 @@
                </ng-template>
            </td>
        </tr>
-    </ng-container>
-
    <tr *ngIf="loading">
        <td class="mdl-data-table__cell--non-numeric adf-loading-content-container"
            [attr.colspan]="1 + data.getColumns().length">
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
@@ -101,6 +101,7 @@ describe('DataTable', () => {
        );
        const rows = dataTable.data.getRows();

+        dataTable.ngOnChanges({});
        dataTable.onRowClick(rows[0], null);
        expect(rows[0].isSelected).toBeTruthy();
        expect(rows[1].isSelected).toBeFalsy();
@@ -121,6 +122,7 @@ describe('DataTable', () => {
        );
        const rows = dataTable.data.getRows();

+        dataTable.ngOnChanges({});
        dataTable.onRowClick(rows[0], null);
        expect(rows[0].isSelected).toBeTruthy();
        expect(rows[1].isSelected).toBeFalsy();
@@ -145,6 +147,7 @@ describe('DataTable', () => {
            metaKey: true
        });

+        dataTable.ngOnChanges({});
        dataTable.onRowClick(rows[0], event);
        dataTable.onRowClick(rows[1], event);

@@ -212,18 +215,65 @@ describe('DataTable', () => {
            done();
        });

+        dataTable.ngOnChanges({});
        dataTable.onRowClick(row, null);
    });

-    it('should emit row double-click event', done => {
-        let row = <DataRow> {};
+    it('should emit double click if there are two single click in 250ms', (done) => {

-        dataTable.rowDblClick.subscribe(e => {
-            expect(e.value).toBe(row);
+        let row = <DataRow> {};
+        dataTable.ngOnChanges({});
+
+        dataTable.rowDblClick.subscribe( () => {
            done();
        });

-        dataTable.onRowDblClick(row, null);
+        dataTable.onRowClick(row, null);
+        setTimeout(() => {
+                dataTable.onRowClick(row, null);
+            }
+            , 240);
+
+    });
+
+    it('should emit double click if there are more than two single click in 250ms', (done) => {
+
+        let row = <DataRow> {};
+        dataTable.ngOnChanges({});
+
+        dataTable.rowDblClick.subscribe( () => {
+            done();
+        });
+
+        dataTable.onRowClick(row, null);
+        setTimeout(() => {
+
+                dataTable.onRowClick(row, null);
+                dataTable.onRowClick(row, null);
+            }
+            , 240);
+
+    });
+
+    it('should emit single click if there are two single click in more than 250ms', (done) => {
+
+        let row = <DataRow> {};
+        let clickCount = 0;
+
+        dataTable.ngOnChanges({});
+
+        dataTable.rowClick.subscribe( () => {
+            clickCount += 1;
+            if (clickCount === 2) {
+                done();
+            }
+        });
+
+        dataTable.onRowClick(row, null);
+        setTimeout(() => {
+                dataTable.onRowClick(row, null);
+            }
+            , 260);
    });

    it('should emit row-click dom event', (done) => {
@@ -234,6 +284,7 @@ describe('DataTable', () => {
            done();
        });

+        dataTable.ngOnChanges({});
        dataTable.onRowClick(row, null);
    });

@@ -244,8 +295,9 @@ describe('DataTable', () => {
            expect(e.detail.value).toBe(row);
            done();
        });
-
-        dataTable.onRowDblClick(row, null);
+        dataTable.ngOnChanges({});
+        dataTable.onRowClick(row, null);
+        dataTable.onRowClick(row, null);
    });

    it('should prevent default behaviour on row click event', () => {
@@ -257,6 +309,7 @@ describe('DataTable', () => {

    it('should prevent default behaviour on row double-click event', () => {
        let e = jasmine.createSpyObj('event', ['preventDefault']);
+        dataTable.ngOnChanges({});
        dataTable.ngAfterContentInit();
        dataTable.onRowDblClick(null, e);
        expect(e.preventDefault).toHaveBeenCalled();
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
@@ -21,6 +21,7 @@ import { DataCellEvent } from './data-cell.event';
 import { DataRowActionEvent } from './data-row-action.event';
 import { DataColumnListComponent } from 'ng2-alfresco-core';
 import { MdCheckboxChange } from '@angular/material';
+import { Observable, Observer } from 'rxjs/Rx';

 declare var componentHandler;

@@ -89,7 +90,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges {

    isSelectAllChecked: boolean = false;

+    private clickObserver: Observer<DataRowEvent>;
+    private click$: Observable<DataRowEvent>;
+
    constructor(@Optional() private el: ElementRef) {
+        this.click$ = new Observable<DataRowEvent>(observer => this.clickObserver = observer).share();
    }

    ngAfterContentInit() {
@@ -111,6 +116,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
    }

    ngOnChanges(changes: SimpleChanges) {
+        this.initAndSubscribeClickStream();
        if (this.isPropertyChanged(changes['data'])) {
            if (this.isTableEmpty()) {
                this.initTable();
@@ -140,6 +146,46 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
        return rows.map(row => new ObjectDataRow(row));
    }

+    private initAndSubscribeClickStream() {
+        let singleClickStream = this.click$
+            .buffer(this.click$.debounceTime(250))
+            .map(list => list)
+            .filter(x => x.length === 1);
+
+        singleClickStream.subscribe((obj: DataRowEvent[]) => {
+            let event: DataRowEvent = obj[0];
+            let el = obj[0].sender.el;
+            this.rowClick.emit(event);
+            if (!event.defaultPrevented && el.nativeElement) {
+                el.nativeElement.dispatchEvent(
+                    new CustomEvent('row-click', {
+                        detail: event,
+                        bubbles: true
+                    })
+                );
+            }
+        });
+
+        let multiClickStream = this.click$
+            .buffer(this.click$.debounceTime(250))
+            .map(list => list)
+            .filter(x => x.length >= 2);
+
+        multiClickStream.subscribe((obj: DataRowEvent[]) => {
+            let event: DataRowEvent = obj[0];
+            let el = obj[0].sender.el;
+            this.rowDblClick.emit(event);
+            if (!event.defaultPrevented && el.nativeElement) {
+                el.nativeElement.dispatchEvent(
+                    new CustomEvent('row-dblclick', {
+                        detail: event,
+                        bubbles: true
+                    })
+                );
+            }
+        });
+    }
+
    private initTable() {
        this.data = new ObjectDataTableAdapter(this.rows, []);
    }
@@ -190,17 +236,8 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
                }
            }

-            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
-                    })
-                );
-            }
+            let dataRowEvent = new DataRowEvent(row, e, this);
+            this.clickObserver.next(dataRowEvent);
        }
    }

@@ -217,18 +254,8 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
        if (e) {
            e.preventDefault();
        }
-
-        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
-                })
-            );
-        }
+        let dataRowEvent = new DataRowEvent(row, e, this);
+        this.clickObserver.next(dataRowEvent);
    }

    onColumnHeaderClick(column: DataColumn) {