[ADF-3586] Refactor Process List page and fix query bugs (#3868)

demo-shell/resources/i18n/en.json

@@ -230,9 +230,12 @@
     }
   },
   "PROCESS_LIST_DEMO": {
-    "APP_ID_REQUIRED_ERROR": "Insert App ID",
+    "ERROR_MESSAGE": {
-    "APP_ID_TYPE_ERROR": "App ID must be a number"
+      "APP_ID_REQUIRED_ERROR": "Insert App ID",
+      "APP_ID_TYPE_ERROR": "App ID must be a number",
+      "NUMBER_GREATER_THAN": "Value must be greater than or equal to {{ value }}"
+    }
   },
   "GROUP-TITLE1-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION ONE",
   "GROUP-TITLE2-TRANSLATION-KEY": "CUSTOM TITLE TRANSLATION TWO"
-}
+}

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

@@ -8,10 +8,13 @@
                 class="form-control"
                 [formControl]="processAppId">
             <mat-error *ngIf="processAppId.hasError('required')">
-                {{ 'PROCESS_LIST_DEMO.APP_ID_REQUIRED_ERROR' | translate }}
+                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
             </mat-error>
             <mat-error *ngIf="processAppId.hasError('pattern')">
-                {{ 'PROCESS_LIST_DEMO.APP_ID_TYPE_ERROR' | translate }}
+                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
+            </mat-error>
+            <mat-error *ngIf="processAppId.hasError('min')">
+                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
             </mat-error>
         </mat-form-field>
 
@@ -25,15 +28,7 @@
         </mat-form-field>
 
         <mat-form-field>
-            <mat-label>ProcessInstanceId</mat-label>
+            <mat-label>State</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">
@@ -50,6 +45,35 @@
             </mat-select>
         </mat-form-field>
 
+
+        <mat-form-field>
+            <mat-label>Items per page</mat-label>
+            <input
+                matInput
+                class="form-control"
+                [formControl]="processSize">
+            <mat-error *ngIf="processSize.hasError('min')">
+                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
+            </mat-error>
+            <mat-error *ngIf="processSize.hasError('pattern')">
+                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
+            </mat-error>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Page</mat-label>
+            <input
+                matInput
+                class="form-control"
+                [formControl]="processPage">
+            <mat-error *ngIf="processPage.hasError('min')">
+                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
+            </mat-error>
+            <mat-error *ngIf="processPage.hasError('pattern')">
+                {{ 'PROCESS_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
+            </mat-error>
+        </mat-form-field>
+
         <div class="adf-reset-button">
             <button mat-raised-button (click)="resetProcessForm()">Reset</button>
         </div>
@@ -61,9 +85,10 @@
         #processList
         [appId]="appId"
         [processDefinitionId]="processDefId"
-        [processInstanceId]="instanceId"
         [state]="state"
         [sort]="sort"
+        [page]="page"
+        [size]="size"
         [presetColumn]="presetColumn">
         <data-columns>
             <data-column key="ended" title="ADF_PROCESS_LIST.PROPERTIES.STATUS">
@@ -71,6 +96,8 @@
                     <div title="{{getStatus(entry.row.obj.ended)}}">{{getStatus(entry.row.obj.ended)}}</div>
                 </ng-template>
             </data-column>
+            <data-column key="started" title="Started"></data-column>
+            <data-column key="processDefinitionId" title="Process Definition Id"></data-column>
         </data-columns>
     </adf-process-instance-list>
 

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

@@ -1,12 +1,15 @@
 .process-list-inputs {
-    margin-top: 100px;
+    margin: 20px auto 0;
-    margin-bottom: 50px;
+    max-width: 1200px;
-    display: flex;
+
-    justify-content: space-evenly;
+    & mat-form-field {
+        margin: 20px 5px;
+        width: calc(100% * (1/4) - 10px);
+    }
 }
 
 .adf-reset-button {
-    margin-top: 50px;
+    margin-bottom: 50px;
     display: flex;
     justify-content: center;
 }

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

@@ -27,21 +27,18 @@ import { debounceTime } from 'rxjs/operators';
 
 export class ProcessListDemoComponent implements OnInit {
 
+    DEFAULT_SIZE = 20;
+
+    minValue = 1;
+
     processListForm: FormGroup;
 
-    defaultAppId: number;
-
     appId: number;
-
-    name: string;
-
     processDefId: string;
-
-    instanceId: number|string;
-
     state: string;
-
     sort: string;
+    size: number = this.DEFAULT_SIZE;
+    page: number = 0;
 
     presetColumn = 'default';
 
@@ -61,22 +58,27 @@ export class ProcessListDemoComponent implements OnInit {
     }
 
     ngOnInit() {
+        this.resetQueryParameters();
+
         if (this.route) {
             this.route.params.forEach((params: Params) => {
-                this.defaultAppId = params['id'] ? +params['id'] : 0;
+                if (params['id']) {
+                    this.appId = params['id'];
+                }
             });
         }
-        this.appId = this.defaultAppId;
+
         this.buildForm();
     }
 
     buildForm() {
         this.processListForm = this.formBuilder.group({
-            processAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
+            processAppId: new FormControl(this.appId, [Validators.required, Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]),
             processDefinitionId: new FormControl(''),
-            processInstanceId: new FormControl(''),
             processState: new FormControl(''),
-            processSort: new FormControl('')
+            processSort: new FormControl(''),
+            processSize: new FormControl('', [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)]),
+            processPage: new FormControl('', [Validators.pattern('^[0-9]*$'), Validators.min(this.minValue)])
         });
 
         this.processListForm.valueChanges
@@ -93,11 +95,21 @@ export class ProcessListDemoComponent implements OnInit {
 
     filterProcesses(processFilter: any) {
         this.appId = processFilter.processAppId;
-        this.name = processFilter.processName;
         this.processDefId = processFilter.processDefinitionId;
-        this.instanceId = processFilter.processInstanceId;
         this.state = processFilter.processState;
+        if (!processFilter.processState) {
+            this.state = this.stateOptions[0].value;
+        }
         this.sort = processFilter.processSort;
+        if (processFilter.processSize) {
+            this.size = parseInt(processFilter.processSize, 10);
+        }
+        if (processFilter.processPage) {
+            let pageValue = parseInt(processFilter.processPage, 10);
+            this.page = pageValue > 0 ? pageValue - 1 : pageValue;
+        } else {
+            this.page = 0;
+        }
     }
 
     isFormValid() {
@@ -106,6 +118,16 @@ export class ProcessListDemoComponent implements OnInit {
 
     resetProcessForm() {
         this.processListForm.reset();
+        this.resetQueryParameters();
+    }
+
+    resetQueryParameters() {
+        this.appId = null;
+        this.processDefId = null;
+        this.state = this.stateOptions[0].value;
+        this.sort = null;
+        this.size = this.DEFAULT_SIZE;
+        this.page = null;
     }
 
     getStatus(ended: Date) {
@@ -120,10 +142,6 @@ export class ProcessListDemoComponent implements OnInit {
         return this.processListForm.get('processDefinitionId');
     }
 
-    get processInstanceId(): AbstractControl {
-        return this.processListForm.get('processInstanceId');
-    }
-
     get processState(): AbstractControl {
         return this.processListForm.get('processState');
     }
@@ -131,4 +149,12 @@ export class ProcessListDemoComponent implements OnInit {
     get processSort(): AbstractControl {
         return this.processListForm.get('processSort');
     }
+
+    get processSize(): AbstractControl {
+        return this.processListForm.get('processSize');
+    }
+
+    get processPage(): AbstractControl {
+        return this.processListForm.get('processPage');
+    }
 }