[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/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({
-            action: ProcessFilterDialogCloudComponent.ACTION_SAVE,
-            icon: 'icon',
-            name: 'fake-name'
-        }); }});
+        spyOn(dialog, 'open').and.returnValue({
+            afterClosed() {
+                return of({
+                    action: ProcessFilterDialogCloudComponent.ACTION_SAVE,
+                    icon: 'icon',
+                    name: 'fake-name'
+                });
+            }
+        });
        getProcessFilterByIdSpy = spyOn(service, 'getProcessFilterById').and.returnValue(fakeFilter);
        getRunningApplicationsSpy = spyOn(appsService, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
    });
@@ -81,7 +85,7 @@ describe('EditProcessFilterCloudComponent', () => {

    it('should fetch process instance filter by id', async(() => {
        let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-        component.ngOnChanges({'id': processFilterIDchange});
+        component.ngOnChanges({ 'id': processFilterIDchange });
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            fixture.detectChanges();
@@ -96,7 +100,7 @@ describe('EditProcessFilterCloudComponent', () => {

    it('should display filter name as title', () => {
        let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-        component.ngOnChanges({'id': processFilterIDchange});
+        component.ngOnChanges({ 'id': processFilterIDchange });
        fixture.detectChanges();
        const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
        const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-sub-title-id');
@@ -113,7 +117,7 @@ describe('EditProcessFilterCloudComponent', () => {

        beforeEach(() => {
            let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
            fixture.detectChanges();
        });

@@ -249,7 +253,7 @@ describe('EditProcessFilterCloudComponent', () => {

        it('should able to build a editProcessFilter form with default properties if input is empty', async(() => {
            let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
            component.filterProperties = [];
            fixture.detectChanges();
            fixture.whenStable().then(() => {
@@ -272,7 +276,7 @@ describe('EditProcessFilterCloudComponent', () => {
        it('should able to fetch running applications when appName property defined in the input', async(() => {
            fixture.detectChanges();
            let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
            fixture.detectChanges();
            component.filterProperties = ['appName', 'processName'];
            const appController = component.editProcessFilterForm.get('appName');
@@ -286,8 +290,8 @@ describe('EditProcessFilterCloudComponent', () => {

        it('should able to filter filterProperties when input is defined', async(() => {
            component.id = 'mock-process-filter-id';
-            let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            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(() => {
@@ -302,7 +306,7 @@ describe('EditProcessFilterCloudComponent', () => {
        it('should display default sort properties', async(() => {
            fixture.detectChanges();
            let processFilterIdchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({ 'id': processFilterIdchange});
+            component.ngOnChanges({ 'id': processFilterIdchange });
            fixture.detectChanges();
            let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
            expansionPanel.click();
@@ -340,7 +344,7 @@ describe('EditProcessFilterCloudComponent', () => {

        beforeEach(() => {
            let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
            fixture.detectChanges();
        });

@@ -436,10 +440,11 @@ describe('EditProcessFilterCloudComponent', () => {
        }));

        it('should filter actions when input actions are specified', async(() => {
+            fixture.detectChanges();
            component.actions = ['save'];
            fixture.detectChanges();
            let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
-            component.ngOnChanges({'id': processFilterIDchange});
+            component.ngOnChanges({ 'id': processFilterIDchange });
            fixture.detectChanges();
            fixture.whenStable().then(() => {
                expect(component.processFilterActions).toBeDefined();
--- 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;