diff --git a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html index 45b2b60caf..0d0c05c125 100644 --- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html +++ b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.html @@ -1,6 +1,6 @@

TASK LIST CLOUD DEMO

diff --git a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts index f2a953ea3e..1966e93a7f 100644 --- a/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts +++ b/demo-shell/src/app/components/task-list-cloud-demo/task-list-cloud-demo.component.ts @@ -107,8 +107,10 @@ export class TaskListCloudDemoComponent implements OnInit { onFilterSelected(filter) { const queryParams = { - status: filter.query.state, + id: filter.id, filterName: filter.name, + status: filter.query.state, + assignee: filter.query.assignment, sort: filter.query.sort, order: filter.query.order }; diff --git a/docs/process-services-cloud/task-filters-cloud.component.md b/docs/process-services-cloud/task-filters-cloud.component.md new file mode 100644 index 0000000000..36c3b096f4 --- /dev/null +++ b/docs/process-services-cloud/task-filters-cloud.component.md @@ -0,0 +1,60 @@ +--- +Added: v3.0.0 +Status: Active +Last reviewed: 2018-20-11 +--- + +# Task Filters Cloud component + +Shows all available filters. + +## Basic Usage + +```html + +``` + +## Class members + +### Properties + +| Name | Type | Default value | Description | +| ---- | ---- | ------------- | ----------- | +| appName | `string` | | Display filters available to the current user for the application with the specified name. | +| filterParam | [`FilterParamsModel`](../../lib/process-services-cloud/src/lib/task-cloud/models/filter-cloud.model.ts) | | Parameters to use for the task filter cloud. If there is no match then the default filter (the first one the list) is selected. | +| showIcon | `boolean` | | Toggles display of the filter's icon. | + +### Events + +| Name | Type | Description | +| ---- | ---- | ----------- | +| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when an error occurs during loading. | +| filterClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskFilterCloudRepresentationModel`](../../lib/process-services-cloud/src/lib/task-cloud/models/filter-cloud.model.ts)`>` | Emitted when a filter in the list is clicked. | +| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` | Emitted when the list is loaded. | + +## Details + +### Filtering APS2 task filters + +Use the `filterParam` property to restrict the range of filters that are shown: + +```html + + +``` + +You can use properties from [`FilterParamsModel`](../../lib/process-services-cloud/src/lib/task-cloud/models/filter-cloud.model.ts) +as the value of `filterParam` as shown in the table below: + +| Name | Type | Description | +| ---- | ---- | ----------- | +| id | string | The id of the task filter | +| name | string | The name of the task filter, lowercase is checked | +| key | string | The key of the task filter | +| index | string | The zero-based position of the filter in the array. | + +### How to create an accordion menu with the task filter cloud + +The task filter cloud often works well as an item in an accordion menu. See the +[Material Accordion component]((https://material.angular.io/components/expansion/overview#accordion)) diff --git a/lib/process-services-cloud/src/lib/i18n/en.json b/lib/process-services-cloud/src/lib/i18n/en.json index 1c9901cb40..89212ea91e 100644 --- a/lib/process-services-cloud/src/lib/i18n/en.json +++ b/lib/process-services-cloud/src/lib/i18n/en.json @@ -1,10 +1,13 @@ { - "TEST_KEY": "MY TEST", - "ADF-PROCESS-LIST-CLOUD": { + "ADF_CLOUD_PROCESS_LIST": { "MESSAGES": { "TITLE": "No Processes Found", "SUBTITLE":"Create a new process that you want to easily find later", "NONE": "No process instance filter selected." } + }, + "ADF_CLOUD_TASK_FILTERS": { + "MY_TASKS": "My Tasks", + "COMPLETED_TASKS": "Completed Tasks" } } diff --git a/lib/process-services-cloud/src/lib/i18n/it.json b/lib/process-services-cloud/src/lib/i18n/it.json new file mode 100644 index 0000000000..6d56150df4 --- /dev/null +++ b/lib/process-services-cloud/src/lib/i18n/it.json @@ -0,0 +1,13 @@ +{ + "ADF_CLOUD_TASK_PROCESS_LIST": { + "MESSAGES": { + "TITLE": "Nessun processo trovato", + "SUBTITLE":"Crea un nuovo processo", + "NONE": "Nessun filtro per processo selezionato." + } + }, + "ADF_CLOUD_TASK_FILTERS": { + "MY_TASKS": "Miei compiti", + "COMPLETED_TASKS": "Compiti completati" + } +} diff --git a/lib/process-services-cloud/src/lib/process-list-cloud/components/process-list-cloud.component.html b/lib/process-services-cloud/src/lib/process-list-cloud/components/process-list-cloud.component.html index 79522b8d1c..e2e8f3ca93 100644 --- a/lib/process-services-cloud/src/lib/process-list-cloud/components/process-list-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process-list-cloud/components/process-list-cloud.component.html @@ -19,8 +19,8 @@ + [title]="'ADF_CLOUD_TASK_PROCESS_LIST.MESSAGES.TITLE' | translate" + [subtitle]="'ADF_CLOUD_TASK_PROCESS_LIST.MESSAGES.SUBTITLE'| translate"> diff --git a/lib/process-services-cloud/src/lib/task-cloud/models/filter-cloud.model.ts b/lib/process-services-cloud/src/lib/task-cloud/models/filter-cloud.model.ts index 76a46323c1..f4123dfcc3 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/models/filter-cloud.model.ts +++ b/lib/process-services-cloud/src/lib/task-cloud/models/filter-cloud.model.ts @@ -33,15 +33,19 @@ export class QueryModel { } } } -export class FilterRepresentationModel { +export class TaskFilterCloudRepresentationModel { + id: string; name: string; + key: string; icon: string; query: QueryModel; constructor(obj?: any) { if (obj) { - this.name = obj.name || null; - this.icon = obj.icon || null; + this.id = obj.id; + this.name = obj.name; + this.key = obj.key; + this.icon = obj.icon; this.query = new QueryModel(obj.query); } } @@ -50,3 +54,18 @@ export class FilterRepresentationModel { return !!this.query; } } +export class FilterParamsModel { + id?: string; + name?: string; + key?: string; + index?: number; + + constructor(obj?: any) { + if (obj) { + this.id = obj.id || null; + this.name = obj.name || null; + this.key = obj.key || null; + this.index = obj.index; + } + } +} diff --git a/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts b/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts index dabbff6a48..cbab590374 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts +++ b/lib/process-services-cloud/src/lib/task-cloud/services/task-filter-cloud.service.ts @@ -15,16 +15,15 @@ * limitations under the License. */ -import { LogService, StorageService } from '@alfresco/adf-core'; +import { StorageService, JwtHelperService } from '@alfresco/adf-core'; import { Injectable } from '@angular/core'; -import { Observable, forkJoin } from 'rxjs'; -import { FilterRepresentationModel, QueryModel } from '../models/filter-cloud.model'; +import { Observable } from 'rxjs'; +import { TaskFilterCloudRepresentationModel, QueryModel } from '../models/filter-cloud.model'; @Injectable() export class TaskFilterCloudService { - constructor(private logService: LogService, - private storage: StorageService) { + constructor(private storage: StorageService, private jwtService: JwtHelperService) { } /** @@ -32,34 +31,14 @@ export class TaskFilterCloudService { * @param appName Name of the target app * @returns Observable of default filters just created */ - public createDefaultFilters(appName: string): Observable { - let involvedTasksFilter = this.getInvolvedTasksFilterInstance(appName); - let involvedObservable = this.addFilter(involvedTasksFilter); - + public createDefaultFilters(appName: string): Observable { let myTasksFilter = this.getMyTasksFilterInstance(appName); - let myTaskObservable = this.addFilter(myTasksFilter); - - let queuedTasksFilter = this.getQueuedTasksFilterInstance(appName); - let queuedObservable = this.addFilter(queuedTasksFilter); + this.addFilter(myTasksFilter); let completedTasksFilter = this.getCompletedTasksFilterInstance(appName); - let completeObservable = this.addFilter(completedTasksFilter); + this.addFilter(completedTasksFilter); - return new Observable((observer) => { - forkJoin( - involvedObservable, - myTaskObservable, - queuedObservable, - completeObservable - ).subscribe( - (filters) => { - observer.next(filters); - observer.complete(); - }, - (err: any) => { - this.logService.error(err); - }); - }); + return this.getTaskListFilters(appName); } /** @@ -67,8 +46,9 @@ export class TaskFilterCloudService { * @param appName Name of the target app * @returns Observable of task filter details */ - getTaskListFilters(appName?: string): Observable { - let key = 'task-filters-' + appName; + getTaskListFilters(appName?: string): Observable { + const username = this.getUsername(); + let key = `task-filters-${appName}-${username}`; const filters = JSON.parse(this.storage.getItem(key) || '[]'); return new Observable(function(observer) { observer.next(filters); @@ -81,8 +61,9 @@ export class TaskFilterCloudService { * @param filter The new filter to add * @returns Details of task filter just added */ - addFilter(filter: FilterRepresentationModel): Observable { - const key = 'task-filters-' + filter.query.appName || '0'; + addFilter(filter: TaskFilterCloudRepresentationModel): Observable { + const username = this.getUsername(); + const key = `task-filters-${filter.query.appName}-${username}`; let filters = JSON.parse(this.storage.getItem(key) || '[]'); filters.push(filter); @@ -95,25 +76,18 @@ export class TaskFilterCloudService { }); } - /** - * Creates and returns a filter for "Involved" task instances. - * @param appName Name of the target app - * @returns The newly created filter - */ - getInvolvedTasksFilterInstance(appName: string): FilterRepresentationModel { - return new FilterRepresentationModel({ - name: 'Cancelled Tasks', - icon: 'view_headline', - query: new QueryModel( - { - appName: appName, - sort: 'id', - state: 'CANCELLED', - assignment: 'involved', - order: 'DESC' - } - ) - }); + getUsername(): string { + return this.getValueFromToken('preferred_username'); + } + + getValueFromToken(key: string): T { + let value; + const token = localStorage.getItem('access_token'); + if (token) { + const tokenPayload = this.jwtService.decodeToken(token); + value = tokenPayload[key]; + } + return value; } /** @@ -121,58 +95,42 @@ export class TaskFilterCloudService { * @param appName Name of the target app * @returns The newly created filter */ - getMyTasksFilterInstance(appName: string): FilterRepresentationModel { - return new FilterRepresentationModel({ - name: 'My Tasks', + getMyTasksFilterInstance(appName: string): TaskFilterCloudRepresentationModel { + const username = this.getUsername(); + return new TaskFilterCloudRepresentationModel({ + id: Math.random().toString(36).substr(2, 9), + name: 'ADF_CLOUD_TASK_FILTERS.MY_TASKS', + key: 'my-tasks', icon: 'inbox', query: new QueryModel( { appName: appName, + state: 'ASSIGNED', + assignment: username, sort: 'id', - state: 'CREATED', - assignment: 'assignee', order: 'ASC' } ) }); } - /** - * Creates and returns a filter for "Queued Tasks" task instances. - * @param appName Name of the target app - * @returns The newly created filter - */ - getQueuedTasksFilterInstance(appName: string): FilterRepresentationModel { - return new FilterRepresentationModel({ - name: 'Suspended Tasks', - icon: 'adjust', - query: new QueryModel( - { - appName: appName, - sort: 'createdDate', - state: 'SUSPENDED', - assignment: 'candidate', - order: 'DESC' - } - ) - }); - } - /** * Creates and returns a filter for "Completed" task instances. * @param appName Name of the target app * @returns The newly created filter */ - getCompletedTasksFilterInstance(appName: string): FilterRepresentationModel { - return new FilterRepresentationModel({ - name: 'Completed Tasks', + getCompletedTasksFilterInstance(appName: string): TaskFilterCloudRepresentationModel { + return new TaskFilterCloudRepresentationModel({ + id: Math.random().toString(36).substr(2, 9), + name: 'ADF_CLOUD_TASK_FILTERS.COMPLETED_TASKS', + key: 'completed-tasks', icon: 'done', query: new QueryModel( { appName: appName, - sort: 'createdDate', state: 'COMPLETED', - assignment: 'involved', + assignment: '', + sort: 'id', order: 'ASC' } ) diff --git a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.html b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.html index 37e3f1aa22..9034c8d505 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.html +++ b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.html @@ -1,10 +1,10 @@
- - + {{filter.icon}} - {{filter.name}} + {{filter.name | translate}} diff --git a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts index 4acddc3426..0d5018ad9d 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.spec.ts @@ -19,7 +19,7 @@ import { SimpleChange } from '@angular/core'; import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { setupTestBed } from '@alfresco/adf-core'; import { from, Observable } from 'rxjs'; -import { FilterRepresentationModel } from '../models/filter-cloud.model'; +import { TaskFilterCloudRepresentationModel, FilterParamsModel } from '../models/filter-cloud.model'; import { TaskFilterCloudService } from '../services/task-filter-cloud.service'; import { TaskFiltersCloudComponent } from './task-filters-cloud.component'; import { By } from '@angular/platform-browser'; @@ -31,19 +31,19 @@ describe('TaskFiltersCloudComponent', () => { let taskFilterService: TaskFilterCloudService; let fakeGlobalFilter = [ - new FilterRepresentationModel({ + new TaskFilterCloudRepresentationModel({ name: 'FakeInvolvedTasks', icon: 'adjust', id: 10, filter: {state: 'open', assignment: 'fake-involved'} }), - new FilterRepresentationModel({ + new TaskFilterCloudRepresentationModel({ name: 'FakeMyTasks1', icon: 'done', id: 11, filter: {state: 'open', assignment: 'fake-assignee'} }), - new FilterRepresentationModel({ + new TaskFilterCloudRepresentationModel({ name: 'FakeMyTasks2', icon: 'inbox', id: 12, @@ -218,7 +218,7 @@ describe('TaskFiltersCloudComponent', () => { it('should select the task filter based on the input by name param', async(() => { spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable); - component.filterParam = new FilterRepresentationModel({ name: 'FakeMyTasks1' }); + component.filterParam = new FilterParamsModel({ name: 'FakeMyTasks1' }); const appName = 'my-app-1'; let change = new SimpleChange(null, appName, true); @@ -236,7 +236,7 @@ describe('TaskFiltersCloudComponent', () => { it('should select the default task filter if filter input does not exist', async(() => { spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable); - component.filterParam = new FilterRepresentationModel({ name: 'UnexistableFilter' }); + component.filterParam = new FilterParamsModel({ name: 'UnexistableFilter' }); const appName = 'my-app-1'; let change = new SimpleChange(null, appName, true); @@ -255,7 +255,7 @@ describe('TaskFiltersCloudComponent', () => { it('should select the task filter based on the input by index param', async(() => { spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable); - component.filterParam = new FilterRepresentationModel({ index: 2 }); + component.filterParam = new FilterParamsModel({ index: 2 }); const appName = 'my-app-1'; let change = new SimpleChange(null, appName, true); @@ -274,7 +274,7 @@ describe('TaskFiltersCloudComponent', () => { it('should select the task filter based on the input by id param', async(() => { spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable); - component.filterParam = new FilterRepresentationModel({ id: 12 }); + component.filterParam = new FilterParamsModel({ id: 12 }); const appName = 'my-app-1'; let change = new SimpleChange(null, appName, true); @@ -293,7 +293,7 @@ describe('TaskFiltersCloudComponent', () => { it('should emit an event when a filter is selected', async(() => { spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(fakeGlobalFilterObservable); - component.filterParam = new FilterRepresentationModel({ id: 12 }); + component.filterParam = new FilterParamsModel({ id: 12 }); const appName = 'my-app-1'; let change = new SimpleChange(null, appName, true); @@ -303,7 +303,7 @@ describe('TaskFiltersCloudComponent', () => { spyOn(component, 'selectFilterAndEmit').and.stub(); let filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="FakeMyTasks1_filter"]'); filterButton.click(); - expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalFilter[1]); + expect(component.selectFilterAndEmit).toHaveBeenCalledWith({id: fakeGlobalFilter[1].id}); })); it('should reload filters by appName on binding changes', () => { @@ -349,11 +349,11 @@ describe('TaskFiltersCloudComponent', () => { }); it('should return the current filter after one is selected', () => { - let filter = fakeGlobalFilter[1]; + let filter = new FilterParamsModel({ name: 'FakeInvolvedTasks' }); component.filters = fakeGlobalFilter; expect(component.currentFilter).toBeUndefined(); component.selectFilter(filter); - expect(component.getCurrentFilter()).toBe(filter); + expect(component.getCurrentFilter()).toBe(fakeGlobalFilter[1]); }); }); diff --git a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts index 979727a431..762c7ab05d 100644 --- a/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/task-cloud/task-filters-cloud/task-filters-cloud.component.ts @@ -18,7 +18,8 @@ import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { Observable } from 'rxjs'; import { TaskFilterCloudService } from '../services/task-filter-cloud.service'; -import { FilterRepresentationModel } from '../models/filter-cloud.model'; +import { TaskFilterCloudRepresentationModel, FilterParamsModel } from '../models/filter-cloud.model'; +import { TranslationService } from '@alfresco/adf-core'; @Component({ selector: 'adf-cloud-task-filters', templateUrl: './task-filters-cloud.component.html', @@ -30,13 +31,13 @@ export class TaskFiltersCloudComponent implements OnChanges { appName: string; @Input() - filterParam: FilterRepresentationModel; + filterParam: FilterParamsModel; @Input() showIcons: boolean = false; @Output() - filterClick: EventEmitter = new EventEmitter(); + filterClick: EventEmitter = new EventEmitter(); @Output() success: EventEmitter = new EventEmitter(); @@ -44,19 +45,19 @@ export class TaskFiltersCloudComponent implements OnChanges { @Output() error: EventEmitter = new EventEmitter(); - filters$: Observable; + filters$: Observable; - currentFilter: FilterRepresentationModel; + currentFilter: TaskFilterCloudRepresentationModel; - filters: FilterRepresentationModel [] = []; + filters: TaskFilterCloudRepresentationModel [] = []; - constructor(private taskFilterCloudService: TaskFilterCloudService) { + constructor(private taskFilterCloudService: TaskFilterCloudService, private translationService: TranslationService) { } ngOnChanges(changes: SimpleChanges) { const appName = changes['appName']; const filter = changes['filterParam']; - if (appName && appName.currentValue) { + if (appName && appName.currentValue !== appName.previousValue) { this.getFilters(appName.currentValue); } else if (filter && filter.currentValue !== filter.previousValue) { this.selectFilter(filter.currentValue); @@ -70,7 +71,7 @@ export class TaskFiltersCloudComponent implements OnChanges { this.filters$ = this.taskFilterCloudService.getTaskListFilters(appName); this.filters$.subscribe( - (res: FilterRepresentationModel[]) => { + (res: TaskFilterCloudRepresentationModel[]) => { if (res.length === 0) { this.createFilters(appName); } else { @@ -93,7 +94,7 @@ export class TaskFiltersCloudComponent implements OnChanges { this.filters$ = this.taskFilterCloudService.createDefaultFilters(appName); this.filters$.subscribe( - (resDefault: FilterRepresentationModel[]) => { + (resDefault: TaskFilterCloudRepresentationModel[]) => { this.resetFilter(); this.filters = resDefault; }, @@ -103,14 +104,14 @@ export class TaskFiltersCloudComponent implements OnChanges { ); } - /** - * Pass the selected filter as next - */ - public selectFilter(newFilter: FilterRepresentationModel) { + public selectFilter(newFilter: FilterParamsModel) { if (newFilter) { - this.currentFilter = this.filters.find((filter) => + this.currentFilter = this.filters.find( (filter: TaskFilterCloudRepresentationModel, index) => + newFilter.index === index || + newFilter.key === filter.key || + newFilter.id === filter.id || (newFilter.name && - (newFilter.name.toLocaleLowerCase() === filter.name.toLocaleLowerCase()) + (newFilter.name.toLocaleLowerCase() === this.translationService.instant(filter.name).toLocaleLowerCase()) )); } if (!this.currentFilter) { @@ -118,7 +119,7 @@ export class TaskFiltersCloudComponent implements OnChanges { } } - public selectFilterAndEmit(newFilter: FilterRepresentationModel) { + public selectFilterAndEmit(newFilter: FilterParamsModel) { this.selectFilter(newFilter); this.filterClick.emit(this.currentFilter); } @@ -135,7 +136,7 @@ export class TaskFiltersCloudComponent implements OnChanges { /** * Return the current task */ - getCurrentFilter(): FilterRepresentationModel { + getCurrentFilter(): TaskFilterCloudRepresentationModel { return this.currentFilter; } diff --git a/package.json b/package.json index 2d614f445a..67efdafe63 100644 --- a/package.json +++ b/package.json @@ -80,11 +80,11 @@ "@mat-datetimepicker/core": "2.0.1-beta.1", "@mat-datetimepicker/moment": "2.0.1-beta.1", "@ngx-translate/core": "10.0.2", + "@nrwl/nx": "6.3.1", + "@nrwl/schematics": "6.3.1", "adf-tslint-rules": "0.0.4", "alfresco-js-api": "2.7.0-beta5", "alfresco-js-api-node": "2.7.0-beta5", - "@nrwl/schematics": "6.3.1", - "@nrwl/nx": "6.3.1", "chart.js": "2.5.0", "classlist.js": "1.1.20150312", "core-js": "^2.5.4",