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

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

* [ADF-2608] fixed test for datatable

lib/core/datatable/components/datatable/datatable.component.html

@@ -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 *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}</mat-icon>
+                                <ng-template #no_iconvalue>
                                     <mat-icon class="adf-datatable-selected"
-                                          *ngIf="!isIconValue(row, col) && row.isSelected" svgIcon="selected">
+                                        *ngIf="row.isSelected; else no_selected_row" svgIcon="selected">
                                     </mat-icon>
-
+                                    <ng-template #no_selected_row>
-                                <img *ngIf="!isIconValue(row, col) && !row.isSelected"
+                                            <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>

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -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);
+        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.onRowClick(rows[0], null);
+        dataTable.rowClick.subscribe((event) => {
             expect(rows[0].isSelected).toBeTruthy();
             expect(rows[1].isSelected).toBeFalsy();
+            done();
+        });
+        dataTable.onRowClick(rows[0], null);
     });
 
-    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' } ],
+            [{ name: '1', isSelected: true }],
-            [ new ObjectDataColumn({ key: 'name'}) ]
+            [new ObjectDataColumn({ key: 'name' })]
         );
         const rows = dataTable.data.getRows();
+        rows[0].isSelected = true;
 
         dataTable.ngOnChanges({});
-        dataTable.onRowClick(rows[0], null);
+        dataTable.rowClick.subscribe(() => {
-        expect(rows[0].isSelected).toBeTruthy();
-
-        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();
+            done();
         });
 
-    it('should select multiple rows with [multiple] selection mode', () => {
+        dataTable.onRowClick(rows[0], <any> { metaKey: true, preventDefault() { } });
+    });
+
+    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(() => {
-        dataTable.onRowClick(rows[1], event);
-
             expect(rows[0].isSelected).toBeTruthy();
             expect(rows[1].isSelected).toBeTruthy();
+            done();
+        });
+        dataTable.onRowClick(rows[1], event);
     });
 
     it('should put actions menu to the right by default', () => {

lib/core/datatable/components/datatable/datatable.component.ts

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