[ADF-3432 ]Added size and page control to task list demo (#3674)

* [ADF-3432] Added size and page control to task listdemo

* [ADF-3432] Removed console log

* [ADF-3432] Errors catched on TaskList component when a bad query is made

* [ADF-3432] It reloads task list content when form is reset

* [ADF-3432] Fixed missing whitespace lint error

* remove unused dependency

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

@@ -7,9 +7,6 @@
                 matInput
                 class="form-control"
                 [formControl]="taskAppId">
-                <mat-error *ngIf="taskAppId.hasError('required')">
-                    {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
-                </mat-error>
                 <mat-error *ngIf="taskAppId.hasError('pattern')">
                     {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
                 </mat-error>
@@ -61,6 +58,22 @@
             <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">
+        </mat-form-field>
+
+        <mat-form-field>
+            <mat-label>Page</mat-label>
+            <input 
+            matInput 
+            class="form-control"
+            [formControl]="taskPage">
+        </mat-form-field>
+
         <mat-form-field>
                 <mat-label>Process Instance</mat-label>
                 <mat-select 
@@ -113,8 +126,9 @@
         [state]="state"
         [sort]="sort"
         [start]="start"
+        [page]="page"
+        [size]="size"
         [includeProcessInstance]="includeProcessInstance"
-        (error)="onError($event)"
         #taskList>
         <data-columns>
                 <data-column key="id" title="Id"></data-column>

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

@@ -18,7 +18,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
 import { ActivatedRoute, Params } from '@angular/router';
-import { NotificationService } from '@alfresco/adf-core';
 import { debounceTime } from 'rxjs/operators';
 
 @Component({
@@ -52,6 +51,10 @@ export class TaskListDemoComponent implements OnInit {
 
     start: number;
 
+    size: number;
+
+    page: number;
+
     includeProcessInstance: boolean;
 
     assignmentOptions = [
@@ -78,8 +81,7 @@ export class TaskListDemoComponent implements OnInit {
     ];
 
     constructor(private route: ActivatedRoute,
-                private formBuilder: FormBuilder,
+                private formBuilder: FormBuilder) {
-                private notificationService: NotificationService) {
     }
 
     ngOnInit() {
@@ -87,8 +89,6 @@ export class TaskListDemoComponent implements OnInit {
             this.route.params.forEach((params: Params) => {
                 if (params['id']) {
                     this.defaultAppId = +params['id'];
-                } else {
-                    this.defaultAppId = 0;
                 }
             });
         }
@@ -101,7 +101,7 @@ export class TaskListDemoComponent implements OnInit {
 
     buildForm() {
         this.taskListForm = this.formBuilder.group({
-            taskAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
+            taskAppId: new FormControl(this.defaultAppId, [Validators.pattern('^[0-9]*$')]),
             taskName: new FormControl(''),
             taskId: new FormControl(''),
             taskProcessDefinitionId: new FormControl(''),
@@ -109,6 +109,8 @@ export class TaskListDemoComponent implements OnInit {
             taskAssignment: new FormControl(''),
             taskState: new FormControl(''),
             taskSort: new FormControl(''),
+            taskSize: new FormControl(''),
+            taskPage: new FormControl(''),
             taskStart: new FormControl('', [Validators.pattern('^[0-9]*$')]),
             taskIncludeProcessInstance: new FormControl('')
         });
@@ -134,19 +136,29 @@ export class TaskListDemoComponent implements OnInit {
         this.state = taskFilter.taskState;
         this.sort = taskFilter.taskSort;
         this.start = taskFilter.taskStart;
+        this.size = taskFilter.taskSize;
+        this.page = taskFilter.taskPage;
 
         this.includeProcessInstance = taskFilter.taskIncludeProcessInstance === 'include';
     }
 
-    onError($event) {
-        const errorMessage = JSON.parse($event.message).message;
-        this.notificationService.openSnackMessageAction(errorMessage, 'Reset', 5000).onAction().subscribe(() => {
-           this.resetTaskForm();
-        });
-    }
-
     resetTaskForm() {
         this.taskListForm.reset();
+        this.resetQueryParameters();
+    }
+
+    resetQueryParameters() {
+        this.appId = null;
+        this.id = null;
+        this.processDefinitionId = null;
+        this.processInstanceId = null;
+        this.name = null;
+        this.assignment = null;
+        this.state = null;
+        this.sort = null;
+        this.start = null;
+        this.size = null;
+        this.page = null;
     }
 
     isFormValid() {
@@ -192,4 +204,12 @@ export class TaskListDemoComponent implements OnInit {
     get taskStart(): AbstractControl {
         return this.taskListForm.get('taskStart');
     }
+
+    get taskSize(): AbstractControl {
+        return this.taskListForm.get('taskSize');
+    }
+
+    get taskPage(): AbstractControl {
+        return this.taskListForm.get('taskPage');
+    }
 }

lib/process-services/task-list/models/task-list.model.ts

@@ -17,11 +17,13 @@
 
 import { TaskDetailsModel } from './task-details.model';
 
-export interface TaskListModel {
+export class TaskListModel {
     size: number;
     total: number;
     start: number;
     length: number;
-    data: TaskDetailsModel [];
+    data: TaskDetailsModel[] = [];
 
+    constructor() {
+    }
 }

lib/process-services/task-list/services/tasklist.service.ts

@@ -17,7 +17,7 @@
 
 import { AlfrescoApiService, LogService } from '@alfresco/adf-core';
 import { Injectable } from '@angular/core';
-import { Observable, from, forkJoin, throwError } from 'rxjs';
+import { Observable, from, forkJoin, throwError, of } from 'rxjs';
 import { map, catchError, switchMap, flatMap, filter } from 'rxjs/operators';
 import { FilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
 import { Form } from '../models/form.model';
@@ -66,7 +66,7 @@ export class TaskListService {
      * @param filter The filter you want to check
      * @returns The filter if it is related or null otherwise
      */
-     isTaskRelatedToFilter(taskId: string, filterModel: FilterRepresentationModel): Observable<FilterRepresentationModel> {
+    isTaskRelatedToFilter(taskId: string, filterModel: FilterRepresentationModel): Observable<FilterRepresentationModel> {
         let requestNodeForFilter = this.generateTaskRequestNodeFromFilter(filterModel);
         return from(this.callApiTasksFiltered(requestNodeForFilter))
             .pipe(
@@ -99,7 +99,8 @@ export class TaskListService {
         if (state) {
             requestNode.state = state;
         }
-        return this.getTasks(requestNode);
+        return this.getTasks(requestNode)
+            .pipe(catchError(() => of(new TaskListModel())));
     }
 
     /**
@@ -128,15 +129,15 @@ export class TaskListService {
      */
     findAllTasksWithoutState(requestNode: TaskQueryRequestRepresentationModel): Observable<TaskListModel> {
         return forkJoin(
-                this.findTasksByState(requestNode, 'open'),
+            this.findTasksByState(requestNode, 'open'),
-                this.findAllTaskByState(requestNode, 'completed'),
+            this.findAllTaskByState(requestNode, 'completed'),
-                (activeTasks: TaskListModel, completedTasks: TaskListModel) => {
+            (activeTasks: TaskListModel, completedTasks: TaskListModel) => {
-                    const tasks = Object.assign({}, activeTasks);
+                const tasks = Object.assign({}, activeTasks);
-                    tasks.total += completedTasks.total;
+                tasks.total += completedTasks.total;
-                    tasks.data = tasks.data.concat(completedTasks.data);
+                tasks.data = tasks.data.concat(completedTasks.data);
-                    return tasks;
+                return tasks;
-                }
+            }
-            );
+        );
     }
 
     /**
@@ -177,7 +178,7 @@ export class TaskListService {
      * Gets all available reusable forms.
      * @returns Array of form details
      */
-    getFormList(): Observable<Form []> {
+    getFormList(): Observable<Form[]> {
         let opts = {
             'filter': 'myReusableForms', // String | filter
             'sort': 'modifiedDesc', // String | sort
@@ -204,7 +205,7 @@ export class TaskListService {
      * @returns Null response notifying when the operation is complete
      */
     attachFormToATask(taskId: string, formId: number): Observable<any> {
-        return from(this.apiService.taskApi.attachForm(taskId, {'formId': formId}))
+        return from(this.apiService.taskApi.attachForm(taskId, { 'formId': formId }))
             .pipe(
                 catchError(err => this.handleError(err))
             );
@@ -299,7 +300,7 @@ export class TaskListService {
      * @returns Details of the assigned task
      */
     assignTask(taskId: string, requestNode: any): Observable<TaskDetailsModel> {
-        let assignee = {assignee: requestNode.id};
+        let assignee = { assignee: requestNode.id };
         return from(this.callApiAssignTask(taskId, assignee))
             .pipe(
                 map((response: TaskDetailsModel) => {