[ADF-3103] Added new inputs, columns and overall improvement to Task List Demo (#3653)

* Added columns, inputs and error message alert

* [ADF-3103] Fixed variable name typo

* Add basic documentation

demo-shell/resources/i18n/en.json

@@ -218,8 +218,14 @@
     "INHERITED_PERMISSIONS_BUTTON": "Permission Inherited"
   },
   "TASK_LIST_DEMO": {
-    "APP_ID_REQUIRED_ERROR": "Insert App Id",
+    "ERROR_MESSAGE": {
-    "APP_ID_TYPE_ERROR": "App Id must be a number"
+      "APP_ID_REQUIRED_ERROR": "Insert App Id",
+      "APP_ID_TYPE_ERROR": "App Id must be a number",
+      "NUMBER_TYPE_ERROR": "Value must be a number"
+    },
+    "TOOLTIP_MESSAGE": {
+      "START_INPUT": "Starting page"
+    }
   },
   "PROCESS_LIST_DEMO": {
     "APP_ID_REQUIRED_ERROR": "Insert App Id",

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -140,7 +140,7 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     blobFile: any;
     flag = true;
 
-    presetColoum = 'default';
+    presetColumn = 'default';
 
     showTaskTab: boolean;
     showProcessTab: boolean;

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

@@ -8,10 +8,10 @@
                 class="form-control" 
                 [formControl]="taskAppId">
                 <mat-error *ngIf="taskAppId.hasError('required')">
-                    {{ 'TASK_LIST_DEMO.APP_ID_REQUIRED_ERROR' | translate }}
+                    {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
                 </mat-error>
                 <mat-error *ngIf="taskAppId.hasError('pattern')">
-                    {{ 'TASK_LIST_DEMO.APP_ID_TYPE_ERROR' | translate }}
+                    {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
                 </mat-error>
         </mat-form-field>
         
@@ -23,13 +23,51 @@
             [formControl]="taskName">
         </mat-form-field>
 
+        <mat-form-field>
+            <mat-label>Task Id</mat-label>
+            <input 
+            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">
+            <mat-error *ngIf="taskStart.hasError('pattern')">
+                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
+            </mat-error>
+        </mat-form-field>
+
         <mat-form-field>
             <mat-label>ProcessDefinitionId</mat-label>
             <input 
             matInput 
             class="form-control" 
             [formControl]="taskProcessDefinitionId">
-            <mat-hint>SimpleProcess:1:2</mat-hint>
+            <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">
+            <mat-hint>E.g. 12345</mat-hint>
+        </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-form-field>
 
         <mat-form-field>
@@ -55,25 +93,38 @@
                 <mat-select 
                 class="form-control" 
                 [formControl]="taskSort">
-                    <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOptions.value">{{ sortOption.title }}</mat-option>
+                    <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
                 </mat-select>
         </mat-form-field>
-
-        <div class="adf-reset-button">
-            <button mat-raised-button (click)="resetTaskForm()">Reset</button>
-        </div>
     </form>
 </div>
+<div class="adf-reset-button">
+    <button mat-raised-button (click)="resetTaskForm()">Reset</button>
+</div>
 
 <div>
     <adf-tasklist
         [appId]="appId" 
+        [taskId]="id" 
         [name]="name" 
         [processDefinitionId]="processDefinitionId" 
+        [processInstanceId]="processInstanceId" 
         [assignment]="assignment" 
         [state]="state" 
         [sort]="sort"
+        [start]="start"
+        [includeProcessInstance]="includeProcessInstance"
+        (error)="onError($event)"
         #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>
     </adf-tasklist>
     
     <adf-pagination 

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

@@ -1,12 +1,18 @@
 .task-list-demo-inputs {
-    margin-top: 100px;
+    margin: 100px auto 0 auto;
-    margin-bottom: 50px;
+    width: 80%;
     display: flex;
+    flex: wrap;
     justify-content: space-evenly;
+
+    & mat-form-field {
+        margin: 20px 0;
+        width: calc(100% * (1/4) - 10px);
+    }
 }
 
 .adf-reset-button {
-    margin-top: 50px;
+    margin-bottom: 50px;
     display: flex;
     justify-content: center;
 }

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

@@ -18,7 +18,7 @@
 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';
 
 @Component({
     templateUrl: './task-list-demo.component.html',
@@ -35,8 +35,12 @@ export class TaskListDemoComponent implements OnInit {
 
     appId: number;
 
+    id: string;
+
     processDefinitionId: string;
 
+    processInstanceId: string;
+
     state: string;
 
     assignment: string;
@@ -45,11 +49,20 @@ export class TaskListDemoComponent implements OnInit {
 
     sort: string;
 
+    start: number;
+
+    includeProcessInstance: boolean;
+
     assignmentOptions = [
         {value: 'assignee', title: 'Assignee'},
         {value: 'candidate', title: 'Candidate'}
     ];
 
+    includeProcessInstanceOptions = [
+        {value: 'include', title: 'Include'},
+        {value: 'exclude', title: 'Exclude'}
+    ];
+
     stateOptions = [
         {value: 'all', title: 'All'},
         {value: 'active', title: 'Active'},
@@ -64,7 +77,8 @@ export class TaskListDemoComponent implements OnInit {
     ];
 
     constructor(private route: ActivatedRoute,
-                private formBuilder: FormBuilder) {
+                private formBuilder: FormBuilder,
+                private notificationService: NotificationService) {
     }
 
     ngOnInit() {
@@ -78,20 +92,24 @@ export class TaskListDemoComponent implements OnInit {
             });
         }
 
+        this.appId = this.defaultAppId;
         this.errorMessage = 'Insert App Id';
 
         this.buildForm();
-
     }
 
     buildForm() {
         this.taskListForm = this.formBuilder.group({
             taskAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
             taskName: new FormControl(''),
+            taskId: new FormControl(''),
             taskProcessDefinitionId: new FormControl(''),
+            taskProcessInstanceId: new FormControl(''),
             taskAssignment: new FormControl(''),
             taskState: new FormControl(''),
-            taskSort: new FormControl('')
+            taskSort: new FormControl(''),
+            taskStart: new FormControl('', [Validators.pattern('^[0-9]*$')]),
+            taskIncludeProcessInstance: new FormControl('')
         });
 
         this.taskListForm.valueChanges
@@ -101,16 +119,27 @@ export class TaskListDemoComponent implements OnInit {
                     this.filterTasks(taskFilter);
                 }
         });
-
     }
 
     filterTasks(taskFilter: any) {
         this.appId = taskFilter.taskAppId;
+        this.id = taskFilter.taskId;
         this.processDefinitionId = taskFilter.taskProcessDefinitionId;
+        this.processInstanceId = taskFilter.taskProcessInstanceId;
         this.name = taskFilter.taskName;
         this.assignment = taskFilter.taskAssignment;
         this.state = taskFilter.taskState;
         this.sort = taskFilter.taskSort;
+        this.start = taskFilter.taskStart;
+
+        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() {
@@ -125,10 +154,18 @@ export class TaskListDemoComponent implements OnInit {
         return this.taskListForm.get('taskAppId');
     }
 
+    get taskId(): AbstractControl {
+        return this.taskListForm.get('taskId');
+    }
+
     get taskProcessDefinitionId(): AbstractControl {
         return this.taskListForm.get('taskProcessDefinitionId');
     }
 
+    get taskProcessInstanceId(): AbstractControl {
+        return this.taskListForm.get('taskProcessInstanceId');
+    }
+
     get taskName(): AbstractControl {
         return this.taskListForm.get('taskName');
     }
@@ -144,4 +181,12 @@ export class TaskListDemoComponent implements OnInit {
     get taskSort(): AbstractControl {
         return this.taskListForm.get('taskSort');
     }
+
+    get taskIncludeProcessInstance(): AbstractControl {
+        return this.taskListForm.get('taskIncludeProcessInstance');
+    }
+
+    get taskStart(): AbstractControl {
+        return this.taskListForm.get('taskStart');
+    }
 }

docs/process-services/task-list.component.md

@@ -51,10 +51,13 @@ Renders a list containing all the tasks matched by the parameters specified.
 | multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
 | name | `string` |  | Name of the tasklist. |
 | page | `number` | 0 | The page number of the tasks to fetch. |
+| start | `number` | 0 | Another approach to specify which page you want load.  |
 | processDefinitionKey | `string` |  | (**Deprecated:** 2.4.0) The Definition Key of the process. |
 | processDefinitionId | `string` |  | The Definition Id of the process. |
 | processInstanceId | `string` |  | The Instance Id of the process. |
+| taskId | `string` |  | The taskId you want to be fetched. |
 | selectFirstRow | `boolean` | true | Toggles default selection of the first row |
+| includeProcessInstance | `boolean` | false | Include the process instance info |
 | selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
 | size | `number` |  [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of tasks to fetch. Default value: 25. |
 | sort | `string` |  | Define the sort order of the tasks. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |

lib/process-services/task-list/components/task-list.component.ts

@@ -111,6 +111,18 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
     @Input()
     selectFirstRow: boolean = true;
 
+    /** The id of a task */
+    @Input()
+    taskId: string;
+
+    /** Toggles inclusion of Process Instances */
+    @Input()
+    includeProcessInstance: boolean;
+
+    /** Starting point of the */
+    @Input()
+    start: number = 0;
+
     /** Emitted when a task in the list is clicked */
     @Output()
     rowClick: EventEmitter<string> = new EventEmitter<string>();
@@ -321,7 +333,7 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
 
     /**
      * Optimize name field
-     * @param istances
+     * @param instances
      */
     private optimizeNames(instances: any[]): any[] {
         instances = instances.map(t => {
@@ -344,10 +356,11 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
             assignment: this.assignment,
             state: this.state,
             sort: this.sort,
-            landingTaskId: this.landingTaskId,
             page: this.page,
             size: this.size,
-            start: 0
+            start: this.start,
+            taskId: this.taskId,
+            includeProcessInstance: this.includeProcessInstance
         };
         return new TaskQueryRequestRepresentationModel(requestNode);
     }

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

@@ -118,6 +118,8 @@ export class TaskQueryRequestRepresentationModel implements TaskQueryRequestRepr
     sort: string;
     page: number;
     size: number;
+    taskId: string;
+    includeProcessInstance: boolean;
 
     constructor(obj?: any) {
         if (obj) {
@@ -131,6 +133,8 @@ export class TaskQueryRequestRepresentationModel implements TaskQueryRequestRepr
             this.sort = obj.sort || null;
             this.page = obj.page || 0;
             this.size = obj.size || 25;
+            this.taskId = obj.taskId || null;
+            this.includeProcessInstance = obj.includeProcessInstance;
         }
     }
 }