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

* date filter and pagination

* remove wrong mat-form-field

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;