inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3438] Task List Demo - created date filter and pagination (#3782)

Browse Source 
* date filter and pagination

* remove wrong mat-form-field
This commit is contained in:
bbcodrin
2018-09-14 18:55:57 +03:00
committed by Eugenio Romano
parent c445066516
commit 73a5eddebd
8 changed files with 153 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
demo-shell/src/app/components/task-list-demo/task-list-demo.component.html
View File

@@ -1,40 +1,40 @@
<div class="task-list-demo-inputs">
<form [formGroup]="taskListForm">
<form [formGroup]="taskListForm">
<mat-form-field>
<mat-label>App Id</mat-label>
<input
<input
matInput
class="form-control"
[formControl]="taskAppId">
<mat-error *ngIf="taskAppId.hasError('pattern')">
{{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
</mat-error>
<mat-error *ngIf="taskAppId.hasError('pattern')">
{{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Task Name</mat-label>
<input
matInput
class="form-control"
[formControl]="taskName">
matInput
class="form-control"
[formControl]="taskName">
</mat-form-field>
<mat-form-field>
<mat-label>Task Id</mat-label>
<input
matInput
class="form-control"
[formControl]="taskId">
matInput
class="form-control"
[formControl]="taskId">
</mat-form-field>
<mat-form-field>
<mat-label>Start</mat-label>
<input
matInput
class="form-control"
matTooltip="{{ 'TASK_LIST_DEMO.TOOLTIP_MESSAGE.START_INPUT' | translate }}"
[formControl]="taskStart">
matInput
class="form-control"
matTooltip="{{ 'TASK_LIST_DEMO.TOOLTIP_MESSAGE.START_INPUT' | translate }}"
[formControl]="taskStart">
<mat-error *ngIf="taskStart.hasError('pattern')">
{{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
</mat-error>
@@ -43,71 +43,94 @@
<mat-form-field>
<mat-label>ProcessDefinitionId</mat-label>
<input
matInput
class="form-control"
[formControl]="taskProcessDefinitionId">
matInput
class="form-control"
[formControl]="taskProcessDefinitionId">
<mat-hint>E.g. SimpleProcess:1:2</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-label>ProcessInstanceId</mat-label>
<input
matInput
class="form-control"
[formControl]="taskProcessInstanceId">
matInput
class="form-control"
[formControl]="taskProcessInstanceId">
<mat-hint>E.g. 12345</mat-hint>
</mat-form-field>
<mat-form-field>
<mat-label>Items per page</mat-label>
<input
matInput
class="form-control"
[formControl]="taskSize">
matInput
class="form-control"
[formControl]="taskSize">
</mat-form-field>
<mat-form-field>
<mat-label>Page</mat-label>
<input
matInput
class="form-control"
[formControl]="taskPage">
matInput
class="form-control"
[formControl]="taskPage">
</mat-form-field>
<mat-form-field>
<mat-label>Process Instance</mat-label>
<mat-select
<mat-label>Due After</mat-label>
<input matInput class="form-control" [matDatepicker]="pickerAfter" placeholder="Choose a date"
[formControl]="taskDueAfter">
<mat-datepicker-toggle matSuffix [for]="pickerAfter"></mat-datepicker-toggle>
<mat-datepicker #pickerAfter></mat-datepicker>
</mat-form-field>
<mat-form-field>
<mat-label>Due Before</mat-label>
<input matInput class="form-control" [matDatepicker]="pickerBefore" placeholder="Choose a date"
[formControl]="taskDueBefore">
<mat-datepicker-toggle matSuffix [for]="pickerBefore"></mat-datepicker-toggle>
<mat-datepicker #pickerBefore></mat-datepicker>
</mat-form-field>
<mat-form-field>
<mat-label>Process Instance</mat-label>
<mat-select
class="form-control"
[formControl]="taskIncludeProcessInstance">
<mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions" [value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}</mat-option>
</mat-select>
<mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions"
[value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Assignment</mat-label>
<mat-select
<mat-label>Assignment</mat-label>
<mat-select
class="form-control"
[formControl]="taskAssignment">
<mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{ assignmentOption.title }}</mat-option>
</mat-select>
<mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{
assignmentOption.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>State</mat-label>
<mat-select
<mat-label>State</mat-label>
<mat-select
class="form-control"
[formControl]="taskState">
<mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
</mat-select>
<mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{
stateOption.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Sort</mat-label>
<mat-select
<mat-label>Sort</mat-label>
<mat-select
class="form-control"
[formControl]="taskSort">
<mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
</mat-select>
<mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title
}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
@@ -128,17 +151,19 @@
[start]="start"
[page]="page"
[size]="size"
[dueAfter]="dueAfter"
[dueBefore]="dueBefore"
[includeProcessInstance]="includeProcessInstance"
#taskList>
<data-columns>
<data-column key="id" title="Id"></data-column>
<data-column key="name" title="Name"></data-column>
<data-column key="description" title="Description"></data-column>
<data-column key="created" title="Created"></data-column>
<data-column key="dueDate" title="Due Date"></data-column>
<data-column key="processInstanceId" title="Process Instance Id"></data-column>
<data-column key="processDefinitionId" title="Process Definition Id"></data-column>
</data-columns>
<data-column key="id" title="Id"></data-column>
<data-column key="name" title="Name"></data-column>
<data-column key="description" title="Description"></data-column>
<data-column key="created" title="Created"></data-column>
<data-column key="dueDate" title="Due Date"></data-column>
<data-column key="processInstanceId" title="Process Instance Id"></data-column>
<data-column key="processDefinitionId" title="Process Definition Id"></data-column>
</data-columns>
</adf-tasklist>
<adf-pagination

9
demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss
View File

@@ -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);
}
}

18
demo-shell/src/app/components/task-list-demo/task-list-demo.component.ts
View File

@@ -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');
}
}

2
docs/process-services/task-list.component.md
View File

@@ -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 |

12
lib/core/pagination/pagination.component.spec.ts
View File

@@ -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 = <PaginatedComponent> {
pagination: new BehaviorSubject<Pagination>({}),
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 = <PaginatedComponent> {
updatePagination() {},
pagination: new BehaviorSubject<Pagination>({})
pagination: new BehaviorSubject<Pagination>({}),
rows: []
};
component.target = customComponent;

22
lib/process-services/task-list/components/task-list.component.spec.ts
View File

@@ -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);

13
lib/process-services/task-list/components/task-list.component.ts
View File

@@ -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,

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

@@ -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;