[ADF-3103] Added new inputs & columns Task List Demo - Rebase (#3659)

* Added columns, inputs and error message alert

* Add basic documentation

* [ADF-3101] Trailing whitespaces removed

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

@@ -5,7 +5,7 @@
             <mat-label>App Id</mat-label>
                 <input 
                 matInput
-                class="form-control" 
+                class="form-control"
                 [formControl]="taskAppId">
                 <mat-error *ngIf="taskAppId.hasError('required')">
                     {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_REQUIRED_ERROR' | translate }}
@@ -18,8 +18,8 @@
         <mat-form-field>
             <mat-label>Task Name</mat-label>
             <input 
-            matInput 
+            matInput
-            class="form-control" 
+            class="form-control"
             [formControl]="taskName">
         </mat-form-field>
 
@@ -27,7 +27,7 @@
             <mat-label>Task Id</mat-label>
             <input 
             matInput 
-            class="form-control" 
+            class="form-control"
             [formControl]="taskId">
         </mat-form-field>
 
@@ -35,7 +35,7 @@
             <mat-label>Start</mat-label>
             <input 
             matInput 
-            class="form-control" 
+            class="form-control"
             matTooltip="{{ 'TASK_LIST_DEMO.TOOLTIP_MESSAGE.START_INPUT' | translate }}"
             [formControl]="taskStart">
             <mat-error *ngIf="taskStart.hasError('pattern')">
@@ -46,8 +46,8 @@
         <mat-form-field>
             <mat-label>ProcessDefinitionId</mat-label>
             <input 
-            matInput 
+            matInput
-            class="form-control" 
+            class="form-control"
             [formControl]="taskProcessDefinitionId">
             <mat-hint>E.g. SimpleProcess:1:2</mat-hint>
         </mat-form-field>
@@ -64,7 +64,7 @@
         <mat-form-field>
                 <mat-label>Process Instance</mat-label>
                 <mat-select 
-                class="form-control" 
+                class="form-control"
                 [formControl]="taskIncludeProcessInstance">
                  <mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions" [value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}</mat-option>
                 </mat-select>
@@ -73,7 +73,7 @@
         <mat-form-field>
                 <mat-label>Assignment</mat-label>
                 <mat-select 
-                class="form-control" 
+                class="form-control"
                 [formControl]="taskAssignment">
                  <mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{ assignmentOption.title }}</mat-option>
                 </mat-select>
@@ -82,7 +82,7 @@
         <mat-form-field>
                 <mat-label>State</mat-label>
                 <mat-select 
-                class="form-control" 
+                class="form-control"
                 [formControl]="taskState">
                     <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{ stateOption.title }}</mat-option>
                 </mat-select>
@@ -91,7 +91,7 @@
         <mat-form-field>
                 <mat-label>Sort</mat-label>
                 <mat-select 
-                class="form-control" 
+                class="form-control"
                 [formControl]="taskSort">
                     <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title }}</mat-option>
                 </mat-select>
@@ -104,13 +104,13 @@
 
 <div>
     <adf-tasklist
-        [appId]="appId" 
+        [appId]="appId"
-        [taskId]="id" 
+        [taskId]="id"
-        [name]="name" 
+        [name]="name"
-        [processDefinitionId]="processDefinitionId" 
+        [processDefinitionId]="processDefinitionId"
-        [processInstanceId]="processInstanceId" 
+        [processInstanceId]="processInstanceId"
-        [assignment]="assignment" 
+        [assignment]="assignment"
-        [state]="state" 
+        [state]="state"
         [sort]="sort"
         [start]="start"
         [includeProcessInstance]="includeProcessInstance"
@@ -127,7 +127,7 @@
             </data-columns>
     </adf-tasklist>
     
-    <adf-pagination 
+    <adf-pagination
         [target]="taskList">
     </adf-pagination>
 </div>

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

@@ -15,23 +15,6 @@
  * limitations under the License.
  */
 
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * distributed under the License is distributed on an "AS IS" BASIS,
- * limitations under the License.
- */
-
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl } from '@angular/forms';
 import { ActivatedRoute, Params } from '@angular/router';

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

@@ -47,10 +47,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.  |
 | processDefinitionId | `string` |  | The Definition Id of the process. |
 | processDefinitionKey | `string` |  | (**Deprecated:** 2.4.0) The Definition Key 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` |  | 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` |