inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Improve the single and double click event

* Fix unit test
This commit is contained in:
Maurizio Vitale
2017-06-19 13:16:54 +01:00
committed by Eugenio Romano
parent 3ca7503ddb
commit 4e7c5bfdbf
3 changed files with 142 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

@@ -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"
@@ -61,14 +59,12 @@
<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>
<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 }}"
@@ -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">

67
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
View File

@@ -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();

73
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
View File

@@ -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) {