[ADF-3773] Filter definition in a component APS2 (#4016)

* * Genearated EditTaskFilterCloudComponent

* * Added unit tests to the editTaskFiltercomponent
* Added  unit tests to the  taskFilterDialog
* Added id selector

* * Added translation keys to the editTaskFilter component* Added translation keys related to the editTask in the en.json file* Changed FilterRepresentationModel to TaskFilterCloudRepresentationModel* Refactored editTaskFilterComponent* Created a deleteFilter method in the taskService

* * Refactored editTaskFilterComponent

* * used new editTaskFilterCloud component in the demo shell

* * Refactored editTaskFilter component* Updated unit tests

* Refresh the filters after the action
Reset the values after the EditComponentChanges
Improve the code

* * Added translate keys in demo shell for edittaskDialog component
* Modified  translate keys for editTaskFilterCLoud component

* * Added documentation to the editTaskFilter component.* Fixed a typo.* Fixed Failing Test cases. * Added a EditTaskFilterCloud png

* rebase to dev
fix bugs and improve integration

* * Fixed tsLint css error

* * Fixed tslint css error * Fixed one unit test

* Move the concern of save delete saveAs into the component
fix integration with Demo shell
fix bugs

* * Updated unit test to the recent changes

* * Updated editTaskFIlter doc
* Added unit tests to the taskFIlterDialog component

* * Updated editTaskFIlter doc* Added unit tests to the taskFIlterDialog component

* * Merged task filter models to a single model

* * Updated tests with new taskfilter model

* * Updated documentation for new taskfilter model

* * Used new taskfilter model in the demo

* * Improved filter selection method

* * Removed unnecessory tanslate keys from demo shell
* Modified filterCloudModel
* fixed unit tests to the recent changes

* * Improved change handling for filter properties

* * Improved unit tests

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

@@ -69,7 +69,6 @@ import { TaskListCloudDemoComponent } from './components/task-list-cloud-demo/ta
 import { ProcessListCloudExampleComponent } from './components/cloud/process-list-cloud-example.component';
 import { TreeViewSampleComponent } from './components/tree-view/tree-view-sample.component';
 import { AppExtensionsModule } from './extensions/extensions.module';
-
 @NgModule({
     imports: [
         BrowserModule,

demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html

@@ -18,71 +18,27 @@
     </adf-cloud-start-task>
 </div>
 <div *ngIf="!showStartTask">
-    <adf-cloud-task-filters [appName]="applicationName" [filterParam]="filterTaskParam" [showIcons]="true" (filterClick)="onFilterSelected($event)">
+    <adf-cloud-task-filters  #taskFiltersCloud
+     [appName]="applicationName"
+     [filterParam]="filterTaskParam"
+     [showIcons]="true"
+     (filterClick)="onFilterSelected($event)">
     </adf-cloud-task-filters>
 
-<mat-accordion>
-    <mat-expansion-panel>
-        <mat-expansion-panel-header>
-            <mat-panel-title>
-                {{filterName | translate}}
-            </mat-panel-title>
-            <mat-panel-description>
-                Customise your filter
-            </mat-panel-description>
-        </mat-expansion-panel-header>
-        <div class="adf-task-cloud-demo-select">
-            <mat-form-field style="margin: 8px;">
-                <mat-select placeholder="Status" [(ngModel)]="status">
-                    <mat-option value="">
-                        ALL
-                    </mat-option>
-                    <mat-option value="CREATED">
-                        CREATED
-                    </mat-option>
-                    <mat-option value="CANCELLED">
-                        CANCELLED
-                    </mat-option>
-                    <mat-option value="ASSIGNED">
-                        ASSIGNED
-                    </mat-option>
-                    <mat-option value="SUSPENDED">
-                        SUSPENDED
-                    </mat-option>
-                    <mat-option value="COMPLETED">
-                        COMPLETED
-                    </mat-option>
-                    <mat-option value="DELETED">
-                        DELETED
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select [formControl]="sortFormControl">
-                    <mat-option [value]="''">Select a column</mat-option>
-                    <mat-option *ngFor="let column of columns" [value]="column.key">
-                    {{column.label}}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field>
-                <mat-select [formControl]="sortDirectionFormControl">
-                    <mat-option [value]="''">Select a direction</mat-option>
-                    <mat-option value="ASC">
-                        ASC
-                    </mat-option>
-                    <mat-option value="DESC">
-                        DESC
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-        </div>
+    <adf-cloud-edit-task-filter
+        [appName]="applicationName"
+        [id]="currentFilter.id"
+        (filterChange)="onFilterChange($event)"
+        (action)="onEditActions($event)">
+    </adf-cloud-edit-task-filter>
 
-        </mat-expansion-panel>
-    </mat-accordion>
-    <div *ngIf="isFilterLoaded">
-        <adf-cloud-task-list #taskCloud [applicationName]="applicationName" [status]="status"
-            [landingTaskId]="selectTask" [sorting]="sortArray" (rowClick)="onRowClick($event)">
+    <div *ngIf="editedFilter">
+        <adf-cloud-task-list #taskCloud
+            [applicationName]="editedFilter.appName"
+            [status]="editedFilter.state"
+            [assignee]="editedFilter.assignment"
+            [sorting]="sortArray"
+            (rowClick)="onRowClick($event)">
             <data-columns>
                 <data-column key="entry.id" title="Id"></data-column>
                 <data-column key="entry.name" title="Name" class="full-width name-column ellipsis-cell"></data-column>

demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts

@@ -16,12 +16,16 @@
  */
 
 import { Component, ViewChild, OnInit } from '@angular/core';
-import { TaskListCloudComponent, TaskListCloudSortingModel } from '@alfresco/adf-process-services-cloud';
+import {
+    TaskListCloudComponent,
+    TaskFiltersCloudComponent,
+    TaskListCloudSortingModel,
+    TaskFilterCloudModel,
+    EditTaskFilterCloudComponent
+} from '@alfresco/adf-process-services-cloud';
 import { UserPreferencesService } from '@alfresco/adf-core';
 import { Observable } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
-import { FormControl } from '@angular/forms';
-import { MatDialog } from '@angular/material';
 
 @Component({
     selector: 'app-task-list-cloud-demo',
@@ -33,91 +37,48 @@ export class TaskListCloudDemoComponent implements OnInit {
     @ViewChild('taskCloud')
     taskCloud: TaskListCloudComponent;
 
-    sortFormControl: FormControl;
-    sortDirectionFormControl: FormControl;
+    @ViewChild('taskFiltersCloud')
+    taskFiltersCloud: TaskFiltersCloudComponent;
 
     appDefinitionList: Observable<any>;
     applicationName;
     status: string = '';
-    sort: string = '';
-    isFilterLoaded = false;
     showStartTask = false;
-    sortDirection: string = 'ASC';
-    filterName: string;
     clickedRow: string = '';
-    selectTask: string = '';
     filterTaskParam;
-    sortArray: TaskListCloudSortingModel [];
+    sortArray: TaskListCloudSortingModel[];
+    editedFilter: TaskFilterCloudModel;
 
-    columns = [
-        {key: 'id', label: 'ID'},
-        {key: 'name', label: 'NAME'},
-        {key: 'createdDate', label: 'Created Date'},
-        {key: 'priority', label: 'PRIORITY'},
-        {key: 'processDefinitionId', label: 'PROCESS DEFINITION ID'}
-      ];
+    currentFilter: TaskFilterCloudModel;
 
     constructor(
-        public dialog: MatDialog,
         private route: ActivatedRoute,
         private router: Router,
-        private userPreference: UserPreferencesService) {
-    }
+        private userPreference: UserPreferencesService
+    ) {}
 
     ngOnInit() {
         this.route.params.subscribe((params) => {
             this.applicationName = params.applicationName;
         });
 
-        this.sortFormControl = new FormControl('');
-
-        this.sortFormControl.valueChanges.subscribe(
-            (sortValue) => {
-                this.sort = sortValue;
-
-                this.sortArray = [{
-                    orderBy: this.sort,
-                    direction: this.sortDirection
-                }];
-            }
-        );
-        this.sortDirectionFormControl = new FormControl('');
-
-        this.sortDirectionFormControl.valueChanges.subscribe(
-            (sortDirectionValue) => {
-                this.sortDirection = sortDirectionValue;
-
-                this.sortArray = [{
-                    orderBy: this.sort,
-                    direction: this.sortDirection
-                }];
-            }
-        );
-
-        this.route.queryParams
-            .subscribe((params) => {
-                if (params.status) {
-                    this.status = params.status;
-                    this.sort = params.sort;
-                    this.sortDirection = params.order;
-                    this.filterName = params.filterName;
-                    this.isFilterLoaded = true;
-                    this.sortDirectionFormControl.setValue(this.sortDirection);
-                    this.sortFormControl.setValue(this.sort);
-                }
-            });
+        this.route.queryParams.subscribe( (params) => {
+            this.onFilterChange(params);
+        });
     }
 
-    onFilterSelected(filter) {
-        const queryParams = {
-            id: filter.id,
-            filterName: filter.name,
-            status: filter.query.state,
-            assignee: filter.query.assignment,
-            sort: filter.query.sort,
-            order: filter.query.order
-        };
-        this.router.navigate([`/cloud/${this.applicationName}/tasks/`], {queryParams: queryParams});
+    onFilterSelected(filter: TaskFilterCloudModel) {
+        this.currentFilter = Object.assign({}, filter);
+        this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.currentFilter.sort, direction: this.currentFilter.order})];
+
+        this.router.navigate([`/cloud/${this.applicationName}/tasks/`], {
+            queryParams: this.currentFilter
+        });
+    }
+
+    onFilterChange(filter: any) {
+        this.editedFilter = Object.assign({}, this.currentFilter, filter);
+        this.sortArray = [new TaskListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order})];
     }
 
     onStartTask() {
@@ -140,4 +101,28 @@ export class TaskListCloudDemoComponent implements OnInit {
     onRowClick($event) {
         this.clickedRow = $event;
     }
+
+    onEditActions(event: any) {
+        if (event.actionType === EditTaskFilterCloudComponent.ACTION_SAVE) {
+            this.save(event.id);
+        } else if (event.actionType === EditTaskFilterCloudComponent.ACTION_SAVE_AS) {
+            this.saveAs(event.id);
+        } else if (event.actionType === EditTaskFilterCloudComponent.ACTION_DELETE) {
+            this.deleteFilter();
+        }
+    }
+
+    saveAs(filterId) {
+        this.taskFiltersCloud.filterParam = <any> {id : filterId};
+        this.taskFiltersCloud.getFilters(this.applicationName);
+    }
+
+    save(filterId) {
+        this.taskFiltersCloud.filterParam = <any> {id : filterId};
+        this.taskFiltersCloud.getFilters(this.applicationName);
+    }
+
+    deleteFilter() {
+        this.taskFiltersCloud.getFilters(this.applicationName);
+    }
 }