[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.
2025-07-24 17:32:15 +00:00 · 2019-03-20 21:23:28 +05:30
parent dccc6b8127
commit c4bd7a93ab
14 changed files with 395 additions and 71 deletions
--- a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html
+++ b/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"
--- a/docs/process-services-cloud/components/edit-process-filter-cloud.component.md
+++ b/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 |
-| **_lastModifiedTo_** | Finds processes modified _before_ this date |
-| **_sort_** | Field on which the filter results will be sorted (doesn't participate in the filtering itself). Can be "id", "name", "status" or "startDate". |
+| **_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 **_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
-to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
+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

--- a/docs/process-services-cloud/components/process-list-cloud.component.md
+++ b/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

--- a/docs/process-services-cloud/edit-process-filter-cloud.component.md
+++ b/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)
--- a/lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts
+++ b/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`;
    }

--- a/lib/process-services-cloud/src/lib/i18n/en.json
+++ b/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",
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
+++ b/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>
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
+++ b/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));
    });
@@ -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);
-            component.ngOnChanges({'id': processFilterIDchange});
+            let processFilterIdchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
+            component.ngOnChanges({ 'id': processFilterIdchange });
            component.filterProperties = ['appName', 'processName'];
            fixture.detectChanges();
            fixture.whenStable().then(() => {
@@ -436,6 +440,7 @@ 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);
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts
+++ b/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;
-
-            if (typeof newDateValue === 'string') {
-                momentDate = moment(newDateValue, this.FORMAT_DATE, true);
-            } else {
-                momentDate = newDateValue;
-            }
+            let momentDate = moment(newDateValue, this.DATE_FORMAT, true);

            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: ''
            })
        ];
    }
--- a/lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts
+++ b/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;
--- a/lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts
+++ b/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 { }
--- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts
+++ b/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>;
--- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
+++ b/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);
--- a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-query-request.model.ts
+++ b/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;