[ADF-3986] ProcessListCloudComponent - Be able to filter process with all possible params (#4233)

* [ADF-3986][ProcessListCloudComponent] Be able to filter process with all possible params* Added missing parameters* Added unit test the recent changes* Updated docs

* * Removed unwanted appVersion from process list

* * Removed unwanted properties

* * Reverted changes related status

* Update edit-task-filter-cloud.component.ts

* Fix the task and process filters value

* Rollback the process instance id

* * Added more process list properties in the demo

* * After rebase
* Used application query api.

* * Fixed failing unit test

* * After rebase

* * Fixed message

* * Fixed conflicts.

* * Fixed Lint error

* * Documentation conflicts fixed.

demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html

@@ -19,6 +19,9 @@
             [id]="editedFilter.processInstanceId"
             [status]="editedFilter.state"
             [name]="editedFilter.processName"
+            [businessKey]="editedFilter.businessKey"
+            [lastModifiedFrom]="editedFilter.lastModifiedFrom"
+            [lastModifiedTo]="editedFilter.lastModifiedTo"
             [sorting]="sortArray"
             [selectionMode]="selectionMode"
             [multiselect]="multiselect"

docs/process-services-cloud/components/edit-process-filter-cloud.component.md

@@ -20,6 +20,8 @@ Shows Process Filter Details.
 -   [Details](#details)
     -   [Editing APS2 process filters](#editing-aps2-process-filters)
     -   [Filter properties](#filter-properties)
+    -   [Sort properties](#sort-properties)
+    -   [Action properties](#action-properties)
 -   [See also](#see-also)
 
 ## Basic Usage
@@ -80,28 +82,59 @@ given below:
 | **_processInstanceId_** | Process instance ID |
 | **_processName_** | Process name. |
 | **_initiator_** | ID of the user who initiated the process |
-| **_state_** | Execution state of the process. |
+| **_status_** | Execution status of the process. |
 | **_processDefinitionId_** | Process definition ID |
 | **_processDefinitionKey_** | Process definition key |
-| **_lastModifiedFrom_** | Finds processes modified _after_ this date |
+| **_lastModified_** | Date the process was last modified. If lastModified defined the component will show the range **_lastModifiedTo_**, **_lastModifiedFrom_**|
-| **_lastModifiedTo_** | Finds processes modified _before_ this date |
+| **_sort_** | Field on which the filter results will be sorted. Can be "id", "name", "status", "startDate". |
-| **_sort_** | Field on which the filter results will be sorted (doesn't participate in the filtering itself). Can be "id", "name", "status" or "startDate". |
 | **_order_** | Sort ordering of the filter results (this doesn't participate in the filtering itself) |
 
-By default, the **_state_**, **_sort_** and **_order_** properties are
+By default, the **_status_**, **_sort_** and **_order_** properties are
 displayed in the editor. However, you can also choose which properties
 to show using the `filterProperties` array.
 For example, the code below initializes the editor with the **_appName_**,
-**_processInstanceId_**, **_startDate_** and **_lastModified_** properties:
+**_processInstanceId_**, **_processName_** and **_lastModified_** properties:
 
 ```ts
-import { UserProcessModel } from '@alfresco/adf-core';
-
 export class SomeComponent implements OnInit {
 
     filterProperties: string[] = [
-        "appName",
+        "processName"
         "processInstanceId",
+        "lastModified"];
+
+    onFilterChange(filter: ProcessFilterCloudModel) {
+        console.log('On filter change: ', filter);
+    }
+
+    onAction($event: ProcessFilterAction) {
+        console.log('Clicked action: ', $event);
+    }
+```
+
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="applicationName"
+    [filterProperties]="filterProperties">
+</adf-cloud-edit-process-filter>
+```
+
+With this configuration, only the four listed properties will be shown.
+
+### Sort properties
+
+You can supply various _sort properties_ to sort the processes.
+
+By default, the **_id_**, **_name_**, **_status_** and **_startDate_** properties are
+displayed in the editor. However, you can also choose which sort properties
+to show using the `sortProperties` array.
+For example, the code below initializes the editor with the **_startDate_** and **_lastModified_** properties:
+
+```ts
+export class SomeComponent implements OnInit {
+
+    sortProperties: string[] = [
         "startDate",
         "lastModified"];
 
@@ -109,15 +142,59 @@ export class SomeComponent implements OnInit {
         console.log('On filter change: ', filter);
     }
 
-    onAction($event: ProcessFilterActionType) {
+    onAction($event: ProcessFilterAction) {
         console.log('Clicked action: ', $event);
     }
 ```
 
-With this configuration, only the four listed properties will be shown.
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="applicationName"
+    [sortProperties]="sortProperties">
+</adf-cloud-edit-process-filter>
+```
 
-**Note:** Currently, the `sort` property has a limited set of properties
+With this configuration, only the two listed sort properties will be shown.
-to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
+
+### Action properties
+
+You can supply various _actions_ to apply on process filter.
+
+| Name | Description |
+| ---- | ----------- |
+| **_save_** | Save process filter. |
+| **_saveAs_** | Creates a new process filter. |
+| **_delete_** | Delete process filter. |
+
+By default, the **_save_**, **_saveAs_** and **_delete_** actions are
+displayed in the editor. However, you can also choose which actions to
+show using the `actions` array.
+For example, the code below initializes the editor with the **_save_** and **_delete_** actions:
+
+```ts
+export class SomeComponent implements OnInit {
+
+    actions: string[] = ['save', 'delete'];
+
+    onFilterChange(filter: ProcessFilterCloudModel) {
+        console.log('On filter change: ', filter);
+    }
+
+    onAction($event: ProcessFilterAction) {
+        console.log('Clicked action: ', $event);
+    }
+```
+
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="applicationName"
+    [actions]="actions">
+</adf-cloud-edit-process-filter>
+```
+
+With this configuration, only the two actions will be shown.
 
 ## See also
 

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

@@ -51,13 +51,13 @@ when the process list is empty:
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
 | appName | `string` | "" | The name of the application. |
-| appVersion | `string` | "" | The related application version. |
 | businessKey | `string` | "" | Filter the tasks to display only the ones with this businessKey value. |
 | id | `string` | "" | Filter the processes to display only the ones with this ID. |
 | initiator | `string` | "" | Name of the initiator of the process. |
+| lastModifiedFrom | `string` | "" | Filter the processes. Display only process with lastModifiedTo equal to the supplied date. |
+| lastModifiedTo | `string` | "" | Filter the processes. Display only process with lastModifiedTo equal to the supplied date. |
 | multiselect | `boolean` | false | Toggles multiple row selection and renders checkboxes at the beginning of each row |
 | name | `string` | "" | Filter the processes to display only the ones with this name. |
-| presetColumn | `string` |  | Custom preset column schema in JSON format. |
 | processDefinitionId | `string` | "" | Filter the processes to display only the ones with this process definition ID. |
 | processDefinitionKey | `string` | "" | Filter the processes to display only the ones with this process definition key. |
 | 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. |
@@ -146,7 +146,7 @@ information defined in `app.config.json` as in the example below:
 ```
 
 These are all the available columns that can be displayed in this component:
-**_appName_**, **_businessKey_**, **_description_**, **_id_**, **_initiator_**, **_lastModified_**, **_processName_**, **_parentId_**, **_processDefinitionId_**, **_processDefinitionKey_**, **_startDate_** and **_status_**.
+**_appName_**, **_businessKey_**, **_description_**, **_id_**, **_initiator_**, **_lastModified_**, **_processName_**, **_parentId_**, **_processDefinitionId_**, **_processDefinitionKey_**, and **_status_**.
 
 ### Setting Sorting Order for the list
 

docs/process-services-cloud/edit-process-filter-cloud.component.md

@@ -0,0 +1,201 @@
+---
+Title: Edit Process Filter Cloud component
+Added: v3.0.0
+Status: Experimental
+Last reviewed: 2019-01-30
+---
+
+# [Edit Process Filter Cloud component](../../lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts "Defined in edit-process-filter-cloud.component.ts")
+
+Shows Process Filter Details.
+
+![edit-process-filter-cloud](../docassets/images/edit-process-filter-cloud.component.png)
+
+## Contents
+
+-   [Basic Usage](#basic-usage)
+-   [Class members](#class-members)
+    -   [Properties](#properties)
+    -   [Events](#events)
+-   [Details](#details)
+    -   [Editing APS2 process filters](#editing-aps2-process-filters)
+    -   [Filter properties](#filter-properties)
+    -   [Sort properties](#sort-properties)
+    -   [Action properties](#action-properties)
+-   [See also](#see-also)
+
+## Basic Usage
+
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="appName"
+    [filterProperties]="filterProperties"s
+    (filterChange)="onFilterChange($event)"
+    (action)="onAction($event)">
+</adf-cloud-edit-process-filter>
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| actions | `string[]` |  | List of sort actions. |
+| appName | `string` |  | The name of the application. |
+| filterProperties | `string[]` |  | List of process filter properties to display |
+| id | `string` |  | Id of the process instance filter. |
+| showFilterActions | `boolean` | true | Toggles editing of process filter actions. |
+| showTitle | `boolean` | true | Toggles editing of the process filter title. |
+| sortProperties | `string[]` |  | List of sort properties to display. |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| action | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterAction`](../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a filter action occurs i.e Save, SaveAs, Delete. |
+| filterChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterCloudModel`](../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a process instance filter property changes. |
+
+## Details
+
+### Editing APS2 process filters
+
+Use the `appName` and `id` properties to choose which process filter to edit:
+
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="appName">
+</adf-cloud-edit-process-filter>
+```
+
+### Filter properties
+
+You can supply various _filter properties_ to edit that will determine
+which processes are found by a filter. The full set of properties is
+given below:
+
+| Name | Description |
+| ---- | ----------- |
+| **_appName_** | Name of the app |
+| **_processInstanceId_** | Process instance ID |
+| **_processName_** | Process name. |
+| **_initiator_** | ID of the user who initiated the process |
+| **_status_** | Execution status of the process. |
+| **_processDefinitionId_** | Process definition ID |
+| **_processDefinitionKey_** | Process definition key |
+| **_lastModified_** | Date the process was last modified. If lastModified defined the component will show the range **_lastModifiedTo_**, **_lastModifiedFrom_**|
+| **_sort_** | Field on which the filter results will be sorted. Can be "id", "name", "status", "startDate". |
+| **_order_** | Sort ordering of the filter results (this doesn't participate in the filtering itself) |
+
+By default, the **_status_**, **_sort_** and **_order_** properties are
+displayed in the editor. However, you can also choose which properties
+to show using the `filterProperties` array.
+For example, the code below initializes the editor with the **_appName_**,
+**_processInstanceId_**, **_processName_** and **_lastModified_** properties:
+
+```ts
+export class SomeComponent implements OnInit {
+
+    filterProperties: string[] = [
+        "processName"
+        "processInstanceId",
+        "lastModified"];
+
+    onFilterChange(filter: ProcessFilterCloudModel) {
+        console.log('On filter change: ', filter);
+    }
+
+    onAction($event: ProcessFilterAction) {
+        console.log('Clicked action: ', $event);
+    }
+```
+
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="applicationName"
+    [filterProperties]="filterProperties">
+</adf-cloud-edit-process-filter>
+```
+
+With this configuration, only the four listed properties will be shown.
+
+### Sort properties
+
+You can supply various _sort properties_ to sort the processes.
+
+By default, the **_id_**, **_name_**, **_status_** and **_startDate_** properties are
+displayed in the editor. However, you can also choose which sort properties
+to show using the `sortProperties` array.
+For example, the code below initializes the editor with the **_startDate_** and **_lastModified_** properties:
+
+```ts
+export class SomeComponent implements OnInit {
+
+    sortProperties: string[] = [
+        "startDate",
+        "lastModified"];
+
+    onFilterChange(filter: ProcessFilterCloudModel) {
+        console.log('On filter change: ', filter);
+    }
+
+    onAction($event: ProcessFilterAction) {
+        console.log('Clicked action: ', $event);
+    }
+```
+
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="applicationName"
+    [sortProperties]="sortProperties">
+</adf-cloud-edit-process-filter>
+```
+
+With this configuration, only the two listed sort properties will be shown.
+
+### Action properties
+
+You can supply various _actions_ to apply on process filter.
+
+| Name | Description |
+| ---- | ----------- |
+| **_save_** | Save process filter. |
+| **_saveAs_** | Creates a new process filter. |
+| **_delete_** | Delete process filter. |
+
+By default, the **_save_**, **_saveAs_** and **_delete_** actions are
+displayed in the editor. However, you can also choose which actions to
+show using the `actions` array.
+For example, the code below initializes the editor with the **_save_** and **_delete_** actions:
+
+```ts
+export class SomeComponent implements OnInit {
+
+    actions: string[] = ['save', 'delete'];
+
+    onFilterChange(filter: ProcessFilterCloudModel) {
+        console.log('On filter change: ', filter);
+    }
+
+    onAction($event: ProcessFilterAction) {
+        console.log('Clicked action: ', $event);
+    }
+```
+
+```html
+<adf-cloud-edit-process-filter
+    [id]="processFilterId"
+    [appName]="applicationName"
+    [actions]="actions">
+</adf-cloud-edit-process-filter>
+```
+
+With this configuration, only the two actions will be shown.
+
+## See also
+
+-   [Edit task filter cloud component](edit-task-filter-cloud.component.md)

lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts

@@ -42,7 +42,7 @@ export class AppsProcessCloudService {
         }
         const api: Oauth2Auth = this.apiService.getInstance().oauth2Auth;
         const path = this.getApplicationUrl();
-        const pathParams = {}, queryParams = {},
+        const pathParams = {}, queryParams = { status: status },
             headerParams = {}, formParams = {}, bodyParam = {},
             contentTypes = ['application/json'], accepts = ['application/json'];
 
@@ -58,7 +58,7 @@ export class AppsProcessCloudService {
             );
     }
 
-    private getApplicationUrl() {
+    private getApplicationUrl(): string {
         return `${this.appConfigService.get('bpmHost')}/alfresco-deployment-service/v1/applications`;
     }
 

lib/process-services-cloud/src/lib/i18n/en.json

@@ -138,6 +138,7 @@
     "TITLE": "Customize your filter",
     "LABEL": {
       "APP_NAME": "ApplicationName",
+      "PROCESS_INS_ID": "ProcessInstanceId",
       "STATUS": "Status",
       "INITIATOR": "Initiator",
       "ASSIGNMENT": "Assignee",
@@ -145,8 +146,6 @@
       "DIRECTION": "Direction",
       "PROCESS_DEF_ID": "ProcessDefinitionId",
       "PROCESS_DEF_KEY": "ProcessDefinitionKey",
-      "PROCESS_INS_ID": "ProcessInstanceId",
-      "START_DATE": "StartDate",
       "LAST_MODIFIED": "LastModified",
       "LAST_MODIFIED_DATE_FORM": "LastModifiedFrom",
       "LAST_MODIFIED_TO": "LastModifiedTo",

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html

@@ -41,7 +41,8 @@
                             (dateChange)="onDateChanged($event.value, processFilterProperty)"
                             [matDatepicker]="dateController"
                             placeholder="{{processFilterProperty.label | translate}}"
-                            [formControlName]="processFilterProperty.key"
+                            [(ngModel)]="dateFilter[processFilterProperty.key]"
+                            [ngModelOptions]="{standalone: true}"
                             [attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key">
                     <mat-datepicker-toggle matSuffix [for]="dateController" [attr.data-automation-id]="'adf-cloud-edit-process-property-date-toggle-' + processFilterProperty.key"></mat-datepicker-toggle>
                     <mat-datepicker #dateController [attr.data-automation-id]="'adf-cloud-edit-process-property-date-picker-' + processFilterProperty.key"></mat-datepicker>

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts

@@ -62,11 +62,15 @@ describe('EditProcessFilterCloudComponent', () => {
         service = TestBed.get(ProcessFilterCloudService);
         appsService = TestBed.get(AppsProcessCloudService);
         dialog = TestBed.get(MatDialog);
-        spyOn(dialog, 'open').and.returnValue({ afterClosed() { return of({
+        spyOn(dialog, 'open').and.returnValue({
+            afterClosed() {
+                return of({
                     action: ProcessFilterDialogCloudComponent.ACTION_SAVE,
                     icon: 'icon',
                     name: 'fake-name'
-        }); }});
+                });
+            }
+        });
         getProcessFilterByIdSpy = spyOn(service, 'getProcessFilterById').and.returnValue(fakeFilter);
         getRunningApplicationsSpy = spyOn(appsService, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
     });
@@ -81,7 +85,7 @@ describe('EditProcessFilterCloudComponent', () => {
 
     it('should fetch process instance filter by id', async(() => {
         let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-        component.ngOnChanges({'id': processFilterIDchange});
+        component.ngOnChanges({ 'id': processFilterIDchange });
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
@@ -96,7 +100,7 @@ describe('EditProcessFilterCloudComponent', () => {
 
     it('should display filter name as title', () => {
         let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-        component.ngOnChanges({'id': processFilterIDchange});
+        component.ngOnChanges({ 'id': processFilterIDchange });
         fixture.detectChanges();
         const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
         const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-sub-title-id');
@@ -113,7 +117,7 @@ describe('EditProcessFilterCloudComponent', () => {
 
         beforeEach(() => {
             let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
             fixture.detectChanges();
         });
 
@@ -249,7 +253,7 @@ describe('EditProcessFilterCloudComponent', () => {
 
         it('should able to build a editProcessFilter form with default properties if input is empty', async(() => {
             let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
             component.filterProperties = [];
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -272,7 +276,7 @@ describe('EditProcessFilterCloudComponent', () => {
         it('should able to fetch running applications when appName property defined in the input', async(() => {
             fixture.detectChanges();
             let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
             fixture.detectChanges();
             component.filterProperties = ['appName', 'processName'];
             const appController = component.editProcessFilterForm.get('appName');
@@ -286,8 +290,8 @@ describe('EditProcessFilterCloudComponent', () => {
 
         it('should able to filter filterProperties when input is defined', async(() => {
             component.id = 'mock-process-filter-id';
-            let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
+            let processFilterIdchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIdchange });
             component.filterProperties = ['appName', 'processName'];
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -302,7 +306,7 @@ describe('EditProcessFilterCloudComponent', () => {
         it('should display default sort properties', async(() => {
             fixture.detectChanges();
             let processFilterIdchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({ 'id': processFilterIdchange});
+            component.ngOnChanges({ 'id': processFilterIdchange });
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
@@ -340,7 +344,7 @@ describe('EditProcessFilterCloudComponent', () => {
 
         beforeEach(() => {
             let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
             fixture.detectChanges();
         });
 
@@ -436,10 +440,11 @@ describe('EditProcessFilterCloudComponent', () => {
         }));
 
         it('should filter actions when input actions are specified', async(() => {
+            fixture.detectChanges();
             component.actions = ['save'];
             fixture.detectChanges();
             let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 expect(component.processFilterActions).toBeDefined();

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts

@@ -15,16 +15,17 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { FormGroup, FormBuilder, AbstractControl } from '@angular/forms';
-import { MatDialog } from '@angular/material';
+import { MatDialog, DateAdapter } from '@angular/material';
 import { debounceTime, filter } from 'rxjs/operators';
 import moment from 'moment-es6';
+import { Moment } from 'moment';
 
 import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
 import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
 import { ProcessFilterCloudModel, ProcessFilterProperties, ProcessFilterAction, ProcessFilterOptions } from '../models/process-filter-cloud.model';
-import { TranslationService } from '@alfresco/adf-core';
+import { TranslationService, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
 import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
 import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud.component';
 
@@ -33,20 +34,20 @@ import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud
     templateUrl: './edit-process-filter-cloud.component.html',
     styleUrls: ['./edit-process-filter-cloud.component.scss']
 })
-export class EditProcessFilterCloudComponent implements OnChanges {
+export class EditProcessFilterCloudComponent implements OnInit, OnChanges {
 
     public static ACTION_SAVE = 'save';
     public static ACTION_SAVE_AS = 'saveAs';
     public static ACTION_DELETE = 'delete';
     public static APPLICATION_NAME: string = 'appName';
-    public static APP_RUNNING_STATUS: string = 'Running';
+    public static APP_RUNNING_STATUS: string = 'RUNNING';
     public static LAST_MODIFIED: string = 'lastModified';
     public static SORT: string = 'sort';
     public static ORDER: string = 'order';
-    public static DEFAULT_PROCESS_FILTER_PROPERTIES = ['status', 'sort', 'order'];
+    public static DEFAULT_PROCESS_FILTER_PROPERTIES = ['status', 'sort', 'order', 'lastModified'];
     public static DEFAULT_SORT_PROPERTIES = ['id', 'name', 'status', 'startDate'];
     public static DEFAULT_ACTIONS = ['save', 'saveAs', 'delete'];
-    public FORMAT_DATE: string = 'DD/MM/YYYY';
+    public DATE_FORMAT: string = 'DD/MM/YYYY';
 
     /** The name of the application. */
     @Input()
@@ -89,13 +90,18 @@ export class EditProcessFilterCloudComponent implements OnChanges {
 
     status = [
         { label: 'ALL', value: '' },
+        { label: 'CREATED', value: 'CREATED' },
         { label: 'RUNNING', value: 'RUNNING' },
-        { label: 'COMPLETED', value: 'COMPLETED' }
+        { label: 'SUSPENDED', value: 'SUSPENDED' },
+        { label: 'CANCELLED', value: 'CANCELLED' },
+        { label: 'COMPLETED', value: 'COMPLETED' },
+        { label: 'DELETED', value: 'DELETED' }
     ];
 
     directions = [{ label: 'ASC', value: 'ASC' }, { label: 'DESC', value: 'DESC' }];
     applicationNames: any[] = [];
     formHasBeenChanged = false;
+    dateFilter: any[] = [];
     editProcessFilterForm: FormGroup;
     processFilterProperties: ProcessFilterProperties[] = [];
     processFilterActions: ProcessFilterAction[] = [];
@@ -104,10 +110,18 @@ export class EditProcessFilterCloudComponent implements OnChanges {
     constructor(
         private formBuilder: FormBuilder,
         public dialog: MatDialog,
+        private dateAdapter: DateAdapter<Moment>,
+        private userPreferencesService: UserPreferencesService,
         private translateService: TranslationService,
         private processFilterCloudService: ProcessFilterCloudService,
         private appsProcessCloudService: AppsProcessCloudService) { }
 
+    ngOnInit() {
+        this.userPreferencesService.select(UserPreferenceValues.Locale).subscribe((locale) => {
+            this.dateAdapter.setLocale(locale);
+        });
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         const id = changes['id'];
         if (id && id.currentValue !== id.previousValue) {
@@ -244,13 +258,7 @@ export class EditProcessFilterCloudComponent implements OnChanges {
 
     onDateChanged(newDateValue: any, dateProperty: ProcessFilterProperties) {
         if (newDateValue) {
-            let momentDate;
+            let momentDate = moment(newDateValue, this.DATE_FORMAT, true);
-
-            if (typeof newDateValue === 'string') {
-                momentDate = moment(newDateValue, this.FORMAT_DATE, true);
-            } else {
-                momentDate = newDateValue;
-            }
 
             if (momentDate.isValid()) {
                 this.getPropertyController(dateProperty).setValue(momentDate.toDate());
@@ -492,12 +500,6 @@ export class EditProcessFilterCloudComponent implements OnChanges {
                 key: 'order',
                 value: currentProcessFilter.order || this.directions[0].value,
                 options: this.directions
-            }),
-            new ProcessFilterProperties({
-                label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.START_DATE',
-                type: 'date',
-                key: 'startDate',
-                value: ''
             })
         ];
     }

lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts

@@ -23,14 +23,13 @@ export class ProcessFilterCloudModel {
     index: number;
     appName: string;
     processName: string;
+    processInstanceId: string;
     initiator: string;
     status: string;
     sort: string;
     order: string;
     processDefinitionId: string;
     processDefinitionKey: string;
-    processInstanceId: string;
-    startDate: Date;
     lastModified: Date;
     lastModifiedTo: Date;
     lastModifiedFrom: Date;
@@ -43,6 +42,7 @@ export class ProcessFilterCloudModel {
             this.icon = obj.icon || null;
             this.index = obj.index || null;
             this.appName = obj.appName || null;
+            this.processInstanceId = obj.processInstanceId || null;
             this.processName = obj.processName || null;
             this.initiator = obj.initiator || null;
             this.status = obj.status || null;
@@ -50,8 +50,6 @@ export class ProcessFilterCloudModel {
             this.order = obj.order || null;
             this.processDefinitionId = obj.processDefinitionId || null;
             this.processDefinitionKey = obj.processDefinitionKey || null;
-            this.processInstanceId = obj.processInstanceId || null;
-            this.startDate = obj.startDate || null;
             this.lastModified = obj.lastModified || null;
             this.lastModifiedTo = obj.lastModifiedTo || null;
             this.lastModifiedFrom = obj.lastModifiedFrom || null;

lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts

@@ -21,12 +21,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ProcessFiltersCloudComponent } from './components/process-filters-cloud.component';
 import { MaterialModule } from '../../material.module';
-import { LogService, StorageService, CoreModule } from '@alfresco/adf-core';
+import { LogService, StorageService, CoreModule, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
 import { ProcessFilterCloudService } from './services/process-filter-cloud.service';
 import { HttpClientModule } from '@angular/common/http';
 import { EditProcessFilterCloudComponent } from './components/edit-process-filter-cloud.component';
 import { ProcessFilterDialogCloudComponent } from './components/process-filter-dialog-cloud.component';
 import { AppListCloudModule } from './../../app/app-list-cloud.module';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
+
 @NgModule({
     imports: [
         FormsModule,
@@ -42,6 +44,12 @@ import { AppListCloudModule } from './../../app/app-list-cloud.module';
     declarations: [ProcessFiltersCloudComponent, EditProcessFilterCloudComponent, ProcessFilterDialogCloudComponent],
     exports: [ProcessFiltersCloudComponent, EditProcessFilterCloudComponent, ProcessFilterDialogCloudComponent],
     entryComponents: [ProcessFilterDialogCloudComponent],
-    providers: [ProcessFilterCloudService, LogService, StorageService]
+    providers: [
+        ProcessFilterCloudService,
+        LogService,
+        StorageService,
+        { provide: DateAdapter, useClass: MomentDateAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }
+    ]
 })
 export class ProcessFiltersCloudModule { }

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

@@ -178,6 +178,33 @@ describe('ProcessListCloudComponent', () => {
         component.onRowClick(rowEvent);
     });
 
+    describe('component changes', () => {
+
+        beforeEach(() => {
+            component.rows = fakeProcessCloudList.list.entries;
+            fixture.detectChanges();
+        });
+
+        it('should reload the process list when input parameters changed', () => {
+            const getProcessByRequestSpy = spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList));
+            component.appName = 'mock-app-name';
+            component.status = 'mock-status';
+            component.initiator = 'mock-initiator';
+            const appNameChange = new SimpleChange(undefined, 'mock-app-name', true);
+            const statusChange = new SimpleChange(undefined, 'mock-status', true);
+            const initiatorChange = new SimpleChange(undefined, 'mock-initiator', true);
+
+            component.ngOnChanges({
+                'appName': appNameChange,
+                'assignee': initiatorChange,
+                'status': statusChange
+            });
+            fixture.detectChanges();
+            expect(component.isListEmpty()).toBeFalsy();
+            expect(getProcessByRequestSpy).toHaveBeenCalled();
+        });
+    });
+
     describe('Injecting custom colums for tasklist - CustomTaskListComponent', () => {
 
         let fixtureCustom: ComponentFixture<CustomTaskListComponent>;

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

@@ -45,10 +45,6 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
     @Input()
     appName: string = '';
 
-    /** The related application version. */
-    @Input()
-    appVersion: string = '';
-
     /** Name of the initiator of the process. */
     @Input()
     initiator: string = '';
@@ -73,10 +69,18 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
     @Input()
     status: string = '';
 
-    /** Filter the tasks to display only the ones with this businessKey value. */
+    /** Filter the processes to display only the ones with this businessKey value. */
     @Input()
     businessKey: string = '';
 
+    /** Filter the processes. Display only process with lastModifiedTo equal to the supplied date. */
+    @Input()
+    lastModifiedFrom: string = '';
+
+    /** Filter the processes. Display only process with lastModifiedTo equal to the supplied date. */
+    @Input()
+    lastModifiedTo: string = '';
+
     /**
      * Row selection mode. Can be "none", "single" or "multiple".
      * For multiple mode, you can use Cmd (macOS) or Ctrl (Win) modifier
@@ -222,7 +226,6 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
     private createRequestNode(): ProcessQueryCloudRequestModel {
         let requestNode = {
             appName: this.appName,
-            appVersion: this.appVersion,
             maxItems: this.size,
             skipCount: this.skipCount,
             initiator: this.initiator,
@@ -232,6 +235,8 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
             processDefinitionKey: this.processDefinitionKey,
             status: this.status,
             businessKey: this.businessKey,
+            lastModifiedFrom: this.lastModifiedFrom,
+            lastModifiedTo: this.lastModifiedTo,
             sorting: this.sorting
         };
         return new ProcessQueryCloudRequestModel(requestNode);

lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-query-request.model.ts

@@ -19,7 +19,6 @@ import { ProcessListCloudSortingModel } from './process-list-sorting.model';
 
 export class ProcessQueryCloudRequestModel {
    appName: string;
-   appVersion?: string;
    description?: string;
    initiator?: null;
    id?: string;
@@ -38,7 +37,6 @@ export class ProcessQueryCloudRequestModel {
     constructor(obj?: any) {
        if (obj) {
            this.appName = obj.appName;
-           this.appVersion = obj.appVersion;
            this.description = obj.description;
            this.initiator = obj.initiator;
            this.id = obj.id;