[ADF-3841] Improve edit-task-filter-cloud by adding inputs to control filters, sort and actions (#4113)

* [ADF-3841] Improve edit-task-filter-cloud by adding inputs to control filters, sort and actions

* Refactored editTask
* Added translate keys related to the edittask filter
* Created TaskFilterProperties model

* * Refactored Edit Task Filter
* Added method to fetch all running applications

* * Added date validation error message

* * Added css mixin

* * Removed dateError flag
* Used formController error

* * Added default filter properties

* * Refactored appsProcessCloudService
* Added flexlayout to align all filter properties

* * Modified unit test for the recent changes* Added few unit tests* Updated editTaskFilter documentation

* * Rebased with the latest changes  * updated doc * Updated translate keys

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

@@ -5,7 +5,6 @@
         (action)="onTaskFilterAction($event)"
         (filterChange)="onFilterChange($event)">
     </adf-cloud-edit-task-filter>
-
     <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-task-list #taskCloud
             [applicationName]="editedFilter.appName"

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

@@ -24,8 +24,11 @@ Edits Task Filter Details.
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| appName | `string` |  | Name of the app. |
+| appName | `string` |  | (required) Name of the app. |
-| id | `string` |  | ID of the task filter. |
+| id | `string` | "" | (required) The id of the Task filter. |
+| filterProperties | `string []` | `['state', 'assignment', 'sort', 'order']` | List of task filter properties to display. |
+| toggleFilterActions | `boolean` | `true` | Toggles edit task filter actions. |
+| showTitle | `boolean` | `true` | Toggles edit task filter title. |
 
 ### Events
 
@@ -47,4 +50,50 @@ Use the application name and task filter id property to edit task filter propert
 </adf-cloud-edit-task-filter>
 ```
 
+By default these below properties are displayed:
+
+**_state_**, **_assignment_**, **_sort_**, **_order_**.
+
+However, you can also choose which properties to show using a input property
+`filterProperties`:
+
+Populate the filterProperties in the component class:
+
+```ts
+import { UserProcessModel } from '@alfresco/adf-core';
+
+export class SomeComponent implements OnInit {
+
+    filterProperties: string[] = [
+        "appName",
+        "processInstanceId",
+        "createdDateTo",
+        "lastModifiedTo"];
+
+    onFilterChange(filter: TaskFilterCloudModel) {
+        console.log('On filter change: ', filter);
+    }
+
+    onAction($event: FilterActionType) {
+        console.log('Clicked action: ', $event);
+    }
+```
+
+With this configuration, only the four listed properties will be shown.
+
+```html
+<adf-cloud-edit-task-filter
+    [id]="taskFilterId"
+    [appName]="applicationName"
+    [filterProperties]="filterProperties"
+    (filterChange)="onFilterChange($event)"
+    (action)="onAction($event)">
+</adf-cloud-edit-task-filter>
+```
+
+
+All Available properties are:
+
+**_appName_**, **_state_**, **_assignment_**, **_sort_**, **_order_**, **_processDefinitionId_**, **_processInstanceId_**, **_dueAfter_**, **_dueBefore_**, **_claimedDateFrom_**, **_claimedDateTo_**, **_createdDateFrom_**, **_createdDateTo_**, **_taskName_**, **_parentTaskId_**, **_priority_**, **_standAlone_**, **_lastModifiedFrom_**, **_lastModifiedTo_**, **_owner_**, **_dueDateFrom_**, **_dueDateTo_**.
+
 ![edit-task-filter-cloud](../docassets/images/edit-task-filter-cloud.component.png)

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

@@ -30,7 +30,7 @@
 
      public static LAYOUT_LIST: string = 'LIST';
      public static LAYOUT_GRID: string = 'GRID';
-     public static RUNNING_STATUS: string = 'Running';
+     public static RUNNING_STATUS: string = 'RUNNING';
 
      @ContentChild(EmptyCustomContentDirective)
      emptyCustomContent: EmptyCustomContentDirective;

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

@@ -16,7 +16,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Observable, from, throwError } from 'rxjs';
+import { Observable, from, throwError, of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { AppConfigService, LogService } from '@alfresco/adf-core';
@@ -26,22 +26,21 @@ import { ApplicationInstanceModel } from '../models/application-instance.model';
 @Injectable()
 export class AppsProcessCloudService {
 
-    contextRoot = '';
-
     constructor(
         private apiService: AlfrescoApiService,
         private logService: LogService,
-        private appConfig: AppConfigService) {
+        private appConfigService: AppConfigService) {}
-        this.contextRoot = this.appConfig.get('bpmHost', '');
-    }
 
     /**
      * Gets a list of deployed apps for this user by status.
      * @returns The list of deployed apps
      */
     getDeployedApplicationsByStatus(status: string): Observable<ApplicationInstanceModel[]> {
+        if (status === '') {
+            return of([]);
+        }
         const api: Oauth2Auth = this.apiService.getInstance().oauth2Auth;
-        const path = `${this.contextRoot}/alfresco-deployment-service/v1/applications`;
+        const path = this.getApplicationUrl();
         const pathParams = {}, queryParams = {},
             headerParams = {}, formParams = {}, bodyParam = {},
             contentTypes = ['application/json'], accepts = ['application/json'];
@@ -49,17 +48,19 @@ export class AppsProcessCloudService {
         return from(api.callCustomApi(path, 'GET', pathParams, queryParams, headerParams, formParams, bodyParam,
             contentTypes, accepts))
             .pipe(
-                map((apps: Array<{}>) => {
+                map((applications: ApplicationInstanceModel[]) => {
-                        return apps.filter((app: ApplicationInstanceModel) => app.status === status)
+                    return applications.map((application) => {
-                            .map((app) => {
+                        return new ApplicationInstanceModel(application);
-                                return new ApplicationInstanceModel(app);
+                    });
-                            });
+            }),
-                    }
+            catchError((err) => this.handleError(err))
-                ),
-                catchError((err) => this.handleError(err))
             );
     }
 
+    private getApplicationUrl() {
+        return `${this.appConfigService.get('bpmHost')}/alfresco-deployment-service/v1/applications`;
+    }
+
     private handleError(error?: any) {
         this.logService.error(error);
         return throwError(error || 'Server error');

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

@@ -92,10 +92,30 @@
       "DELETE": "Delete filter"
     },
     "LABEL": {
+      "APP_NAME": "ApplicationName",
+      "PROCESS_DEF_ID": "ProcessDefinitionId",
       "STATUS": "Status",
       "ASSIGNMENT": "Assignment",
       "COLUMN": "Column",
-      "DIRECTION": "Direction"
+      "DIRECTION": "Direction",
+      "PROCESS_INSTANCE_ID": "ProcessInstanceId",
+      "DUE_BEFORE": "DueBefore",
+      "DUE_AFTER": "DueAfter",
+      "CLAIMED_DATE_FROM": "ClaimedDateFrom",
+      "CLAIMED_DATE_TO": "ClaimedDateTo",
+      "CREATED_DATE_FORM": "CreatedDateFrom",
+      "CREATED_DATE_TO": "CreatedDateTo",
+      "TASK_NAME": "TaskName",
+      "PARENT_TASK_ID": "ParentTaskId",
+      "PRIORITY": "Priority",
+      "STAND_ALONE": "StandAlone",
+      "LAST_MODIFIED_FROM": "LastModifiedFrom",
+      "LAST_MODIFIED_TO": "LastModifiedTo",
+      "OWNER": "Owner",
+      "DUE_DATE_TO": "DueDateTo",
+      "DUE_DATE_FROM": "DueDateFrom"
+
+
     },
     "DIALOG": {
       "TITLE": "Save filter as",

lib/process-services-cloud/src/lib/styles/_index.scss

@@ -1,6 +1,7 @@
 @import './../app/components/app-details-cloud.component';
 @import './../app/components/app-list-cloud.component';
 @import './../task/task-filters/components/task-filters-cloud.component.scss';
+@import './../task/task-filters/components/edit-task-filter-cloud.component.scss';
 @import './../process/process-list/components/process-list-cloud.component.scss';
 @import './../task/start-task/components/start-task-cloud.component.scss';
 @import './../task/start-task/components/people-cloud/people-cloud.component.scss';
@@ -10,6 +11,7 @@
     @include adf-cloud-app-list-theme($theme);
     @include adf-cloud-app-details-theme($theme);
     @include adf-cloud-task-filters-theme($theme);
+    @include adf-cloud-edit-task-filters-theme($theme);
     @include adf-process-filters-cloud-theme($theme);
     @include adf-start-task-cloud-theme($theme);
     @include adf-cloud-people-theme($theme);

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

@@ -1,67 +1,65 @@
 <mat-accordion *ngIf="taskFilter">
-    <mat-expansion-panel>
+    <mat-expansion-panel (afterExpand)="onExpand($event)" (closed)="onClose($event)">
         <mat-expansion-panel-header id="adf-edit-task-filter-expansion-header">
-            <mat-panel-title id="adf-edit-task-filter-title-id">{{taskFilter.name | translate}}</mat-panel-title>
+            <mat-panel-title fxLayoutAlign="space-between center" id="adf-edit-task-filter-title-id">{{taskFilter.name | translate}}</mat-panel-title>
-            <mat-panel-description id="adf-edit-task-filter-sub-title-id">
+            <mat-panel-description fxLayoutAlign="space-between center" id="adf-edit-task-filter-sub-title-id">
-                {{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}
+                <span *ngIf="showTitle">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>
+                <div *ngIf="toggleActions()" class="adf-cloud-edit-task-filter-actions">
+                    <ng-container *ngIf="showFilterActions">
+                        <button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE' | translate}}" id="adf-save-id" [disabled]="!formHasBeenChanged" (click)="onSave()">
+                            <mat-icon>save</mat-icon>
+                        </button>
+                        <button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE_AS' | translate}}" id="adf-save-as-id" [disabled]="!formHasBeenChanged" (click)="onSaveAs()">
+                            <mat-icon>unarchive</mat-icon>
+                        </button>
+                        <button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.DELETE' | translate}}" id="adf-delete-id" (click)="onDelete()">
+                            <mat-icon>delete</mat-icon>
+                        </button>
+                    </ng-container>
+                </div>
             </mat-panel-description>
         </mat-expansion-panel-header>
         <form [formGroup]="editTaskFilterForm">
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutGap="10px">
+            <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
-                <mat-form-field [floatLabel]="'auto'" fxFlex>
+            <ng-container *ngFor="let taskFilterProperty of taskFilterProperties">
-                    <mat-select placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.STATUS' | translate}}" formControlName="state" id="adf-task-filter-state-id">
+                <mat-form-field fxFlex="23%" *ngIf="isSelectType(taskFilterProperty)">
-                        <mat-option *ngFor="let state of status" [value]="state.value">
+                    <mat-select
-                            {{ state.label }}
+                        placeholder="{{taskFilterProperty.label | translate}}"
+                        [formControlName]="taskFilterProperty.key"
+                        [attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key">
+                        <mat-option *ngFor="let propertyOption of taskFilterProperty.options$ | async" [value]="propertyOption.value" [attr.data-automation-id]="'adf-cloud-edit-task-property-options' + taskFilterProperty.key">
+                            {{ propertyOption.label }}
                         </mat-option>
                     </mat-select>
                 </mat-form-field>
-                <mat-form-field [floatLabel]="'auto'" fxFlex>
+                <mat-form-field fxFlex="23%" *ngIf="isTextType(taskFilterProperty)">
                     <input matInput
-                        formControlName="assignment"
+                    [formControlName]="taskFilterProperty.key"
-                        type="text"
+                    type="text"
-                        id="adf-task-filter-assignment-id"
+                    placeholder="{{taskFilterProperty.label | translate}}"
-                        placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.ASSIGNMENT' | translate}}"/>
+                    [attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key"/>
                 </mat-form-field>
-                <mat-form-field *ngIf="false" [floatLabel]="'auto'" fxFlex>
+                <mat-form-field fxFlex="23%" *ngIf="isDateType(taskFilterProperty)">
-                    <input matInput
+                    <mat-label>{{taskFilterProperty.label | translate}}</mat-label>
-                        formControlName="appName"
+                        <input
-                        type="text"
+                            matInput
-                        id="adf-task-filter-appname-id"
+                            (keyup)="onDateChanged($event.srcElement.value, taskFilterProperty)"
-                        placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.APP_NAME' | translate}}"/>
+                            (dateChange)="onDateChanged($event.value, taskFilterProperty)"
+                            [matDatepicker]="dateController"
+                            placeholder="{{taskFilterProperty.label | translate}}"
+                            [formControlName]="taskFilterProperty.key"
+                            [attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key">
+                    <mat-datepicker-toggle matSuffix [for]="dateController" [attr.data-automation-id]="'adf-cloud-edit-task-property-date-toggle' + taskFilterProperty.key"></mat-datepicker-toggle>
+                    <mat-datepicker #dateController [attr.data-automation-id]="'adf-cloud-edit-task-property-date-picker' + taskFilterProperty.key"></mat-datepicker>
+                    <div class="adf-edit-task-filter-date-error-container">
+                        <div *ngIf="hasError(taskFilterProperty)">
+                            <div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</div>
+                            <mat-icon class="adf-error-icon">warning</mat-icon>
+                        </div>
+                    </div>
                 </mat-form-field>
-                <mat-form-field *ngIf="false" [floatLabel]="'auto'" fxFlex>
+            </ng-container>
-                    <input matInput
+        </div>
-                        formControlName="processDefinitionId"
-                        type="text"
-                        id="adf-task-filter-process-definition-id"
-                        placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PROCESS_DEF_ID' | translate}}"/>
-                </mat-form-field>
-                <mat-form-field [floatLabel]="'auto'" fxFlex>
-                    <mat-select placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.COLUMN' | translate}}" formControlName="sort" id="adf-task-filter-sort-id">
-                        <mat-option *ngFor="let column of columns" [value]="column.key">
-                            {{ column.label }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field [floatLabel]="'auto'" fxFlex>
-                    <mat-select placeholder="{{'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DIRECTION' | translate}}" formControlName="order" id="adf-task-filter-order-id">
-                        <mat-option *ngFor="let direction of directions" [value]="direction">
-                            {{ direction }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <div>
-                    <button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE' | translate}}" id="adf-save-id" [disabled]="!formHasBeenChanged" (click)="onSave()">
-                        <mat-icon>save</mat-icon>
-                    </button>
-                    <button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE_AS' | translate}}" id="adf-save-as-id" [disabled]="!formHasBeenChanged" (click)="onSaveAs()">
-                        <mat-icon>unarchive</mat-icon>
-                    </button>
-                    <button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.DELETE' | translate}}" id="adf-delete-id" (click)="onDelete()">
-                        <mat-icon>delete</mat-icon>
-                    </button>
-                </div>
-            </div>
         </form>
     </mat-expansion-panel>
 </mat-accordion>

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

@@ -0,0 +1,31 @@
+@mixin adf-cloud-edit-task-filters-theme($theme) {
+
+    $warn: map-get($theme, warn);
+
+    .adf-edit-task-filter-date-error-container {
+        position: absolute;
+        height: 20px;
+        margin-top: 12px;
+        width: 100%;
+
+        & > div {
+            display: flex;
+            flex-flow: row;
+            justify-content: flex-start;
+        }
+
+        .adf-error-text {
+            padding-right: 8px;
+            height: 16px;
+            font-size: 10px;
+            line-height: 1.33;
+            color: mat-color($warn);
+            width: auto;
+        }
+
+        .adf-error-icon {
+            font-size: 16px;
+            color: mat-color($warn);
+        }
+    }
+}

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

@@ -19,22 +19,27 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
-import { setupTestBed, IdentityUserService } from '@alfresco/adf-core';
+import { setupTestBed } from '@alfresco/adf-core';
+import { MatDialog } from '@angular/material';
+import { of } from 'rxjs';
+
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
+import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
+import { fakeApplicationInstance } from '../../../app/mock/app-model.mock';
 import { TaskFilterCloudModel } from '../models/filter-cloud.model';
 import { TaskFiltersCloudModule } from '../task-filters-cloud.module';
 import { EditTaskFilterCloudComponent } from './edit-task-filter-cloud.component';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
-import { MatDialog } from '@angular/material';
-import { of } from 'rxjs';
 import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
 
 describe('EditTaskFilterCloudComponent', () => {
     let component: EditTaskFilterCloudComponent;
     let service: TaskFilterCloudService;
-    let identityService: IdentityUserService;
+    let appsService: AppsProcessCloudService;
     let fixture: ComponentFixture<EditTaskFilterCloudComponent>;
     let dialog: MatDialog;
+    let getTaskFilterSpy: jasmine.Spy;
+    let getDeployedApplicationsByStatusSpy: jasmine.Spy;
 
     let fakeFilter = new TaskFilterCloudModel({
         name: 'FakeInvolvedTasks',
@@ -57,14 +62,15 @@ describe('EditTaskFilterCloudComponent', () => {
         fixture = TestBed.createComponent(EditTaskFilterCloudComponent);
         component = fixture.componentInstance;
         service = TestBed.get(TaskFilterCloudService);
-        identityService = TestBed.get(IdentityUserService);
+        appsService = TestBed.get(AppsProcessCloudService);
         dialog = TestBed.get(MatDialog);
         spyOn(dialog, 'open').and.returnValue({ afterClosed() { return of({
             action: TaskFilterDialogCloudComponent.ACTION_SAVE,
             icon: 'icon',
             name: 'fake-name'
         }); }});
-        spyOn(service, 'getTaskFilterById').and.returnValue(fakeFilter);
+        getTaskFilterSpy = spyOn(service, 'getTaskFilterById').and.returnValue(fakeFilter);
+        getDeployedApplicationsByStatusSpy = spyOn(appsService, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
     });
 
     it('should create EditTaskFilterCloudComponent', () => {
@@ -93,7 +99,7 @@ describe('EditTaskFilterCloudComponent', () => {
         expect(title).toBeDefined();
         expect(subTitle).toBeDefined();
         expect(title.innerText).toEqual('FakeInvolvedTasks');
-        expect(subTitle.innerText).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
+        expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
     });
 
     describe('EditTaskFilter form', () => {
@@ -104,11 +110,11 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should define editTaskFilter form ', () => {
+        it('should defined editTaskFilter form ', () => {
              expect(component.editTaskFilterForm).toBeDefined();
         });
 
-        it('should create editTaskFilter form with given input ', async(() => {
+        it('should create editTaskFilter form with default properties', async(() => {
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 const stateController = component.editTaskFilterForm.get('state');
@@ -129,6 +135,7 @@ describe('EditTaskFilterCloudComponent', () => {
         }));
 
         it('should disable save button if the task filter is not changed', async(() => {
+            component.showFilterActions = true;
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
             fixture.detectChanges();
@@ -139,6 +146,7 @@ describe('EditTaskFilterCloudComponent', () => {
         }));
 
         it('should disable saveAs button if the task filter is not changed', async(() => {
+            component.showFilterActions = true;
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
             fixture.detectChanges();
@@ -149,9 +157,11 @@ describe('EditTaskFilterCloudComponent', () => {
         }));
 
         it('should enable delete button by default', async(() => {
+            component.showFilterActions = true;
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+            fixture.detectChanges();
             fixture.whenStable().then(() => {
                 let deleteButton = fixture.debugElement.nativeElement.querySelector('#adf-delete-id');
                 expect(deleteButton.disabled).toBe(false);
@@ -159,21 +169,22 @@ describe('EditTaskFilterCloudComponent', () => {
         }));
 
         it('should display current task filter details', async(() => {
-            let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
-            expansionPanel.click();
             fixture.detectChanges();
             fixture.whenStable().then(() => {
-                let stateElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-state-id');
+                let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
-                let assignmentElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-assignment-id');
+                expansionPanel.click();
-                let sortElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-sort-id');
+                fixture.detectChanges();
-                let orderElement = fixture.debugElement.nativeElement.querySelector('#adf-task-filter-order-id');
+                let stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-state"]');
+                let assignmentElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-assignment"]');
+                let sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
+                let orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-order"]');
                 expect(stateElement).toBeDefined();
                 expect(assignmentElement).toBeDefined();
                 expect(sortElement).toBeDefined();
                 expect(orderElement).toBeDefined();
-                expect(stateElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_TASK_FILTER.LABEL.STATUS');
+                expect(stateElement.textContent.trim()).toBe('CREATED');
-                expect(sortElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_TASK_FILTER.LABEL.COLUMN');
+                expect(sortElement.textContent.trim()).toBe('ID');
-                expect(orderElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DIRECTION');
+                expect(orderElement.textContent.trim()).toBe('ASC');
             });
         }));
 
@@ -181,7 +192,8 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
-            const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
+            fixture.detectChanges();
+            let stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-state"] .mat-select-trigger');
             stateElement.click();
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -194,7 +206,8 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
-            const sortElement = fixture.debugElement.query(By.css('#adf-task-filter-sort-id .mat-select-trigger')).nativeElement;
+            fixture.detectChanges();
+            let sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -207,7 +220,8 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
-            const orderElement = fixture.debugElement.query(By.css('#adf-task-filter-order-id .mat-select-trigger')).nativeElement;
+            fixture.detectChanges();
+            let orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-order"]');
             orderElement.click();
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -215,6 +229,64 @@ describe('EditTaskFilterCloudComponent', () => {
                 expect(orderOptions.length).toEqual(2);
             });
         }));
+
+        it('should able to fetch running applications', async(() => {
+            component.appName = 'mock-app-name';
+            component.filterProperties = ['appName', 'processInstanceId', 'dueBefore'];
+            let change = new SimpleChange(undefined, 'mock-task-id', true);
+            component.ngOnChanges({ 'id': change });
+            const appController = component.editTaskFilterForm.get('appName');
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(appController).toBeDefined();
+                expect(appController.value).toBe('mock-app-name' );
+                expect(getDeployedApplicationsByStatusSpy).toHaveBeenCalled();
+            });
+        }));
+
+        it('should able to build a editTaskFilter form with default properties if input is empty', async(() => {
+            component.filterProperties = [];
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                const stateController = component.editTaskFilterForm.get('state');
+                const sortController = component.editTaskFilterForm.get('sort');
+                const orderController = component.editTaskFilterForm.get('order');
+                fixture.detectChanges();
+                expect(component.taskFilterProperties).toBeDefined();
+                expect(component.taskFilterProperties.length).toBe(4);
+                expect(component.editTaskFilterForm).toBeDefined();
+                expect(stateController).toBeDefined();
+                expect(sortController).toBeDefined();
+                expect(orderController).toBeDefined();
+                expect(stateController.value).toBe('CREATED');
+                expect(sortController.value).toBe('id');
+                expect(orderController.value).toBe('ASC');
+            });
+        }));
+
+        it('should able to build a editTaskFilter form with given input properties', async(() => {
+            getTaskFilterSpy.and.returnValue({ processInstanceId: 'process-instance-id', dueBefore: 'Fri Jan 04 2019 19:16:32 GMT+0530 (IST)' });
+            component.appName = 'mock-app-name';
+            component.filterProperties = ['appName', 'processInstanceId', 'dueBefore'];
+            let change = new SimpleChange(undefined, 'mock-task-id', true);
+            component.ngOnChanges({ 'id': change });
+            const appController = component.editTaskFilterForm.get('appName');
+            const dueDateController = component.editTaskFilterForm.get('dueBefore');
+            const processInsIdController = component.editTaskFilterForm.get('processInstanceId');
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                expect(getDeployedApplicationsByStatusSpy).toHaveBeenCalled();
+                expect(component.taskFilterProperties).toBeDefined();
+                expect(component.editTaskFilterForm).toBeDefined();
+                expect(component.taskFilterProperties.length).toBe(3);
+                expect(appController).toBeDefined();
+                expect(dueDateController).toBeDefined();
+                expect(processInsIdController).toBeDefined();
+                expect(appController.value).toBe('mock-app-name');
+                expect(processInsIdController.value).toBe('process-instance-id');
+            });
+        }));
     });
 
     describe('edit filter actions', () => {
@@ -222,16 +294,18 @@ describe('EditTaskFilterCloudComponent', () => {
         beforeEach(() => {
             let change = new SimpleChange(undefined, '10', true);
             component.ngOnChanges({ 'id': change });
+            component.filterProperties = ['state'];
         });
 
         it('should emit save event and save the filter on click save button', async(() => {
-            spyOn(identityService, 'getCurrentUserInfo').and.returnValue({username: 'currentUser'});
+            component.showFilterActions = true;
             const saveFilterSpy = spyOn(service, 'updateFilter').and.returnValue(fakeFilter);
             let saveSpy: jasmine.Spy = spyOn(component.action, 'emit');
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
-            const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
+            fixture.detectChanges();
+            let stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
             stateElement.click();
             fixture.detectChanges();
             const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
@@ -247,13 +321,14 @@ describe('EditTaskFilterCloudComponent', () => {
         }));
 
         it('should emit delete event and delete the filter on click of delete button', async(() => {
-            spyOn(identityService, 'getCurrentUserInfo').and.returnValue({username: 'currentUser'});
+            component.showFilterActions = true;
             const deleteFilterSpy = spyOn(service, 'deleteFilter').and.callThrough();
             let deleteSpy: jasmine.Spy = spyOn(component.action, 'emit');
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
-            const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
+            fixture.detectChanges();
+            let stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
             stateElement.click();
             fixture.detectChanges();
             let deleteButton = fixture.debugElement.nativeElement.querySelector('#adf-delete-id');
@@ -266,13 +341,14 @@ describe('EditTaskFilterCloudComponent', () => {
         }));
 
         it('should emit saveAs event and add filter on click saveAs button', async(() => {
-            spyOn(identityService, 'getCurrentUserInfo').and.returnValue({username: 'currentUser'});
+            component.showFilterActions = true;
             const saveAsFilterSpy = spyOn(service, 'addFilter').and.callThrough();
             let saveAsSpy: jasmine.Spy = spyOn(component.action, 'emit');
             fixture.detectChanges();
             let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
-            const stateElement = fixture.debugElement.query(By.css('#adf-task-filter-state-id .mat-select-trigger')).nativeElement;
+            fixture.detectChanges();
+            let stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
             stateElement.click();
             fixture.detectChanges();
             const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-as-id');

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

@@ -16,37 +16,53 @@
  */
 
 import { Component, OnChanges, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
-import { FormGroup, FormBuilder } from '@angular/forms';
+import { AbstractControl , FormGroup, FormBuilder } from '@angular/forms';
-import { TaskFilterCloudModel, FilterActionType } from './../models/filter-cloud.model';
+import { TaskFilterCloudModel, FilterActionType, TaskFilterProperties, FilterOptions } from './../models/filter-cloud.model';
 import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
 import { MatDialog } from '@angular/material';
 import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
 import { TranslationService } from '@alfresco/adf-core';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, map, filter } from 'rxjs/operators';
+import { of, Observable } from 'rxjs';
+import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
+import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
+import moment from 'moment-es6';
 
 @Component({
   selector: 'adf-cloud-edit-task-filter',
   templateUrl: './edit-task-filter-cloud.component.html',
-  styleUrls: ['./edit-task-filter-cloud.component.scss']
+    styleUrls: ['./edit-task-filter-cloud.component.scss']
 })
 export class EditTaskFilterCloudComponent implements OnChanges {
 
     public static ACTION_SAVE = 'SAVE';
     public static ACTION_SAVE_AS = 'SAVE_AS';
     public static ACTION_DELETE = 'DELETE';
+    public static APP_RUNNING_STATUS: string = 'RUNNING';
+    public static MIN_VALUE = 1;
+    public static DEFAULT_TASK_FILTER_PROPERTIES = ['state', 'assignment', 'sort', 'order'];
+    public FORMAT_DATE: string = 'DD/MM/YYYY';
 
-    /** Name of the app. */
+    /** (required) Name of the app. */
     @Input()
     appName: string;
 
-    /** ID of the task filter. */
+    /** (required) ID of the task filter. */
     @Input()
     id: string;
 
-    taskFilter: TaskFilterCloudModel;
+    @Input()
-    changedTaskFilter: TaskFilterCloudModel;
+    filterProperties: string[] = EditTaskFilterCloudComponent.DEFAULT_TASK_FILTER_PROPERTIES; // default ['state', 'assignment', 'sort', 'order']
 
-    /** Emitted when a task filter property changes. */
+    /** Toggles the filter actions. */
+    @Input()
+    toggleFilterActions = true;
+
+    /** Toggles the title. */
+    @Input()
+    showTitle = true;
+
+    /** Emitted when an task filter property changes. */
     @Output()
     filterChange: EventEmitter<TaskFilterCloudModel> = new EventEmitter();
 
@@ -54,12 +70,15 @@ export class EditTaskFilterCloudComponent implements OnChanges {
     @Output()
     action: EventEmitter<FilterActionType> = new EventEmitter();
 
+    taskFilter: TaskFilterCloudModel;
+    changedTaskFilter: TaskFilterCloudModel;
+
     columns = [
-        {key: 'id', label: 'ID'},
+        {value: 'id', label: 'ID'},
-        {key: 'name', label: 'NAME'},
+        {value: 'name', label: 'NAME'},
-        {key: 'createdDate', label: 'Created Date'},
+        {value: 'createdDate', label: 'Created Date'},
-        {key: 'priority', label: 'PRIORITY'},
+        {value: 'priority', label: 'PRIORITY'},
-        {key: 'processDefinitionId', label: 'PROCESS DEFINITION ID'}
+        {value: 'processDefinitionId', label: 'PROCESS DEFINITION ID'}
       ];
 
     status = [
@@ -72,39 +91,48 @@ export class EditTaskFilterCloudComponent implements OnChanges {
         {label: 'DELETED', value: 'DELETED'}
     ];
 
-    directions = ['ASC', 'DESC'];
+    directions = [
+        { label: 'ASC', value: 'ASC' },
+        { label: 'DESC', value: 'DESC' }
+    ];
+
     formHasBeenChanged = false;
     editTaskFilterForm: FormGroup;
+    taskFilterProperties: any[] = [];
+    showFilterActions: boolean = false;
 
     constructor(
         private formBuilder: FormBuilder,
         public dialog: MatDialog,
         private translateService: TranslationService,
-        private taskFilterCloudService: TaskFilterCloudService) {}
+        private taskFilterCloudService: TaskFilterCloudService,
+        private appsProcessCloudService: AppsProcessCloudService) {
+        }
 
     ngOnChanges(changes: SimpleChanges) {
         const id = changes['id'];
         if (id && id.currentValue !== id.previousValue) {
             this.retrieveTaskFilter();
-            this.buildForm();
+            this.initTaskFilterProperties(this.taskFilter);
+            this.buildForm(this.taskFilterProperties);
         }
     }
 
-    buildForm() {
+    retrieveTaskFilter() {
+        this.taskFilter = new TaskFilterCloudModel(this.taskFilterCloudService.getTaskFilterById(this.appName, this.id));
+    }
+
+    buildForm(taskFilterProperties: TaskFilterProperties[]) {
         this.formHasBeenChanged = false;
-        this.editTaskFilterForm = this.formBuilder.group({
+        this.editTaskFilterForm = this.formBuilder.group(this.getFormControlsConfig(taskFilterProperties));
-            state: this.taskFilter.state,
-            appName: this.taskFilter.appName,
-            processDefinitionId: this.taskFilter.processDefinitionId,
-            assignment: this.taskFilter.assignment,
-            sort: this.taskFilter.sort,
-            order: this.taskFilter.order
-        });
         this.onFilterChange();
     }
 
-    retrieveTaskFilter() {
+    getFormControlsConfig(taskFilterProperties: TaskFilterProperties[]): any {
-        this.taskFilter = this.taskFilterCloudService.getTaskFilterById(this.appName, this.id);
+        const properties = taskFilterProperties.map((property: TaskFilterProperties) => {
+            return { [property.key]: property.value };
+        });
+        return properties.reduce(((result, current) => Object.assign(result, current)), {});
     }
 
     /**
@@ -112,14 +140,58 @@ export class EditTaskFilterCloudComponent implements OnChanges {
      */
     onFilterChange() {
         this.editTaskFilterForm.valueChanges
-            .pipe(debounceTime(300))
+        .pipe(debounceTime(500),
+            filter(() => this.isFormValid()))
             .subscribe((formValues: TaskFilterCloudModel) => {
-            this.changedTaskFilter = new TaskFilterCloudModel(Object.assign({}, this.taskFilter, formValues));
+                this.changedTaskFilter = new TaskFilterCloudModel(Object.assign({}, this.taskFilter, formValues));
-            this.formHasBeenChanged = !this.compareFilters(this.changedTaskFilter, this.taskFilter);
+                this.formHasBeenChanged = !this.compareFilters(this.changedTaskFilter, this.taskFilter);
-            this.filterChange.emit(this.changedTaskFilter);
+                this.filterChange.emit(this.changedTaskFilter);
         });
     }
 
+    initTaskFilterProperties(taskFilter: TaskFilterCloudModel) {
+        if (this.filterProperties && this.filterProperties.length > 0) {
+            const defaultProperties = this.defaultTaskFilterProperties(taskFilter);
+            this.taskFilterProperties = defaultProperties.filter((filterProperty) => this.isValidProperty(this.filterProperties, filterProperty));
+        } else {
+            this.taskFilterProperties = EditTaskFilterCloudComponent.DEFAULT_TASK_FILTER_PROPERTIES;
+        }
+    }
+
+    private isValidProperty(filterProperties: string[], filterProperty: any): boolean {
+        return filterProperties ? filterProperties.indexOf(filterProperty.key) >= 0 : true;
+    }
+
+    isFormValid(): boolean {
+        return this.editTaskFilterForm.valid;
+    }
+
+    getPropertyController(property: TaskFilterProperties): AbstractControl {
+        return this.editTaskFilterForm.get(property.key);
+    }
+
+    onDateChanged(newDateValue: any, dateProperty: TaskFilterProperties) {
+        if (newDateValue) {
+            let momentDate;
+
+            if (typeof newDateValue === 'string') {
+                momentDate = moment(newDateValue, this.FORMAT_DATE, true);
+            } else {
+                momentDate = newDateValue;
+            }
+
+            if (momentDate.isValid()) {
+                this.getPropertyController(dateProperty).setValue(momentDate.toDate());
+            } else {
+                this.getPropertyController(dateProperty).setErrors({ invalid: true });
+            }
+        }
+    }
+
+    hasError(property: TaskFilterProperties): boolean {
+        return this.getPropertyController(property).errors && this.getPropertyController(property).errors.invalid;
+    }
+
     /**
      * Check if both filters are same
      */
@@ -127,6 +199,19 @@ export class EditTaskFilterCloudComponent implements OnChanges {
         return JSON.stringify(editedQuery).toLowerCase() === JSON.stringify(currentQuery).toLowerCase();
     }
 
+    getRunningApplications(): Observable<FilterOptions[]> {
+        return this.appsProcessCloudService.getDeployedApplicationsByStatus(EditTaskFilterCloudComponent.APP_RUNNING_STATUS).pipe(
+            map((applications: ApplicationInstanceModel[]) => {
+                if (applications && applications.length > 0) {
+                    let options: FilterOptions[] = [];
+                    applications.map((application) => {
+                        options.push({ label: application.name, value: application.name });
+                    });
+                    return options;
+                }
+            }));
+    }
+
     onSave() {
         this.taskFilterCloudService.updateFilter(this.changedTaskFilter);
         this.action.emit({actionType: EditTaskFilterCloudComponent.ACTION_SAVE, id: this.changedTaskFilter.id});
@@ -155,14 +240,14 @@ export class EditTaskFilterCloudComponent implements OnChanges {
                                     id: filterId,
                                     key: 'custom-' + filterKey
                                 };
-                const filter = Object.assign({}, this.changedTaskFilter, newFilter);
+                const resultFilter = Object.assign({}, this.changedTaskFilter, newFilter);
-                this.taskFilterCloudService.addFilter(filter);
+                this.taskFilterCloudService.addFilter(resultFilter);
-                this.action.emit({actionType: EditTaskFilterCloudComponent.ACTION_SAVE_AS, id: filter.id});
+                this.action.emit({actionType: EditTaskFilterCloudComponent.ACTION_SAVE_AS, id: resultFilter.id});
             }
         });
     }
 
-    getSanitizeFilterName(filterName) {
+    getSanitizeFilterName(filterName): string {
         const nameWithHyphen = this.replaceSpaceWithHyphen(filterName.trim());
         return nameWithHyphen.toLowerCase();
     }
@@ -171,4 +256,171 @@ export class EditTaskFilterCloudComponent implements OnChanges {
         const regExt = new RegExp(' ', 'g');
         return name.replace(regExt, '-');
     }
+
+    toggleActions(): boolean {
+        return this.toggleFilterActions;
+    }
+
+    onExpand(event: any) {
+        this.showFilterActions = true;
+    }
+
+    onClose(event: any) {
+        this.showFilterActions = false;
+    }
+
+    isDateType(property: TaskFilterProperties): boolean {
+        return property.type === 'date';
+    }
+
+    isSelectType(property: TaskFilterProperties): boolean {
+        return property.type === 'select';
+    }
+
+    isTextType(property: TaskFilterProperties): boolean {
+        return property.type === 'text';
+    }
+
+    defaultTaskFilterProperties(currentTaskFilter: TaskFilterCloudModel): TaskFilterProperties[] {
+        return [
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.APP_NAME',
+                type: 'select',
+                key: 'appName',
+                value: this.appName || '',
+                options: this.getRunningApplications()
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.STATUS',
+                type: 'select',
+                key: 'state',
+                value: currentTaskFilter.state || this.status[0].value,
+                options: of(this.status)
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.ASSIGNMENT',
+                type: 'text',
+                key: 'assignment',
+                value: currentTaskFilter.assignment || ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PROCESS_DEF_ID',
+                type: 'text',
+                key: 'processDefinitionId',
+                value: currentTaskFilter.processDefinitionId || ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.COLUMN',
+                type: 'select',
+                key: 'sort',
+                value: currentTaskFilter.sort || this.columns[0].value,
+                options: of(this.columns)
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DIRECTION',
+                type: 'select',
+                key: 'order',
+                value: currentTaskFilter.order || this.directions[0].value,
+                options: of(this.directions)
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PROCESS_INSTANCE_ID',
+                type: 'text',
+                key: 'processInstanceId',
+                value: currentTaskFilter.processInstanceId || ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DUE_AFTER',
+                type: 'date',
+                key: 'dueAfter',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DUE_BEFORE',
+                type: 'date',
+                key: 'dueBefore',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.CLAIMED_DATE_FROM',
+                type: 'date',
+                key: 'claimedDateFrom',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.CLAIMED_DATE_TO',
+                type: 'date',
+                key: 'claimedDateTo',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.CREATED_DATE_FORM',
+                type: 'date',
+                key: 'createdDateFrom',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.CREATED_DATE_TO',
+                type: 'date',
+                key: 'createdDateTo',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.TASK_NAME',
+                type: 'text',
+                key: 'taskName',
+                value: currentTaskFilter.taskName || ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PARENT_TASK_ID',
+                type: 'text',
+                key: 'parentTaskId',
+                value: currentTaskFilter.parentTaskId || ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PRIORITY',
+                type: 'text',
+                key: 'priority',
+                value: currentTaskFilter.priority || ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.STAND_ALONE',
+                type: 'text',
+                key: 'standAlone',
+                value: currentTaskFilter.standAlone || ''
+            }),
+
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.LAST_MODIFIED_FROM',
+                type: 'date',
+                key: 'lastModifiedFrom',
+                value: ''
+            }),
+
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.LAST_MODIFIED_TO',
+                type: 'date',
+                key: 'lastModifiedTo',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.OWNER',
+                type: 'text',
+                key: 'owner',
+                value: currentTaskFilter.owner || ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DUE_DATE_FROM',
+                type: 'date',
+                key: 'dueDateFrom',
+                value: ''
+            }),
+            new TaskFilterProperties({
+                label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DUE_DATE_TO',
+                type: 'date',
+                key: 'dueDateTo',
+                value: ''
+            })
+        ];
+    }
 }

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

@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import { Observable } from 'rxjs';
+
 export class TaskFilterCloudModel  {
     id: string;
     name: string;
@@ -27,6 +29,23 @@ export class TaskFilterCloudModel  {
     sort: string;
     assignment: string;
     order: string;
+    description: string;
+    dueAfter: Date;
+    dueBefore: Date;
+    owner: string;
+    processInstanceId: string;
+    claimedDateFrom: Date;
+    claimedDateTo: Date;
+    createdDateFrom: Date;
+    createdDateTo: Date;
+    dueDateFrom: Date;
+    dueDateTo: Date;
+    taskName: string;
+    parentTaskId: string;
+    priority: number;
+    standAlone: any;
+    lastModifiedFrom: Date;
+    lastModifiedTo: Date;
 
     constructor(obj?: any) {
         if (obj) {
@@ -41,14 +60,32 @@ export class TaskFilterCloudModel  {
             this.sort = obj.sort || null;
             this.assignment = obj.assignment || null;
             this.order = obj.order || null;
+            this.description = obj.description || null;
+            this.dueAfter = obj.dueAfter || null;
+            this.dueBefore = obj.dueBefore || null;
+            this.processInstanceId = obj.processInstanceId || null;
+            this.claimedDateFrom = obj.claimedDateFrom || null;
+            this.claimedDateTo = obj.claimedDateTo || null;
+            this.createdDateFrom = obj.createdDateFrom || null;
+            this.createdDateTo = obj.createdDateTo || null;
+            this.dueDateFrom = obj.dueDateFrom || null;
+            this.dueDateTo = obj.dueDateTo || null;
+            this.taskName = obj.taskName || null;
+            this.parentTaskId = obj.parentTaskId || null;
+            this.priority = obj.priority || null;
+            this.standAlone = obj.standAlone || null;
+            this.lastModifiedFrom = obj.lastModifiedFrom || null;
+            this.lastModifiedTo = obj.lastModifiedTo || null;
         }
     }
 }
 export class FilterParamsModel {
+
     id?: string;
     name?: string;
     key?: string;
     index?: number;
+
     constructor(obj?: any) {
         if (obj) {
             this.id = obj.id || null;
@@ -58,7 +95,31 @@ export class FilterParamsModel {
         }
     }
 }
+
 export interface FilterActionType {
     actionType: string;
     id: string;
 }
+
+export interface FilterOptions {
+    label?: string;
+    value?: string;
+}
+
+export class TaskFilterProperties {
+    label: string;
+    type: string; // text|date|select
+    value: string;
+    key: string;
+    options$: Observable<FilterOptions[]>;
+
+    constructor(obj?: any) {
+        if (obj) {
+            this.label = obj.label || null;
+            this.type = obj.type || null;
+            this.value = obj.value || null;
+            this.key = obj.key || null;
+            this.options$ = obj.options || null;
+        }
+    }
+}

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

@@ -27,6 +27,8 @@ import { TaskFilterCloudService } from './services/task-filter-cloud.service';
 import { HttpClientModule } from '@angular/common/http';
 import { EditTaskFilterCloudComponent } from './components/edit-task-filter-cloud.component';
 import { TaskFilterDialogCloudComponent } from './components/task-filter-dialog-cloud.component';
+import { AppListCloudModule } from './../../app/app-list-cloud.module';
+
 @NgModule({
     imports: [
         FormsModule,
@@ -40,7 +42,8 @@ import { TaskFilterDialogCloudComponent } from './components/task-filter-dialog-
                 useClass: TranslateLoaderService
             }
         }),
-        MaterialModule
+        MaterialModule,
+        AppListCloudModule
     ],
     declarations: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent, TaskFilterDialogCloudComponent],
     exports: [TaskFiltersCloudComponent, EditTaskFilterCloudComponent],