[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
2025-07-24 17:32:15 +00:00 · 2018-08-14 09:27:59 +02:00
parent dd4c0e37f2
commit d47a5bfbbf
4 changed files with 71 additions and 34 deletions
--- 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
@@ -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>
--- 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
@@ -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 notificationService: NotificationService) {
+                private formBuilder: FormBuilder) {
    }

    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');
+    }
 }
--- a/lib/process-services/task-list/models/task-list.model.ts
+++ b/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() {
+    }
 }
--- a/lib/process-services/task-list/services/tasklist.service.ts
+++ b/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.findAllTaskByState(requestNode, 'completed'),
-                (activeTasks: TaskListModel, completedTasks: TaskListModel) => {
-                    const tasks = Object.assign({}, activeTasks);
-                    tasks.total += completedTasks.total;
-                    tasks.data = tasks.data.concat(completedTasks.data);
-                    return tasks;
-                }
-            );
+            this.findTasksByState(requestNode, 'open'),
+            this.findAllTaskByState(requestNode, 'completed'),
+            (activeTasks: TaskListModel, completedTasks: TaskListModel) => {
+                const tasks = Object.assign({}, activeTasks);
+                tasks.total += completedTasks.total;
+                tasks.data = tasks.data.concat(completedTasks.data);
+                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) => {