[ADF-2505] ADF Processlist multi selection issues. (#3115)

* [ADF-2505] Added new input to check if first row has to be selected

* [ADF-2505] Reset selection when data changes

* [ADF-2505] Added documentation

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

@@ -34,6 +34,7 @@ Renders a list containing all the process instances matched by the parameters sp
 | data | DataTableAdapter |  | Data source to define the datatable. |
 | multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row. |
 | 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. |
+| selectFirstRow | boolean | true | Toggles default selection of the first row. |
 
 ### Events
 

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

@@ -1,6 +1,5 @@
-<div *ngIf="!requestNode">{{ 'ADF_PROCESS_LIST.FILTERS.MESSAGES.NONE' | translate }}</div>
+<div>
-<div *ngIf="requestNode">
+    <adf-datatable #dataTable
-    <adf-datatable
         [data]="data"
         [loading]="isLoading"
         [selectionMode]="selectionMode"
@@ -21,7 +20,7 @@
             <!--Add your custom empty template here-->
             <ng-template>
                 <div class="no-content-message">
-                    {{ 'ADF_PROCESS_LIST.LIST.NONE' | translate }}
+                    {{ (requestNode ? 'ADF_PROCESS_LIST.LIST.NONE' : 'ADF_PROCESS_LIST.FILTERS.MESSAGES.NONE') | translate }}
                 </div>
             </ng-template>
         </no-content-template>

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

@@ -279,6 +279,27 @@ describe('ProcessInstanceListComponent', () => {
         expect(dataRow[1].isSelected).toEqual(false);
     });
 
+    it('should not select first row when selectFirstRow is false', () => {
+        component.data = new ObjectDataTableAdapter(
+            [
+                { id: '999', name: 'Fake-name' },
+                { id: '888', name: 'Fake-name-888' }
+            ],
+            [
+                { type: 'text', key: 'id', title: 'Id' },
+                { type: 'text', key: 'name', title: 'Name' }
+            ]
+        );
+        component.selectFirstRow = false;
+        component.selectFirst();
+        const dataRow = component.data.getRows();
+        expect(dataRow).toBeDefined();
+        expect(dataRow[0].getValue('id')).toEqual('999');
+        expect(dataRow[0].isSelected).toEqual(false);
+        expect(dataRow[1].getValue('id')).toEqual('888');
+        expect(dataRow[1].isSelected).toEqual(false);
+    });
+
     it('should throw an exception when the response is wrong', fakeAsync(() => {
         let emitSpy: jasmine.Spy = spyOn(component.error, 'emit');
         let mockError = 'Fake server error';

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

@@ -19,6 +19,7 @@ import {
     DataColumn,
     DataRowEvent,
     DataSorting,
+    DataTableComponent,
     DataTableAdapter,
     ObjectDataColumn,
     ObjectDataRow,
@@ -41,7 +42,8 @@ import {
     Input,
     OnChanges,
     Output,
-    SimpleChanges
+    SimpleChanges,
+    ViewChild
 } from '@angular/core';
 import { ProcessFilterParamRepresentationModel } from '../models/filter-process.model';
 import { processPresetsDefaultModel } from '../models/process-preset.model';
@@ -59,6 +61,8 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
+    @ViewChild('dataTable') dataTable: DataTableComponent;
+
     /** The id of the app. */
     @Input()
     appId: number;
@@ -108,6 +112,10 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
     @Input()
     selectionMode: string = 'single'; // none|single|multiple
 
+    /* Toggles default selection of the first row */
+    @Input()
+    selectFirstRow: boolean = true;
+
     /** Emitted when a row in the process list is clicked. */
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
@@ -243,6 +251,7 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
      */
     private renderInstances(instances: any[]) {
         instances = this.optimizeNames(instances);
+        this.dataTable.resetSelection();
         this.setDatatableSorting();
         this.data.setRows(instances);
     }
@@ -266,16 +275,18 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
      * Select the first instance of a list if present
      */
     selectFirst() {
-        if (!this.isListEmpty()) {
+        if (this.selectFirstRow) {
-            let row = this.data.getRows()[0];
+            if (!this.isListEmpty()) {
-            row.isSelected = true;
+                let row = this.data.getRows()[0];
-            this.data.selectedRow = row;
+                row.isSelected = true;
-            this.currentInstanceId = row.getValue('id');
+                this.data.selectedRow = row;
-        } else {
+                this.currentInstanceId = row.getValue('id');
-            if (this.data) {
+            } else {
-                this.data.selectedRow = null;
+                if (this.data) {
+                    this.data.selectedRow = null;
+                }
+                this.currentInstanceId = null;
             }
-            this.currentInstanceId = null;
         }
     }