[ADF-3799] Process Filter definition in a component APS2 (#4048)

* * Generated EditProcessFilterComponent by cli
* Added MatExpansionModule

* * Added translation keys related to the editProcessFilterComponent
* Updated editProcessFilterComponent

* * Refactored EditProcessFilter component
* Created delete , save and saveAs  filter methods in the service
* Generated ProcessDialog component
* Exported process-cloud
* Added Unit tests to the EditProcessFilter

* * Added unit tests to the processFIlterDialog component* Refactored process-list-cloud-demo component

* * Added editProcessFilter documentaion.

* * Unified process filter cloud models

* * Used new process-filter-cloud model

* * Updated documentation

* * Updated demo component

* * Updated editProcessFilter unit tests

* * After rebase* Fixed missing documentation

* * Fixed conflicts
* Rebased with dev branch

* Fix import

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

@@ -46,12 +46,7 @@ export class CloudLayoutComponent implements OnInit {
     }
 
     onProcessFilterSelected(filter) {
-        const queryParams = {
-            status: filter.query.state,
-            filterName: filter.name,
-            sort: filter.query.sort,
-            order: filter.query.order
-        };
-        this.router.navigate([`/cloud/${this.applicationName}/processes/`], { queryParams: queryParams });
+        const currentFilter = Object.assign({}, filter);
+        this.router.navigate([`/cloud/${this.applicationName}/processes/`], { queryParams: currentFilter });
     }
 }

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

@@ -1,57 +1,15 @@
 <div fxLayout="column" fxFill fxLayoutGap="2px">
-    <mat-accordion>
-        <mat-expansion-panel>
-            <mat-expansion-panel-header>
-                <mat-panel-title>
-                    {{filterName | translate}}
-                </mat-panel-title>
-                <mat-panel-description>
-                    {{ 'PROCESS_LIST_CLOUD_DEMO.CUSTOMIZE_FILTERS' | translate}}
-                </mat-panel-description>
-            </mat-expansion-panel-header>
-            <div fxLayout="row" fxLayoutGap="10px">
-                <mat-form-field>
-                    <mat-select placeholder="Status" [(ngModel)]="status">
-                        <mat-option value="">
-                            ALL
-                        </mat-option>
-                        <mat-option value="RUNNING">
-                            RUNNING
-                        </mat-option>
-                    <mat-option value="COMPLETED">
-                            COMPLETED
-                        </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>
-
-        </mat-expansion-panel>
-    </mat-accordion>
-    <div fxLayout="column" fxFlex fxLayoutAlign="space-between">
+    <adf-cloud-edit-process-filter
+        [appName]="applicationName"
+        [id]="filterId"
+        (filterChange)="onFilterChange($event)"
+        (action)="onEditActions($event)">
+    </adf-cloud-edit-process-filter>
+    <div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
         <adf-cloud-process-list fxFlex class="adf-cloud-layout-overflow"
-                                [applicationName]="applicationName"
-                                [status]="status"
+                                [applicationName]="editedFilter.appName"
+                                [status]="editedFilter.state"
                                 [sorting]="sortArray"
-                                [id]="filterId"
                                 (rowClick)="onRowClick($event)"
                                 #processCloud>
             <data-columns>

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

@@ -16,9 +16,15 @@
  */
 
 import { Component, ViewChild, OnInit } from '@angular/core';
-import { ProcessListCloudComponent } from '@alfresco/adf-process-services-cloud';
+import {
+    ProcessListCloudComponent,
+    ProcessFilterCloudModel,
+    EditProcessFilterCloudComponent,
+    ProcessListCloudSortingModel,
+    ProcessFiltersCloudComponent
+} from '@alfresco/adf-process-services-cloud';
+
 import { ActivatedRoute } from '@angular/router';
-import { FormControl } from '@angular/forms';
 import { UserPreferencesService } from '@alfresco/adf-core';
 
 @Component({
@@ -30,27 +36,17 @@ export class ProcessesCloudDemoComponent implements OnInit {
     @ViewChild('processCloud')
     processCloud: ProcessListCloudComponent;
 
-    sortFormControl: FormControl;
-    sortDirectionFormControl: FormControl;
+    @ViewChild('processFiltersCloud')
+    processFiltersCloud: ProcessFiltersCloudComponent;
 
     applicationName: string = '';
-    isFilterLoaded:  boolean;
+    isFilterLoaded: boolean;
 
-    status: string = '';
-    filterName: string;
     filterId: string = '';
-    sort: string = '';
     sortArray: any = [];
-    sortField: string;
-    sortDirection: string;
     selectedRow: any;
 
-    columns = [
-        {key: 'id', label: 'ID'},
-        {key: 'name', label: 'NAME'},
-        {key: 'status', label: 'STATUS'},
-        {key: 'startDate', label: 'START DATE'}
-      ];
+    editedFilter: ProcessFilterCloudModel;
 
     constructor(private route: ActivatedRoute,
                 private userPreference: UserPreferencesService) {
@@ -62,43 +58,11 @@ export class ProcessesCloudDemoComponent implements OnInit {
             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.filterName) {
-                    this.status = params.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.isFilterLoaded = true;
+            this.onFilterChange(params);
+            this.filterId = params.id;
+        });
     }
 
     onChangePageSize(event) {
@@ -108,4 +72,33 @@ export class ProcessesCloudDemoComponent implements OnInit {
     onRowClick($event) {
         this.selectedRow = $event;
     }
+
+    onFilterChange(query: any) {
+        this.editedFilter = Object.assign({}, query);
+        this.sortArray = [new ProcessListCloudSortingModel({ orderBy: this.editedFilter.sort, direction: this.editedFilter.order })];
+    }
+
+    onEditActions(event: any) {
+        if (event.actionType === EditProcessFilterCloudComponent.ACTION_SAVE) {
+            this.save(event.id);
+        } else if (event.actionType === EditProcessFilterCloudComponent.ACTION_SAVE_AS) {
+            this.saveAs(event.id);
+        } else if (event.actionType === EditProcessFilterCloudComponent.ACTION_DELETE) {
+            this.deleteFilter();
+        }
+    }
+
+    saveAs(filterId) {
+        this.processFiltersCloud.filterParam = <any> {id : filterId};
+        this.processFiltersCloud.getFilters(this.applicationName);
+    }
+
+    save(filterId) {
+        this.processFiltersCloud.filterParam = <any> {id : filterId};
+        this.processFiltersCloud.getFilters(this.applicationName);
+    }
+
+    deleteFilter() {
+        this.processFiltersCloud.getFilters(this.applicationName);
+    }
 }