[ADF-3308] Process list filter by fields (#3588)

* process list component created

* process list renamed

* routing fix

demo-shell/resources/i18n/en.json

@@ -57,6 +57,7 @@
     "BREADCRUMB": "Breadcrumb",
     "NOTIFICATIONS": "Notifications",
     "TASK_LIST": "Task List",
+    "PROCESS_LIST": "Process List",
     "CARD_VIEW": "CardView",
     "PROCESS_SERVICES": "Process Services",
     "LOGIN": "Login",
@@ -210,5 +211,9 @@
   "TASK_LIST_DEMO": {
     "APP_ID_REQUIRED_ERROR": "Insert App Id",
     "APP_ID_TYPE_ERROR": "App Id must be a number"
+  },
+  "PROCESS_LIST_DEMO": {
+    "APP_ID_REQUIRED_ERROR": "Insert App Id",
+    "APP_ID_TYPE_ERROR": "App Id must be a number"
   }
 }

demo-shell/src/app/app.module.ts

@@ -53,12 +53,14 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
 import { PreviewService } from './services/preview.service';
 import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
 import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
+import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
 import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
 import { NotificationsComponent } from './components/notifications/notifications.component';
 import { ReportIssueComponent } from './components/report-issue/report-issue.component';
 import { CardViewComponent } from './components/card-view/card-view.component';
 import { HeaderDataComponent } from './components/header-data/header-data.component';
 import { HeaderDataService } from './components/header-data/header-data.service';
+
 @NgModule({
     imports: [
         BrowserModule,
@@ -116,6 +118,7 @@ import { HeaderDataService } from './components/header-data/header-data.service'
         ContentNodeSelectorComponent,
         ReportIssueComponent,
         TaskListDemoComponent,
+        ProcessListDemoComponent,
         HeaderDataComponent
     ],
     providers: [

demo-shell/src/app/app.routes.ts

@@ -50,6 +50,7 @@ import { DemoPermissionComponent } from './components/permissions/demo-permissio
 import { BlobPreviewComponent } from './components/blob-preview/blob-preview.component';
 import { BreadcrumbDemoComponent } from './components/breadcrumb-demo/breadcrumb-demo.component';
 import { TaskListDemoComponent } from './components/task-list-demo/task-list-demo.component';
+import { ProcessListDemoComponent } from './components/process-list-demo/process-list-demo.component';
 import { NotificationsComponent } from './components/notifications/notifications.component';
 import { CardViewComponent } from './components/card-view/card-view.component';
 import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
@@ -263,6 +264,16 @@ export const appRoutes: Routes = [
                 component: TaskListDemoComponent,
                 canActivate: [AuthGuardBpm]
             },
+            {
+                path: 'process-list',
+                component: ProcessListDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
+            {
+                path: 'process-list/:id',
+                component: ProcessListDemoComponent,
+                canActivate: [AuthGuardBpm]
+            },
             {
                 path: 'error/:id',
                 component: ErrorContentComponent

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -40,6 +40,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA'},
         { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
         { href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
+        { href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
         { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
         { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
         { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },

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

@@ -0,0 +1,73 @@
+<div class="process-list-inputs">
+
+    <form [formGroup]="processListForm">
+        <mat-form-field>
+            <mat-label>App Id</mat-label>
+            <input
+                matInput
+                class="form-control"
+                [formControl]="processAppId">
+            <mat-error *ngIf="processAppId.hasError('required')">
+                {{ 'PROCESS_LIST_DEMO.APP_ID_REQUIRED_ERROR' | translate }}
+            </mat-error>
+            <mat-error *ngIf="processAppId.hasError('pattern')">
+                {{ 'PROCESS_LIST_DEMO.APP_ID_TYPE_ERROR' | translate }}
+            </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
+                matInput
+                class="form-control"
+                [formControl]="processDefinitionId">
+            <mat-hint>SimpleProcess:1:2</mat-hint>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>State</mat-label>
+            <mat-select
+                class="form-control"
+                [formControl]="processState">
+                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Sort</mat-label>
+            <mat-select
+                class="form-control"
+                [formControl]="processSort">
+                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <div class="adf-reset-button">
+            <button mat-raised-button (click)="resetProcessForm()">Reset</button>
+        </div>
+    </form>
+</div>
+
+<div>
+    <adf-process-instance-list
+        #processList
+        [appId]="appId"
+        [processDefinitionKey]="processDefId"
+        [state]="state"
+        [sort]="sort"
+        [name]="name">
+    </adf-process-instance-list>
+
+    <adf-pagination
+        [target]="processList">
+    </adf-pagination>
+</div>
+

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

@@ -0,0 +1,17 @@
+.process-list-inputs {
+    margin-top: 100px;
+    margin-bottom: 50px;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.adf-reset-button {
+    margin-top: 50px;
+    display: flex;
+    justify-content: center;
+}
+
+.process-list-error-message {
+    color: red;
+    text-align: center;
+}

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

@@ -0,0 +1,124 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * limitations under the License.
+ */
+
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
+import { ActivatedRoute, Params } from '@angular/router';
+
+
+@Component({
+    templateUrl: './process-list-demo.component.html',
+    styleUrls: [`./process-list-demo.component.scss`],
+})
+
+export class ProcessListDemoComponent implements OnInit {
+
+    processListForm: FormGroup;
+
+    defaultAppId: number;
+
+    appId: number;
+
+    name: string;
+
+    processDefId: string;
+
+    state: string;
+
+    sort: string;
+
+    stateOptions = [
+        {value: 'all', title: 'All'},
+        {value: 'active', title: 'Active'},
+        {value: 'completed', title: 'Completed'}
+    ];
+
+    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)'}
+    ];
+
+    constructor(private route: ActivatedRoute,
+                private formBuilder: FormBuilder) {}
+
+    ngOnInit() {
+        if (this.route) {
+            this.route.params.forEach((params: Params) => {
+                this.defaultAppId = params['id'] ? +params['id'] : 0;
+            });
+        }
+        this.appId = this.defaultAppId;
+        this.buildForm();
+    }
+
+    buildForm() {
+        this.processListForm = this.formBuilder.group({
+            processAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
+            processName: new FormControl(''),
+            processDefinitionId: new FormControl(''),
+            processState: new FormControl(''),
+            processSort: new FormControl('')
+        });
+
+        this.processListForm.valueChanges
+            .debounceTime(500)
+            .subscribe(processFilter => {
+                if (this.isFormValid()) {
+                    this.filterProcesses(processFilter);
+                }
+            });
+
+    }
+
+    filterProcesses(processFilter: any) {
+        this.appId = processFilter.processAppId;
+        this.name = processFilter.processName;
+        this.processDefId = processFilter.processDefinitionId;
+        this.state = processFilter.processState;
+        this.sort = processFilter.processSort;
+    }
+
+    isFormValid() {
+        return this.processListForm && this.processListForm.dirty && this.processListForm.valid;
+    }
+
+    resetProcessForm() {
+        this.processListForm.reset();
+    }
+
+    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 processState(): AbstractControl {
+        return this.processListForm.get('processState');
+    }
+
+    get processSort(): AbstractControl {
+        return this.processListForm.get('processSort');
+    }
+}

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

@@ -49,6 +49,7 @@ Renders a list containing all the process instances matched by the parameters sp
 | 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. |
 | 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/process-list/components/process-list.component.ts

@@ -154,7 +154,7 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
         this.loadLayoutPresets();
         this.setupSchema();
 
-        if (this.appId) {
+        if (this.appId != null) {
             this.reload();
         }
     }