[ADF-2854] Fix demoshell task/process filter and routing (#3360)

* Fix demoshell task/process filter and routing

* Use the correct js api model

* Fix unit test

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

@@ -140,6 +140,11 @@ export const appRoutes: Routes = [
                 component: ShowDiagramComponent,
                 canActivate: [AuthGuardBpm]
             },
+            {
+                path: 'activiti/apps/:appId/report',
+                component: ProcessServiceComponent,
+                canActivate: [AuthGuardBpm]
+            },
             // TODO: check if neeeded
             {
                 path: 'activiti/appId/:appId',

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -29,7 +29,7 @@ import {
     Output
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ProcessInstanceFilterRepresentation, Pagination } from 'alfresco-js-api';
+import { ProcessInstanceFilterRepresentation, Pagination, UserProcessInstanceFilterRepresentation } from 'alfresco-js-api';
 import {
     FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService,
     DynamicTableRow, ValidateDynamicTableRowEvent, AppConfigService, PaginationComponent, UserPreferenceValues
@@ -63,10 +63,15 @@ import { Subscription } from 'rxjs/Subscription';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
 import { PreviewService } from '../../services/preview.service';
+import { Location } from '@angular/common';
 
 const currentProcessIdNew = '__NEW__';
 const currentTaskIdNew = '__NEW__';
 
+const TASK_ROUTE = 0;
+const PROCESS_ROUTE = 1;
+const REPORT_ROUTE = 2;
+
 @Component({
     selector: 'app-process-service',
     templateUrl: './process-service.component.html',
@@ -108,7 +113,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     @Input()
     appId: number = null;
 
-    @Input()
     filterSelected: object = null;
 
     @Output()
@@ -137,8 +141,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
 
     taskFilter: FilterRepresentationModel;
     report: any;
-    processFilter: ProcessInstanceFilterRepresentation;
+    processFilter: UserProcessInstanceFilterRepresentation;
-
     sub: Subscription;
     blobFile: any;
     flag = true;
@@ -162,6 +165,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 private preview: PreviewService,
                 formRenderingService: FormRenderingService,
                 formService: FormService,
+                private location: Location,
                 private preferenceService: UserPreferencesService) {
         this.dataTasks = new ObjectDataTableAdapter();
         this.dataTasks.setSorting(new DataSorting('created', 'desc'));
@@ -237,7 +241,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     onTaskFilterClick(filter: FilterRepresentationModel): void {
         this.applyTaskFilter(filter);
         this.resetTaskPaginationPage();
-        this.router.navigate(['/activiti/apps', this.appId || 0, 'tasks', filter.id]);
     }
 
     resetTaskPaginationPage() {
@@ -245,13 +248,14 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     onTabChange(event: any): void {
-        this.showProcessPagination = event.index === 1;
+        const index = event.index;
-        this.paginationPageSize = this.preferenceService.paginationSize;
+        this.showProcessPagination = index === PROCESS_ROUTE;
-        if (this.processList) {
+        if (index === TASK_ROUTE) {
-            this.processList.reload();
+            this.relocateLocationToTask();
-        }
+        } else if (index === PROCESS_ROUTE) {
-        if (this.taskList) {
+            this.relocateLocationToProcess();
-            this.taskList.reload();
+        } else if (index === REPORT_ROUTE) {
+            this.relocateLocationToReport();
         }
     }
 
@@ -269,10 +273,12 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     }
 
     applyTaskFilter(filter: FilterRepresentationModel) {
-        this.taskFilter = filter;
+        this.taskFilter = Object.assign({}, filter);
+
         if (filter && this.taskList) {
             this.taskList.hasCustomDataSource = false;
         }
+        this.relocateLocationToTask();
     }
 
     onStartTaskSuccess(event: any): void {
@@ -289,9 +295,10 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.currentTaskId = this.taskList.getCurrentId();
     }
 
-    onProcessFilterClick(event: ProcessInstanceFilterRepresentation): void {
+    onProcessFilterClick(event: UserProcessInstanceFilterRepresentation): void {
         this.processFilter = event;
         this.resetProcessPaginationPage();
+        this.relocateLocationToProcess();
     }
 
     resetProcessPaginationPage() {
@@ -385,6 +392,18 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
         this.router.navigate([`/activiti/apps/${this.appId}/processes/`]);
     }
 
+    relocateLocationToProcess(): void {
+        this.location.go(`/activiti/apps/${this.appId || 0}/processes/${this.processFilter.id}`);
+    }
+
+    relocateLocationToTask(): void {
+        this.location.go(`/activiti/apps/${this.appId || 0}/tasks/${this.taskFilter.id}`);
+    }
+
+    relocateLocationToReport(): void {
+        this.location.go(`/activiti/apps/${this.appId || 0}/report/`);
+    }
+
     onContentClick(content: any): void {
         if (content.contentBlob) {
             this.preview.showBlob(content.name, content.contentBlob);

docs/process-services/filter.model.md

@@ -26,7 +26,7 @@ class AppDefinitionRepresentationModel {
 }
 
 class FilterParamsModel {
-    id: string;
+    id: number;
     name: string;
     index: number;
 }

lib/process-services/task-list/components/task-filters.component.html

@@ -1,6 +1,6 @@
 <div class="menu-container">
     <mat-list class="adf-menu-list">
-        <mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
+        <mat-list-item (click)="selectFilterAndEmit(filter)" *ngFor="let filter of filters"
                       class="adf-filters__entry" [class.active]="currentFilter === filter">
             <mat-icon *ngIf="hasIcon" matListIcon class="adf-filters__entry-icon">assignment</mat-icon>
             <span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>

lib/process-services/task-list/components/task-filters.component.spec.ts

@@ -266,7 +266,7 @@ describe('TaskFiltersComponent', () => {
             done();
         });
 
-        component.selectFilter(currentFilter);
+        component.selectFilterAndEmit(currentFilter);
     });
 
     it('should reload filters by appId on binding changes', () => {
@@ -283,35 +283,32 @@ describe('TaskFiltersComponent', () => {
         spyOn(component, 'getFiltersByAppId').and.stub();
         const appId = null;
 
-        let change = new SimpleChange(null, appId, true);
+        let change = new SimpleChange(undefined, appId, true);
         component.ngOnChanges({ 'appId': change });
 
         expect(component.getFiltersByAppId).toHaveBeenCalledWith(appId);
     });
 
-    it('should change current filter when filterParam (id) changes', (done) => {
+    it('should change current filter when filterParam (id) changes', async() => {
         component.filters = fakeGlobalFilter;
         component.currentFilter = null;
 
-        component.filterClick.subscribe((filter: FilterRepresentationModel) => {
+        fixture.whenStable().then(() => {
-            expect(filter).toEqual(fakeGlobalFilter[0]);
+            expect(component.currentFilter.id).toEqual(fakeGlobalFilter[2].id);
-            expect(component.currentFilter).toEqual(filter);
-            done();
         });
-        const change = new SimpleChange(null, {id : fakeGlobalFilter[0].id}, true);
+        const change = new SimpleChange(null, {id : fakeGlobalFilter[2].id}, true);
         component.ngOnChanges({ 'filterParam': change });
     });
 
-    it('should change current filter when filterParam (name) changes', (done) => {
+    it('should change current filter when filterParam (name) changes', async() => {
         component.filters = fakeGlobalFilter;
         component.currentFilter = null;
 
-        component.filterClick.subscribe((filter: FilterRepresentationModel) => {
+        fixture.whenStable().then(() => {
-            expect(filter).toEqual(fakeGlobalFilter[0]);
+            expect(component.currentFilter.name).toEqual(fakeGlobalFilter[2].name);
-            expect(component.currentFilter).toEqual(filter);
-            done();
         });
-        const change = new SimpleChange(null, {name : fakeGlobalFilter[0].name}, true);
+
+        const change = new SimpleChange(null, {name : fakeGlobalFilter[2].name}, true);
         component.ngOnChanges({ 'filterParam': change });
     });
 
@@ -337,7 +334,7 @@ describe('TaskFiltersComponent', () => {
     it('should load default list when appid is null', () => {
         spyOn(component, 'getFiltersByAppId').and.stub();
 
-        let change = new SimpleChange(null, null, true);
+        let change = new SimpleChange(undefined, null, true);
         component.ngOnChanges({ 'appId': change });
 
         expect(component.getFiltersByAppId).toHaveBeenCalled();

lib/process-services/task-list/components/task-filters.component.ts

@@ -78,15 +78,13 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges) {
         const appName = changes['appName'];
         const appId = changes['appId'];
+        const filter = changes['filterParam'];
         if (appName && appName.currentValue) {
             this.getFiltersByAppName(appName.currentValue);
-        } else if (appId) {
+        } else if (appId && appId.currentValue !== appId.previousValue) {
             this.getFiltersByAppId(appId.currentValue);
-        }
+        } else if (filter && filter.currentValue !== filter.previousValue) {
-
+            this.selectFilter(filter.currentValue);
-        const filterParam = changes['filterParam'];
-        if (filterParam && filterParam.currentValue) {
-            this.selectFilter(filterParam.currentValue);
         }
     }
 
@@ -111,7 +109,7 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
                 } else {
                     this.resetFilter();
                     this.filters = res;
-                    this.selectTaskFilter(this.filterParam, this.filters);
+                    this.selectFilter(this.filterParam);
                     this.success.emit(res);
                 }
             },
@@ -144,7 +142,7 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
             (resDefault: FilterRepresentationModel[]) => {
                 this.resetFilter();
                 this.filters = resDefault;
-                this.selectTaskFilter(this.filterParam, this.filters);
+                this.selectFilter(this.filterParam);
                 this.success.emit(resDefault);
             },
             (errDefault: any) => {
@@ -157,15 +155,23 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
      * Pass the selected filter as next
      * @param filter
      */
-    public selectFilter(newFilter: FilterRepresentationModel) {
+    public selectFilter(newFilter: FilterParamsModel) {
         if (newFilter) {
-            this.currentFilter = this.filters.find(filter =>
+            this.currentFilter = this.filters.find( (filter, index) =>
+                newFilter.index === index ||
                 newFilter.id === filter.id ||
                 (newFilter.name &&
                     (newFilter.name.toLocaleLowerCase() === filter.name.toLocaleLowerCase())
                 ));
-            this.filterClick.emit(this.currentFilter);
         }
+        if (!this.currentFilter) {
+            this.selectDefaultTaskFilter();
+        }
+    }
+
+    public selectFilterAndEmit(newFilter: FilterParamsModel) {
+        this.selectFilter(newFilter);
+        this.filterClick.emit(this.currentFilter);
     }
 
     /**
@@ -183,36 +189,17 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
             },
             () => {
                 if (filteredFilterList.length > 0) {
-                    this.selectTaskFilter(new FilterParamsModel({name: 'My Tasks'}), filteredFilterList);
+                    this.selectFilter(filteredFilterList[0]);
                     this.filterClick.emit(this.currentFilter);
                 }
             });
     }
 
-    /**
-     * Select the first filter of a list if present
-     * @param filterParam
-     * @param filteredFilterList
-     */
-    public selectTaskFilter(filterParam: FilterParamsModel, filteredFilterList: FilterRepresentationModel[]) {
-        let findTaskFilter;
-        if (filterParam) {
-            filteredFilterList.filter((taskFilter: FilterRepresentationModel, index) => {
-                if (filterParam.name && filterParam.name.toLowerCase() === taskFilter.name.toLowerCase() ||
-                    filterParam.id === taskFilter.id.toString() ||
-                    filterParam.index === index) {
-                    findTaskFilter = taskFilter;
-                }
-            });
-        }
-        findTaskFilter ? this.currentFilter = findTaskFilter : this.selectDefaultTaskFilter(filteredFilterList);
-    }
-
     /**
      * Select as default task filter the first in the list
      * @param filteredFilterList
      */
-    public selectDefaultTaskFilter(filteredFilterList: FilterRepresentationModel[]) {
+    public selectDefaultTaskFilter() {
         if (!this.isFilterListEmpty()) {
             this.currentFilter = this.filters[0];
         }

lib/process-services/task-list/models/filter.model.ts

@@ -44,7 +44,7 @@ export class AppDefinitionRepresentationModel {
 }
 
 export class FilterParamsModel {
-    id: string;
+    id: number;
     name: string;
     index: number;