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

[ADF-2608] added a fix to handle selection on slow connection problem (#3350)

Browse Source 
* [ADF-2608] added a fix to handle selection on slow connection problem

* [ADF-2608] fixed test for datatable
This commit is contained in:
Vito
2018-05-22 14:09:27 +01:00
committed by Eugenio Romano
parent b2e35c3560
commit 5e7eb08383
3 changed files with 75 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -92,15 +92,18 @@
<div *ngIf="!col.template" class="cell-container">
<ng-container [ngSwitch]="col.type">
<div *ngSwitchCase="'image'" class="cell-value">
<mat-icon *ngIf="isIconValue(row, col)">{{ asIconValue(row, col) }}</mat-icon>
<mat-icon class="adf-datatable-selected"
*ngIf="!isIconValue(row, col) && row.isSelected" svgIcon="selected">
</mat-icon>
<img *ngIf="!isIconValue(row, col) && !row.isSelected"
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event, row.obj.entry.content.mimeType)">
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}</mat-icon>
<ng-template #no_iconvalue>
<mat-icon class="adf-datatable-selected"
*ngIf="row.isSelected; else no_selected_row" svgIcon="selected">
</mat-icon>
<ng-template #no_selected_row>
<img
alt="{{ iconAltTextKey(data.getValue(row, col)) | translate }}"
src="{{ data.getValue(row, col) }}"
(error)="onImageLoadingError($event, row.obj.entry.content.mimeType)">
</ng-template>
</ng-template>
</div>
<div *ngSwitchCase="'icon'" class="cell-value">
<span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>

102
lib/core/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -16,7 +16,7 @@
*/
import { SimpleChange, NO_ERRORS_SCHEMA, QueryList } from '@angular/core';
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { ComponentFixture, TestBed, fakeAsync, tick, async } from '@angular/core/testing';
import { MatCheckboxChange } from '@angular/material';
import { DataColumn } from '../../data/data-column.model';
import { DataRow } from '../../data/data-row.model';
@@ -231,25 +231,50 @@ describe('DataTable', () => {
expect(dataTable.resetSelection).toHaveBeenCalled();
});
it('should select only one row with [single] selection mode', () => {
it('should select only one row with [single] selection mode', (done) => {
dataTable.selectionMode = 'single';
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '1', isSelected: true },
{ name: '2' }
],
[ new ObjectDataColumn({ key: 'name'}) ]
[new ObjectDataColumn({ key: 'name' })]
);
const rows = dataTable.data.getRows();
dataTable.ngOnChanges({});
dataTable.onRowClick(rows[0], null);
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeFalsy();
dataTable.onRowClick(rows[1], null);
expect(rows[0].isSelected).toBeFalsy();
expect(rows[1].isSelected).toBeTruthy();
dataTable.rowClick.subscribe((event) => {
expect(rows[0].isSelected).toBeFalsy();
expect(rows[1].isSelected).toBeTruthy();
done();
});
dataTable.onRowClick(rows[1], new MouseEvent('click'));
});
it('should select only one row with [single] selection mode and key modifier', (done) => {
dataTable.selectionMode = 'single';
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1', isSelected: true },
{ name: '2' }
],
[new ObjectDataColumn({ key: 'name' })]
);
const rows = dataTable.data.getRows();
dataTable.ngOnChanges({});
dataTable.rowClick.subscribe((event) => {
expect(rows[0].isSelected).toBeFalsy();
expect(rows[1].isSelected).toBeTruthy();
done();
});
dataTable.onRowClick(rows[1], new MouseEvent('click', {
metaKey: true
}));
});
it('should select only one row with [single] selection mode pressing enter key', () => {
@@ -296,70 +321,67 @@ describe('DataTable', () => {
expect(rows[1].isSelected).toBeTruthy();
});
it('should not unselect the row with [single] selection mode', () => {
it('should NOT unselect the row with [single] selection mode', (done) => {
dataTable.selectionMode = 'single';
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '1', isSelected: true },
{ name: '2' }
],
[ new ObjectDataColumn({ key: 'name'}) ]
[new ObjectDataColumn({ key: 'name' })]
);
const rows = dataTable.data.getRows();
dataTable.ngOnChanges({});
dataTable.onRowClick(rows[0], null);
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeFalsy();
dataTable.rowClick.subscribe((event) => {
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeFalsy();
done();
});
dataTable.onRowClick(rows[0], null);
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeFalsy();
});
it('should unselect the row with [multiple] selection mode and modifier key', () => {
it('should unselect the row with [multiple] selection mode and modifier key', (done) => {
dataTable.selectionMode = 'multiple';
dataTable.data = new ObjectDataTableAdapter(
[ { name: '1' } ],
[ new ObjectDataColumn({ key: 'name'}) ]
[{ name: '1', isSelected: true }],
[new ObjectDataColumn({ key: 'name' })]
);
const rows = dataTable.data.getRows();
rows[0].isSelected = true;
dataTable.ngOnChanges({});
dataTable.onRowClick(rows[0], null);
expect(rows[0].isSelected).toBeTruthy();
dataTable.rowClick.subscribe(() => {
expect(rows[0].isSelected).toBeFalsy();
done();
});
dataTable.onRowClick(rows[0], null);
expect(rows[0].isSelected).toBeFalsy();
dataTable.onRowClick(rows[0], <any> { metaKey: true, preventDefault() {} });
expect(rows[0].isSelected).toBeTruthy();
dataTable.onRowClick(rows[0], <any> { metaKey: true, preventDefault() {} });
expect(rows[0].isSelected).toBeFalsy();
dataTable.onRowClick(rows[0], <any> { metaKey: true, preventDefault() { } });
});
it('should select multiple rows with [multiple] selection mode', () => {
it('should select multiple rows with [multiple] selection mode and modifier key', (done) => {
dataTable.selectionMode = 'multiple';
dataTable.data = new ObjectDataTableAdapter(
[
{ name: '1' },
{ name: '1', isSelected: true },
{ name: '2' }
],
[ new ObjectDataColumn({ key: 'name'}) ]
[new ObjectDataColumn({ key: 'name' })]
);
const rows = dataTable.data.getRows();
rows[0].isSelected = true;
const event = new MouseEvent('click', {
metaKey: true
});
dataTable.selection.push(rows[0]);
dataTable.ngOnChanges({});
dataTable.onRowClick(rows[0], event);
dataTable.rowClick.subscribe(() => {
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeTruthy();
done();
});
dataTable.onRowClick(rows[1], event);
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeTruthy();
});
it('should put actions menu to the right by default', () => {

2
lib/core/datatable/components/datatable/datatable.component.ts
View File

@@ -233,6 +233,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
this.singleClickStreamSub = singleClickStream.subscribe((obj: DataRowEvent[]) => {
let event: DataRowEvent = obj[0];
this.handleRowSelection(event.value, <MouseEvent | KeyboardEvent> event.event);
this.rowClick.emit(event);
if (!event.defaultPrevented) {
this.elementRef.nativeElement.dispatchEvent(
@@ -305,7 +306,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
}
if (row) {
this.handleRowSelection(row, e);
const dataRowEvent = new DataRowEvent(row, e, this);
this.clickObserver.next(dataRowEvent);
}