[ADF-3308] ProcessList Component - Provide a way to filter the list by fields (#3629)

* [ADF-3308] Removed name input added two inputs

* * [ADF-3308] Modified demo component

* [ADF-3367] Modified docs

* [ADF-3308] Added tests

* [ADF-3308] Deprecated processDefinitionKey property

demo-shell/src/app.config.json

@@ -501,10 +501,22 @@
                     "sortable": true
                 },
                 {
-                    "key": "created",
+                    "key": "id",
                     "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.ID",
+                    "sortable": true
+                },
+                {
+                    "key": "processDefinitionId",
+                    "type": "text",
+                    "title": "ADF_PROCESS_LIST.PROPERTIES.PROCESS_DEFINITION_ID",
+                    "sortable": true
+                },
+                {
+                    "key": "started",
+                    "type": "date",
                     "title": "ADF_PROCESS_LIST.PROPERTIES.CREATED",
-                    "cssClass": "hidden",
+                    "format": "timeAgo",
                     "sortable": true
                 }
             ]

demo-shell/src/app/components/process-list-demo/process-list-demo.component.html

@@ -15,14 +15,6 @@
             </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
-            <mat-label>Process Name</mat-label>
-            <input
-                matInput
-                class="form-control"
-                [formControl]="processName">
-        </mat-form-field>
-
         <mat-form-field>
             <mat-label>ProcessDefinitionId</mat-label>
             <input
@@ -33,7 +25,15 @@
         </mat-form-field>
 
         <mat-form-field>
-            <mat-label>State</mat-label>
+            <mat-label>ProcessInstanceId</mat-label>
+            <input
+                matInput
+                class="form-control"
+                [formControl]="processInstanceId">
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Status</mat-label>
             <mat-select
                 class="form-control"
                 [formControl]="processState">
@@ -60,10 +60,18 @@
     <adf-process-instance-list
         #processList
         [appId]="appId"
-        [processDefinitionKey]="processDefId"
+        [processDefinitionId]="processDefId"
+        [processInstanceId]="instanceId"
         [state]="state"
         [sort]="sort"
-        [name]="name">
+        [presetColumn]="presetColumn">
+        <data-columns>
+            <data-column key="ended" title="ADF_PROCESS_LIST.PROPERTIES.STATUS">
+                <ng-template let-entry="$implicit">
+                    <div title="{{getStatus(entry.row.obj.ended)}}">{{getStatus(entry.row.obj.ended)}}</div>
+                </ng-template>
+            </data-column>
+        </data-columns>
     </adf-process-instance-list>
 
     <adf-pagination

demo-shell/src/app/components/process-list-demo/process-list-demo.component.ts

@@ -37,10 +37,14 @@ export class ProcessListDemoComponent implements OnInit {
 
     processDefId: string;
 
+    instanceId: number|string;
+
     state: string;
 
     sort: string;
 
+    presetColumn = 'default';
+
     stateOptions = [
         {value: 'all', title: 'All'},
         {value: 'active', title: 'Active'},
@@ -49,9 +53,7 @@ export class ProcessListDemoComponent implements OnInit {
 
     sortOptions = [
         {value: 'created-asc', title: 'Created (asc)'},
-        {value: 'created-desc', title: 'Created (desc)'},
+        {value: 'created-desc', title: 'Created (desc)'}
-        {value: 'due-asc', title: 'Due (asc)'},
-        {value: 'due-desc', title: 'Due (desc)'}
     ];
 
     constructor(private route: ActivatedRoute,
@@ -70,8 +72,8 @@ export class ProcessListDemoComponent implements OnInit {
     buildForm() {
         this.processListForm = this.formBuilder.group({
             processAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
-            processName: new FormControl(''),
             processDefinitionId: new FormControl(''),
+            processInstanceId: new FormControl(''),
             processState: new FormControl(''),
             processSort: new FormControl('')
         });
@@ -90,6 +92,7 @@ export class ProcessListDemoComponent implements OnInit {
         this.appId = processFilter.processAppId;
         this.name = processFilter.processName;
         this.processDefId = processFilter.processDefinitionId;
+        this.instanceId = processFilter.processInstanceId;
         this.state = processFilter.processState;
         this.sort = processFilter.processSort;
     }
@@ -102,18 +105,22 @@ export class ProcessListDemoComponent implements OnInit {
         this.processListForm.reset();
     }
 
+    getStatus(ended: Date) {
+        return ended ? 'Completed' : 'Active';
+    }
+
     get processAppId(): AbstractControl {
         return this.processListForm.get('processAppId');
     }
 
-    get processName(): AbstractControl {
-        return this.processListForm.get('processName');
-    }
-
     get processDefinitionId(): AbstractControl {
         return this.processListForm.get('processDefinitionId');
     }
 
+    get processInstanceId(): AbstractControl {
+        return this.processListForm.get('processInstanceId');
+    }
+
     get processState(): AbstractControl {
         return this.processListForm.get('processState');
     }

demo-shell/src/app/components/process-service/process-service.component.html

@@ -137,7 +137,6 @@
                         #processList
                         *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
                         [processDefinitionKey]="processFilter?.filter?.processDefinitionKey"
-                        [name]="processFilter?.filter?.name"
                         [presetColumn]="presetColumn"
                         [state]="processFilter?.filter?.state"
                         [page]="processPage"

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

@@ -45,11 +45,11 @@ Renders a list containing all the process instances matched by the parameters sp
 | appId | `number` |  | The id of the app. |
 | data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) |  | Data source to define the datatable. |
 | multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row |
-| name | `string` |  | The name of the list. |
 | page | `number` | 0 | The page number of the processes to fetch. |
 | presetColumn | `string` |  | Name of a custom schema to fetch from `app.config.json`. |
-| processDefinitionKey | `string` |  | The processDefinitionKey of the process. |
 | processDefinitionId | `string` |  | The Definition Id of the process. |
+| processDefinitionKey | `string` |  | (**Deprecated:** 2.4.0) The Definition key of the process. |
+| processInstanceId | `number|string` |  | The id of the process instance. |
 | selectFirstRow | `boolean` | true | Toggles default selection of the first 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. |
 | size | `number` |  [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of processes to fetch in each page. |

lib/process-services/i18n/en.json

@@ -187,7 +187,8 @@
       "BUSINESS_KEY_DEFAULT": "None",
       "DESCRIPTION": "Description",
       "DESCRIPTION_DEFAULT": "No description",
-      "ID": "ID"
+      "ID": "ID",
+      "PROCESS_DEFINITION_ID": "Process Definition Id"
     },
     "MENU_ACTIONS": {
       "VIEW_CONTENT": "View",

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

@@ -481,9 +481,9 @@ describe('ProcessInstanceListComponent', () => {
             component.ngOnChanges({'sort': change});
         });
 
-        it('should reload the process list when the name parameter changes', (done) => {
+        it('should reload the process list when the processDefinitionKey parameter changes', (done) => {
-            const name = 'FakeTaskName';
+            const processDefinitionKey = 'SimpleProcess';
-            let change = new SimpleChange(null, name, true);
+            let change = new SimpleChange(null, processDefinitionKey, true);
 
             component.success.subscribe((res) => {
                 expect(res).toBeDefined();
@@ -494,7 +494,87 @@ describe('ProcessInstanceListComponent', () => {
                 done();
             });
 
-            component.ngOnChanges({'name': change});
+            component.ngOnChanges({'processDefinitionKey': change});
+        });
+
+        it('should reload the process list when the processDefinitionKey parameter changes to null', (done) => {
+            const processDefinitionKey = null;
+            let change = new SimpleChange('SimpleProcess', processDefinitionKey, false);
+
+            component.success.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(component.data).toBeDefined();
+                expect(component.isListEmpty()).not.toBeTruthy();
+                expect(component.data.getRows().length).toEqual(2);
+                expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
+                done();
+            });
+
+            component.ngOnChanges({'processDefinitionKey': change});
+        });
+
+        it('should reload the process list when the processDefinitionId parameter changes', (done) => {
+            const processDefinitionId = 'SimpleProcess:1:10';
+            let change = new SimpleChange(null, processDefinitionId, true);
+
+            component.success.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(component.data).toBeDefined();
+                expect(component.isListEmpty()).not.toBeTruthy();
+                expect(component.data.getRows().length).toEqual(2);
+                expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
+                done();
+            });
+
+            component.ngOnChanges({'processDefinitionId': change});
+        });
+
+        it('should reload the process list when the processDefinitionId parameter changes to null', (done) => {
+            const processDefinitionId = null;
+            let change = new SimpleChange('SimpleProcess:1:10', processDefinitionId, false);
+
+            component.success.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(component.data).toBeDefined();
+                expect(component.isListEmpty()).not.toBeTruthy();
+                expect(component.data.getRows().length).toEqual(2);
+                expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
+                done();
+            });
+
+            component.ngOnChanges({'processDefinitionId': change});
+        });
+
+        it('should reload the process list when the processInstanceId parameter changes', (done) => {
+            const processInstanceId = '123';
+            let change = new SimpleChange(null, processInstanceId, true);
+
+            component.success.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(component.data).toBeDefined();
+                expect(component.isListEmpty()).not.toBeTruthy();
+                expect(component.data.getRows().length).toEqual(2);
+                expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
+                done();
+            });
+
+            component.ngOnChanges({'processInstanceId': change});
+        });
+
+        it('should reload the process list when the processInstanceId parameter changes to null', (done) => {
+            const processInstanceId = null;
+            let change = new SimpleChange('123', processInstanceId, false);
+
+            component.success.subscribe((res) => {
+                expect(res).toBeDefined();
+                expect(component.data).toBeDefined();
+                expect(component.isListEmpty()).not.toBeTruthy();
+                expect(component.data.getRows().length).toEqual(2);
+                expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
+                done();
+            });
+
+            component.ngOnChanges({'processInstanceId': change});
         });
     });
 });

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

@@ -69,10 +69,20 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
     @Input()
     appId: number;
 
-    /** The processDefinitionKey of the process. */
+    /** The Definition Key of the process.
+     * @deprecated 2.4.0
+     */
     @Input()
     processDefinitionKey: string;
 
+    /** The Definition Id of the process. */
+    @Input()
+    processDefinitionId: string;
+
+    /** The id of the process instance. */
+    @Input()
+    processInstanceId: number|string;
+
     /** Defines the state of the processes. Possible values are `running`, `completed` and `all` */
     @Input()
     state: string;
@@ -83,10 +93,6 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
     @Input()
     sort: string;
 
-    /** The name of the list. */
-    @Input()
-    name: string;
-
     /** The page number of the processes to fetch. */
     @Input()
     page: number = 0;
@@ -191,22 +197,25 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
 
         let appId = changes['appId'];
         let processDefinitionKey = changes['processDefinitionKey'];
+        let processDefinitionId = changes['processDefinitionId'];
+        let processInstanceId = changes['processInstanceId'];
         let state = changes['state'];
         let sort = changes['sort'];
-        let name = changes['name'];
         let page = changes['page'];
         let size = changes['size'];
 
         if (appId && appId.currentValue) {
             changed = true;
-        } else if (processDefinitionKey && processDefinitionKey.currentValue) {
+        } else if (processDefinitionKey) {
+            changed = true;
+        } else if (processDefinitionId) {
+            changed = true;
+        } else if (processInstanceId) {
             changed = true;
         } else if (state && state.currentValue) {
             changed = true;
         } else if (sort && sort.currentValue) {
             changed = true;
-        } else if (name && name.currentValue) {
-            changed = true;
         } else if (page && page.currentValue !== page.previousValue) {
             changed = true;
         } else if (size && size.currentValue !== size.previousValue) {
@@ -371,6 +380,8 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
     private createRequestNode() {
         let requestNode = {
             appDefinitionId: this.appId,
+            processDefinitionId: this.processDefinitionId,
+            processInstanceId: this.processInstanceId,
             state: this.state,
             sort: this.sort,
             page: this.page,

lib/process-services/process-list/models/filter-process.model.ts

@@ -49,6 +49,7 @@ export class FilterProcessRepresentationModel implements UserProcessInstanceFilt
 export class ProcessFilterParamRepresentationModel implements ProcessFilterRequestRepresentation {
 
     processDefinitionId?: number;
+    processInstanceId?: number|string;
     appDefinitionId?: number;
     state?: string;
     sort?: string;
@@ -58,6 +59,7 @@ export class ProcessFilterParamRepresentationModel implements ProcessFilterReque
     constructor(obj?: any) {
         this.processDefinitionId = obj.processDefinitionId || null;
         this.appDefinitionId = obj.appDefinitionId || null;
+        this.processInstanceId = obj.processInstanceId || null;
         this.state = obj.state || null;
         this.sort = obj.sort || null;
         this.page = obj.page || null;