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

<div class="adf-task-list-demo-inputs">

    <form [formGroup]="taskListForm">
        <mat-form-field>
            <mat-label>App Id</mat-label>
            <input
                matInput
                [formControl]="taskAppId" data-automation-id="appId input">
            <mat-error *ngIf="taskAppId.hasError('pattern')">
                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.APP_ID_TYPE_ERROR' | translate }}
            </mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Task Name</mat-label>
            <input
                matInput
                [formControl]="taskName" data-automation-id="task name">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Task Id</mat-label>
            <input
                matInput
                [formControl]="taskId" data-automation-id="task id">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Start</mat-label>
            <input
                matInput
                data-automation-id="start"
                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" data-automation-id="process definition id">
            <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" data-automation-id="process instance id">
            <mat-hint>E.g. 12345</mat-hint>
        </mat-form-field>

        <mat-form-field data-automation-id="items per page">
            <mat-label>Items per page</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="taskSize" data-automation-id="items per page">
            <mat-error *ngIf="taskSize.hasError('min')">
                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
            </mat-error>
            <mat-error *ngIf="taskSize.hasError('pattern')">
                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
            </mat-error>
        </mat-form-field>

        <mat-form-field data-automation-id="page">
            <mat-label>Page</mat-label>
            <input
                matInput
                class="form-control"
                [formControl]="taskPage" data-automation-id="page">
            <mat-error *ngIf="taskPage.hasError('min')">
                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_GREATER_THAN' | translate: { value: minValue } }}
            </mat-error>
            <mat-error *ngIf="taskPage.hasError('pattern')">
                {{ 'TASK_LIST_DEMO.ERROR_MESSAGE.NUMBER_TYPE_ERROR' | translate }}
            </mat-error>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Due After</mat-label>
            <input matInput class="form-control" [matDatepicker]="pickerAfter" placeholder="Choose a date"
                   [formControl]="taskDueAfter" data-automation-id="due after">
            <mat-datepicker-toggle matSuffix [for]="pickerAfter"></mat-datepicker-toggle>
            <mat-datepicker #pickerAfter></mat-datepicker>
        </mat-form-field>
        <mat-form-field>
            <mat-label>Due Before</mat-label>
            <input matInput class="form-control" [matDatepicker]="pickerBefore" placeholder="Choose a date"
                   [formControl]="taskDueBefore" data-automation-id="due before">
            <mat-datepicker-toggle matSuffix [for]="pickerBefore"></mat-datepicker-toggle>
            <mat-datepicker #pickerBefore></mat-datepicker>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Process Instance</mat-label>
            <mat-select
                [formControl]="taskIncludeProcessInstance">
                <mat-option *ngFor="let includeProcessInstanceOption of includeProcessInstanceOptions"
                            [value]="includeProcessInstanceOption.value">{{ includeProcessInstanceOption.title }}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field>
            <mat-label>Assignment</mat-label>
            <mat-select
                [formControl]="taskAssignment">
                <mat-option *ngFor="let assignmentOption of assignmentOptions" [value]="assignmentOption.value">{{
                    assignmentOption.title }}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field data-automation-id="state">
            <mat-label>State</mat-label>
            <mat-select
                [formControl]="taskState" data-automation-id="selected state">
                <mat-option *ngFor="let stateOption of stateOptions" [value]="stateOption.value">{{
                    stateOption.title }}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field data-automation-id="sort">
            <mat-label>Sort</mat-label>
            <mat-select
                [formControl]="taskSort" data-automation-id="selected sort">
                <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption.value">{{ sortOption.title
                    }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </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"
        [page]="page"
        [size]="size"
        [dueAfter]="dueAfter"
        [dueBefore]="dueBefore"
        [includeProcessInstance]="includeProcessInstance"
        #taskList>
        <data-columns>
            <data-column key="id" title="Id"></data-column>
            <data-column key="assignee" title="Assignee" class="adf-full-width adf-name-column">
                <ng-template let-entry="$implicit">
                    <div>{{entry.row.obj.assignee | fullName}}</div>
                </ng-template>
            </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
        [target]="taskList">
    </adf-pagination>
</div>