[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
2025-07-24 17:32:15 +00:00 · 2018-08-03 15:06:13 +01:00
parent 8d8ab1e682
commit 547c56aeef
8 changed files with 150 additions and 22 deletions
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -218,8 +218,14 @@
    "INHERITED_PERMISSIONS_BUTTON": "Permission Inherited"
  },
  "TASK_LIST_DEMO": {
+    "ERROR_MESSAGE": {
      "APP_ID_REQUIRED_ERROR": "Insert App Id",
-    "APP_ID_TYPE_ERROR": "App Id must be a number"
+      "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",
--- a/demo-shell/src/app/components/process-service/process-service.component.ts
+++ b/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;
--- 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
@@ -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 
--- a/demo-shell/src/app/components/task-list-demo/task-list-demo.component.scss
+++ b/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-bottom: 50px;
+    margin: 100px auto 0 auto;
+    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;
 }
--- 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,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');
+    }
 }
--- a/docs/process-services/task-list.component.md
+++ b/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` |
--- a/lib/process-services/task-list/components/task-list.component.ts
+++ b/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);
    }
--- a/lib/process-services/task-list/models/filter.model.ts
+++ b/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;
        }
    }
 }