[ADF-3196] fixed task selection and double click (#3484)

docs/core/datatable.component.md

@@ -271,7 +271,6 @@ export class DataTableDemo {
 | rowStyle | `string` |  | The inline style to apply to every row. See [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples. |
 | rowStyleClass | `string` | "" | The CSS class to apply to every row. |
 | rows | `any[]` |  \[] | The rows that the datatable will show. |
-| selectFirstRow | `boolean` | true | Toggles the first row selection. |
 | selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
 | showHeader | `boolean` | true | Toggles the header. |
 | sorting | `any[]` |  \[] | Define the sort order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |

docs/process-services/task-list.component.md

@@ -53,7 +53,7 @@ Renders a list containing all the tasks matched by the parameters specified.
 | page | `number` | 0 | The page number of the tasks to fetch. |
 | processDefinitionKey | `string` |  | **Deprecated:** 2.4.0 |
 | processInstanceId | `string` |  | The Instance Id of the process. |
-| selectFirstRow | `boolean` | true |  |
+| selectFirstRow | `boolean` | true | Automatically tries to select the first row if a landingTaskId is not given |
 | selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
 | size | `number` |  [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of tasks to fetch. Default value: 25. |
 | sort | `string` |  | Define the sort order of the tasks. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |

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

@@ -55,7 +55,6 @@
                  [ngStyle]="rowStyle"
                  [ngClass]="getRowStyle(row)"
                  (keyup)="onRowKeyUp(row, $event)">
-
                 <!-- Actions (left) -->
                 <div *ngIf="actions && actionsPosition === 'left'" class="adf-datatable-table-cell">
                     <button mat-icon-button [matMenuTriggerFor]="menu"

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

@@ -319,27 +319,29 @@ describe('DataTable', () => {
         expect(dataTable.resetSelection).toHaveBeenCalled();
     });
 
-    it('should select first row when selectFirstRow set to true', () => {
+    it('should select the row where isSelected is true', () => {
-        dataTable.selectFirstRow = true;
+        dataTable.rows = [
-        dataTable.rows = [{ name: 'TEST1' }, { name: 'FAKE2' }, { name: 'TEST2' }, { name: 'FAKE2' }];
+                { name: 'TEST1' },
+                { name: 'FAKE2' },
+                { name: 'TEST2', isSelected : true },
+                { name: 'FAKE2' }];
         dataTable.data = new ObjectDataTableAdapter([],
             [new ObjectDataColumn({ key: 'name' })]
         );
         fixture.detectChanges();
         const rows = dataTable.data.getRows();
-        expect(rows[0].isSelected).toBeTruthy();
+        expect(rows[0].isSelected).toBeFalsy();
         expect(rows[1].isSelected).toBeFalsy();
-        expect(rows[2].isSelected).toBeFalsy();
+        expect(rows[2].isSelected).toBeTruthy();
+        expect(rows[3].isSelected).toBeFalsy();
     });
 
-    it('should not select first row when selectFirstRow set to false', () => {
+    it('should not select any row when isSelected is not defined', () => {
-        dataTable.selectFirstRow = false;
         const dataRows =
             [
                 { name: 'TEST1' },
                 { name: 'FAKE2' },
-                { name: 'TEST2' },
+                { name: 'TEST2' }
-                { name: 'FAKE2' }
             ];
         dataTable.data = new ObjectDataTableAdapter(dataRows,
             [new ObjectDataColumn({ key: 'name' })]

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

@@ -74,10 +74,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     @Input()
     columns: any[] = [];
 
-    /* Toggles default selection of the first row */
-    @Input()
-    selectFirstRow: boolean = true;
-
     /** Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
      * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
      */
@@ -202,7 +198,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
                 this.initTable();
             } else {
                 this.data = changes['data'].currentValue;
-                this.setupData(this.data);
+                this.resetSelection();
             }
             return;
         }
@@ -212,7 +208,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
                 this.initTable();
             } else {
                 this.setTableRows(changes['rows'].currentValue);
-                this.setupData(this.data);
             }
             return;
         }
@@ -239,7 +234,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     }
 
     convertToRowsData(rows: any []): ObjectDataRow[] {
-        return rows.map(row => new ObjectDataRow(row));
+        return rows.map(row => new ObjectDataRow(row, row.isSelected));
     }
 
     convertToDataSorting(sorting: any[]): DataSorting {
@@ -301,23 +296,8 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
 
     private initTable() {
         this.data = new ObjectDataTableAdapter(this.rows, this.columns);
-        this.setupData(this.data);
-        this.rowMenuCache = {};
-    }
-
-    private setupData(adapter: DataTableAdapter) {
-        if (this.dataRowsChanged) {
-            this.dataRowsChanged.unsubscribe();
-            this.dataRowsChanged = null;
-        }
-
         this.resetSelection();
-
+        this.rowMenuCache = {};
-        if (adapter && adapter.rowsChanged) {
-            this.dataRowsChanged = adapter.rowsChanged.subscribe(() => {
-                this.resetSelection();
-            });
-        }
     }
 
     isTableEmpty() {
@@ -326,21 +306,8 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
 
     private setTableRows(rows: any[]) {
         if (this.data) {
-            if (rows && rows.length > 0) {
+            this.resetSelection();
-                this.resetSelection();
-            }
             this.data.setRows(this.convertToRowsData(rows));
-            this.selectFirst();
-        }
-    }
-
-    private selectFirst() {
-        if (this.selectFirstRow) {
-            if (this.data && this.data.getRows().length > 0) {
-                let row = this.data.getRows()[0];
-                row.isSelected = true;
-                this.data.selectedRow = row;
-            }
         }
     }
 

lib/process-services/task-list/components/task-list.component.html

@@ -6,7 +6,6 @@
             [columns]="columns"
             [sorting]="sorting"
             [loading]="isLoading"
-            [selectFirstRow]="selectFirstRow"
             [multiselect]="multiselect"
             [selectionMode]="selectionMode"
             (row-select)="onRowSelect($event)"

lib/process-services/task-list/components/task-list.component.ts

@@ -252,19 +252,18 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
      */
     selectTask(taskIdSelected: string): void {
         if (!this.isListEmpty()) {
-            let dataRow;
+            let dataRow = null;
             if (taskIdSelected) {
                 dataRow = this.rows.find((currentRow: any) => {
                     return currentRow['id'] === taskIdSelected;
                 });
-                if (!dataRow) {
+            } else if (this.selectFirstRow) {
-                    dataRow = this.rows[0];
-                }
-            } else {
                 dataRow = this.rows[0];
             }
-            this.rows[0] = dataRow;
+            if (dataRow) {
-            this.currentInstanceId = dataRow['id'];
+                dataRow.isSelected = true;
+                this.currentInstanceId = dataRow['id'];
+            }
         } else {
             this.currentInstanceId = null;
         }