From 73a5eddebda4bc39b707873f46708bf8a6a4f6c9 Mon Sep 17 00:00:00 2001 From: bbcodrin Date: Fri, 14 Sep 2018 18:55:57 +0300 Subject: [PATCH] [ADF-3438] Task List Demo - created date filter and pagination (#3782) * date filter and pagination * remove wrong mat-form-field --- .../task-list-demo.component.html | 143 ++++++++++-------- .../task-list-demo.component.scss | 11 +- .../task-list-demo.component.ts | 18 +++ docs/process-services/task-list.component.md | 2 + .../pagination/pagination.component.spec.ts | 12 +- .../components/task-list.component.spec.ts | 22 +++ .../components/task-list.component.ts | 13 +- .../task-list/models/filter.model.ts | 4 + 8 files changed, 153 insertions(+), 72 deletions(-) diff --git a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html index f8e9153fa9..a1c16a6d7f 100644 --- a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html +++ b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.html @@ -1,40 +1,40 @@
-
+ App Id - - - {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }} - + + {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }} + - + Task Name - + Task Id - + Start - + {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }} @@ -42,72 +42,95 @@ ProcessDefinitionId - + E.g. SimpleProcess:1:2 ProcessInstanceId - + E.g. 12345 Items per page + matInput + class="form-control" + [formControl]="taskSize"> Page - + - Process Instance - Due After + + + + + + Due Before + + + + + + + Process Instance + - {{ includeProcessInstanceOption.title }} - + {{ includeProcessInstanceOption.title }} + + - Assignment - Assignment + - {{ assignmentOption.title }} - + {{ + assignmentOption.title }} + + - State - State + - {{ stateOption.title }} - + {{ + stateOption.title }} + + - Sort - Sort + - {{ sortOption.title }} - + {{ sortOption.title + }} + +
@@ -128,19 +151,21 @@ [start]="start" [page]="page" [size]="size" + [dueAfter]="dueAfter" + [dueBefore]="dueBefore" [includeProcessInstance]="includeProcessInstance" #taskList> - - - - - - - - + + + + + + + + - + diff --git a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss index c20060c198..533e99b33d 100644 --- a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss +++ b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss @@ -1,12 +1,9 @@ .task-list-demo-inputs { - margin: 100px auto 0 auto; - width: 80%; - display: flex; - flex: wrap; - justify-content: space-evenly; + margin: 20px auto 0; + max-width: 1200px; & mat-form-field { - margin: 20px 0; + margin: 20px 5px; width: calc(100% * (1/4) - 10px); } } @@ -20,4 +17,4 @@ .task-list-demo-error-message { color: red; text-align: center; -} \ No newline at end of file +} diff --git a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts index 70d47b871b..ace7a210e7 100644 --- a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts +++ b/demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts @@ -55,6 +55,10 @@ export class TaskListDemoComponent implements OnInit { page: number; + dueAfter: string; + + dueBefore: string; + includeProcessInstance: boolean; assignmentOptions = [ @@ -111,6 +115,8 @@ export class TaskListDemoComponent implements OnInit { taskSort: new FormControl(''), taskSize: new FormControl(''), taskPage: new FormControl(''), + taskDueAfter: new FormControl(''), + taskDueBefore: new FormControl(''), taskStart: new FormControl('', [Validators.pattern('^[0-9]*$')]), taskIncludeProcessInstance: new FormControl('') }); @@ -138,6 +144,8 @@ export class TaskListDemoComponent implements OnInit { this.start = taskFilter.taskStart; this.size = taskFilter.taskSize; this.page = taskFilter.taskPage; + this.dueAfter = taskFilter.taskDueAfter; + this.dueBefore = taskFilter.taskDueBefore; this.includeProcessInstance = taskFilter.taskIncludeProcessInstance === 'include'; } @@ -159,6 +167,8 @@ export class TaskListDemoComponent implements OnInit { this.start = null; this.size = null; this.page = null; + this.dueAfter = null; + this.dueBefore = null; } isFormValid() { @@ -212,4 +222,12 @@ export class TaskListDemoComponent implements OnInit { get taskPage(): AbstractControl { return this.taskListForm.get('taskPage'); } + + get taskDueAfter(): AbstractControl { + return this.taskListForm.get('taskDueAfter'); + } + + get taskDueBefore(): AbstractControl { + return this.taskListForm.get('taskDueBefore'); + } } diff --git a/docs/process-services/task-list.component.md b/docs/process-services/task-list.component.md index 86255ba55e..01f3ef236d 100644 --- a/docs/process-services/task-list.component.md +++ b/docs/process-services/task-list.component.md @@ -55,6 +55,8 @@ when the task list is empty: | appId | `number` | | The id of the app. | | assignment | `string` | | The assignment of the process. Possible values are: "assignee" (the current user is the assignee), candidate (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value(the current user is involved). | | data | `DataTableAdapter` | | (**Deprecated:** 2.4.0) Data source object that represents the number and the type of the columns that you want to show. | +| dueAfter | `string` | | Filter the tasks. Display only tasks with created_date before dueAfter.. | +| dueBefore | `string` | | Filter the tasks. Display only tasks with created_date before dueBefore. | | includeProcessInstance | `boolean` | | Toggles inclusion of Process Instances | | landingTaskId | `string` | | Define which task id should be selected after reloading. If the task id doesn't exist or nothing is passed then the first task will be selected. | | multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | diff --git a/lib/core/pagination/pagination.component.spec.ts b/lib/core/pagination/pagination.component.spec.ts index 1f74368133..04f5b6f9ec 100644 --- a/lib/core/pagination/pagination.component.spec.ts +++ b/lib/core/pagination/pagination.component.spec.ts @@ -265,7 +265,7 @@ describe('PaginationComponent', () => { component.ngOnInit(); customComponent.pagination.next(pagination); - expect(component.pagination).toBe(pagination); + expect(component.pagination).toEqual(pagination); }); it('should update pagination by subscription', () => { @@ -280,17 +280,18 @@ describe('PaginationComponent', () => { component.ngOnInit(); customComponent.pagination.next(pagination1); - expect(component.pagination).toBe(pagination1); + expect(component.pagination).toEqual(pagination1); customComponent.pagination.next(pagination2); - expect(component.pagination).toBe(pagination2); + expect(component.pagination).toEqual(pagination2); }); it('should send pagination event to paginated component', () => { const customComponent = { pagination: new BehaviorSubject({}), updatePagination() {}, - supportedPageSizes: [] + supportedPageSizes: [], + rows: [] }; spyOn(customComponent, 'updatePagination').and.stub(); @@ -308,7 +309,8 @@ describe('PaginationComponent', () => { it('should go to previous page if current page has 0 items', () => { const customComponent = { updatePagination() {}, - pagination: new BehaviorSubject({}) + pagination: new BehaviorSubject({}), + rows: [] }; component.target = customComponent; diff --git a/lib/process-services/task-list/components/task-list.component.spec.ts b/lib/process-services/task-list/components/task-list.component.spec.ts index e793b67f5e..2caefbf31d 100644 --- a/lib/process-services/task-list/components/task-list.component.spec.ts +++ b/lib/process-services/task-list/components/task-list.component.spec.ts @@ -223,6 +223,28 @@ describe('TaskListComponent', () => { }); }); + it('should return the filtered task list by created date', (done) => { + let state = new SimpleChange(null, 'open', true); + let afterDate = new SimpleChange(null, '28-02-2017', true); + component.success.subscribe((res) => { + expect(res).toBeDefined(); + expect(component.rows).toBeDefined(); + expect(component.isListEmpty()).not.toBeTruthy(); + expect(component.rows.length).toEqual(2); + expect(component.rows[0]['name']).toEqual('nameFake1'); + expect(component.rows[0]['processDefinitionId']).toEqual('myprocess:1:4'); + done(); + }); + component.ngAfterContentInit(); + component.ngOnChanges({ 'state': state, 'afterDate': afterDate }); + fixture.detectChanges(); + jasmine.Ajax.requests.mostRecent().respondWith({ + 'status': 200, + contentType: 'application/json', + responseText: JSON.stringify(fakeGlobalTask) + }); + }); + it('should return the filtered task list for all state', (done) => { let state = new SimpleChange(null, 'all', true); let processInstanceId = new SimpleChange(null, 'fakeprocessId', true); diff --git a/lib/process-services/task-list/components/task-list.component.ts b/lib/process-services/task-list/components/task-list.component.ts index bf0bcb3f03..ae9ba3a2c4 100644 --- a/lib/process-services/task-list/components/task-list.component.ts +++ b/lib/process-services/task-list/components/task-list.component.ts @@ -28,6 +28,7 @@ import { TaskQueryRequestRepresentationModel } from '../models/filter.model'; import { TaskListModel } from '../models/task-list.model'; import { taskPresetsDefaultModel } from '../models/task-preset.model'; import { TaskListService } from './../services/tasklist.service'; +import moment from 'moment-es6'; @Component({ selector: 'adf-tasklist', @@ -150,6 +151,14 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft @Input() size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems; + /** Filter the tasks. Display only tasks with created_date after dueAfter. */ + @Input() + dueAfter: string; + + /** Filter the tasks. Display only tasks with created_date before dueBefore. */ + @Input() + dueBefore: string; + rows: any[] = []; isLoading: boolean = true; sorting: any[] = ['created', 'desc']; @@ -297,7 +306,7 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft * @param taskId */ isEqualToCurrentId(taskId: string): boolean { - return this.currentInstanceId === taskId ? true : false; + return this.currentInstanceId === taskId; } /** @@ -348,6 +357,8 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft let requestNode = { appDefinitionId: this.appId, + dueAfter: this.dueAfter ? moment(this.dueAfter).toDate() : null, + dueBefore: this.dueBefore ? moment(this.dueBefore).toDate() : null, processInstanceId: this.processInstanceId, processDefinitionId: this.processDefinitionId, processDefinitionKey: this.processDefinitionKey, diff --git a/lib/process-services/task-list/models/filter.model.ts b/lib/process-services/task-list/models/filter.model.ts index 006ff9f59c..132cff8f11 100644 --- a/lib/process-services/task-list/models/filter.model.ts +++ b/lib/process-services/task-list/models/filter.model.ts @@ -109,6 +109,8 @@ export class FilterRepresentationModel implements UserTaskFilterRepresentation { export class TaskQueryRequestRepresentationModel implements TaskQueryRequestRepresentation { appDefinitionId: string; + dueAfter: string; + dueBefore: string; processInstanceId: string; processDefinitionId: string; text: string; @@ -124,6 +126,8 @@ export class TaskQueryRequestRepresentationModel implements TaskQueryRequestRepr constructor(obj?: any) { if (obj) { this.appDefinitionId = obj.appDefinitionId || null; + this.dueAfter = obj.dueAfter || null; + this.dueBefore = obj.dueBefore || null; this.processInstanceId = obj.processInstanceId || null; this.processDefinitionId = obj.processDefinitionId || null; this.text = obj.text || null;