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

* date filter and pagination

* remove wrong mat-form-field

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

@@ -74,12 +74,29 @@
                 [formControl]="taskPage">
         </mat-form-field>
 
+        <mat-form-field>
+            <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-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions"
+                            [value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}
+                </mat-option>
             </mat-select>
         </mat-form-field>
 
@@ -88,7 +105,9 @@
             <mat-select
                 class="form-control"
                 [formControl]="taskAssignment">
-                 <mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{ assignmentOption.title }}</mat-option>
+                <mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{
+                    assignmentOption.title }}
+                </mat-option>
             </mat-select>
         </mat-form-field>
 
@@ -97,7 +116,9 @@
             <mat-select
                 class="form-control"
                 [formControl]="taskState">
-                    <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
+                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{
+                    stateOption.title }}
+                </mat-option>
             </mat-select>
         </mat-form-field>
 
@@ -106,7 +127,9 @@
             <mat-select
                 class="form-control"
                 [formControl]="taskSort">
-                    <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
+                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title
+                    }}
+                </mat-option>
             </mat-select>
         </mat-form-field>
     </form>
@@ -128,6 +151,8 @@
         [start]="start"
         [page]="page"
         [size]="size"
+        [dueAfter]="dueAfter"
+        [dueBefore]="dueBefore"
         [includeProcessInstance]="includeProcessInstance"
         #taskList>
         <data-columns>

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;
+    margin: 20px auto 0;
-    width: 80%;
+    max-width: 1200px;
-    display: flex;
-    flex: wrap;
-    justify-content: space-evenly;
 
     & mat-form-field {
-        margin: 20px 0;
+        margin: 20px 5px;
         width: calc(100% * (1/4) - 10px);
     }
 }

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

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 |

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

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

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,

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;