[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: 'due-asc', title: 'Due (asc)'},
-        {value: 'due-desc', title: 'Due (desc)'}
+        {value: 'created-desc', title: 'Created (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"