alfresco-ng2-components/demo-shell/src/app/components/process-service/process-service.component.html

<mat-tab-group [(selectedIndex)]="activeTab" (selectedTabChange)="onTabChange($event)"
               data-automation-id="navigation-bar" [animationDuration]="'0'">
    <mat-tab id="app-tasks-header" label="Tasks">
        <div class="app-grid">
            <div class="app-grid-item app-tasks-menu">
                <adf-sidebar-action-menu [expanded]="true" [width]="205" title="CREATE">
                    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
                    <div adf-sidebar-menu-options>
                        <button mat-menu-item data-automation-id="btn-start-task" (click)="navigateStartTask()">
                            <mat-icon>assessment</mat-icon>
                            <span>New Task</span>
                        </button>
                    </div>
                </adf-sidebar-action-menu>
                <adf-task-filters [filterParam]="filterSelected"
                                  role="group"
                                  [appId]="appId"
                                  (filterClicked)="onTaskFilterClick($event)"
                                  (filterSelected)="onTaskFilterClick($event)"
                                  (success)="onSuccessTaskFilterList()" #activitiFilter>
                </adf-task-filters>
            </div>
            <div
                class="app-grid-item app-tasks-list"
                *ngIf="taskFilter && !isStartTaskMode()">
                <adf-tasklist
                    [appId]="taskFilter?.appId"
                    [presetColumn]="presetColumn"
                    [page]="taskPage"
                    [size]="paginationPageSize"
                    [name]="taskFilter?.filter?.name"
                    [assignment]="taskFilter?.filter?.assignment"
                    [state]="taskFilter?.filter?.state"
                    [sort]="taskFilter?.filter?.sort"
                    [landingTaskId]="currentTaskId"
                    (rowClick)="onTaskRowClick($event)"
                    (success)="onSuccessTaskList()"
                    (row-dblclick)="onTaskRowDblClick($any($event))"
                    #taskList>
                </adf-tasklist>

                <adf-pagination
                    *ngIf="taskList"
                    [target]="taskList"
                    (changePageSize)="onChangePageSize($event)"
                    #taskListPagination>
                </adf-pagination>
            </div>
            <div
                class="app-grid-item app-tasks-details"
                *ngIf="!isStartTaskMode()"
                data-automation-id="app-tasks-details">
                <adf-task-details
                  [taskId]="currentTaskId"
                  [showFormTitle]="true"
                  [fieldValidators]="fieldValidators"
                  [showHeaderContent]="true"
                  (formCompleted)="onFormCompleted()"
                  (formContentClicked)="onContentClick($event)"
                  (taskCreated)="onTaskCreated($event)"
                  (assignTask)="onAssignTask()"
                  (taskDeleted)="onTaskDeleted()">
                </adf-task-details>

                <div *ngIf="currentTaskId">
                    Task Audit log
                    <button
                        adf-task-audit
                        [task-id]="currentTaskId"
                        [download]="true"
                        mat-icon-button>
                        <mat-icon>download</mat-icon>
                    </button>
                </div>
                <app-task-attachments [taskId]="currentTaskId"></app-task-attachments>
            </div>

            <div class="app-grid-item app-tasks-start" *ngIf="isStartTaskMode()">
                <adf-start-task
                    [appId]="appId"
                    [name]="defaultTaskName"
                    (success)="onStartTaskSuccess($event)"
                    (cancel)="onCancelStartTask()">
                </adf-start-task>
            </div>
        </div>
    </mat-tab>

    <mat-tab id="processes-header" label="Process">
        <div class="app-grid">
            <div id="app-processes-menu" class="app-grid-item app-processes-menu">
                <adf-sidebar-action-menu [expanded]="true" [width]="205" title="CREATE">
                    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
                    <div adf-sidebar-menu-options>
                        <button mat-menu-item data-automation-id="btn-start-process" (click)="navigateStartProcess()">
                            <mat-icon>assessment</mat-icon>
                            <span>New Process</span>
                        </button>
                    </div>
                </adf-sidebar-action-menu>

                <adf-process-instance-filters
                    #activitiProcessFilter
                    [appId]="appId"
                    [filterParam]="filterSelected"
                    [showIcon]="false"
                    (filterClicked)="onProcessFilterChange($event)"
                    (filterSelected)="onProcessFilterChange($event)"
                    (success)="onSuccessProcessFilterList()">
                </adf-process-instance-filters>
            </div>

            <div
                class="app-grid-item app-processes-list"
                *ngIf="processFilter && !isStartProcessMode()">
                <adf-process-instance-list
                    #processList
                    *ngIf="processFilter?.filter" [appId]="processFilter?.appId"
                    [presetColumn]="presetColumn"
                    [state]="processFilter?.filter?.state"
                    [page]="processPage"
                    [size]="paginationPageSize"
                    [sort]="processFilter?.filter?.sort"
                    (rowClick)="onProcessRowClick($event)"
                    (row-dblclick)="onProcessRowDblClick($any($event))"
                    (success)="onSuccessProcessList()">
                </adf-process-instance-list>
                <adf-pagination
                    *ngIf="processList"
                    [target]="processList"
                    (changePageSize)="onChangePageSize($event)">
                </adf-pagination>
            </div>

            <div class="app-grid-item app-processes-details" *ngIf="!isStartProcessMode()">
                <adf-process-instance-details
                    [processInstanceId]="currentProcessInstanceId"
                    (processCancelled)="processCancelled()"
                    (showProcessDiagram)="onShowProcessDiagram($event)"
                    (taskClick)="onProcessDetailsTaskClick($event)">
                </adf-process-instance-details>

                <div *ngIf="currentProcessInstanceId">
                    Process Audit log
                    <button adf-process-audit
                            [process-id]="currentProcessInstanceId"
                            [download]="true" mat-icon-button
                            [format]="'pdf'">
                        <mat-icon>download</mat-icon>
                    </button>
                </div>
                <app-process-attachments [processInstanceId]="currentProcessInstanceId">
                </app-process-attachments>
            </div>
            <div
                class="app-grid-item app-processes-start"
                *ngIf="isStartProcessMode()">
                <adf-start-process
                    #activitiStartProcess
                    [appId]="applicationId"
                    [processDefinitionName]="processDefinitionName"
                    [title]="'Start Process'"
                    [name]="defaultProcessName"
                    (formContentClicked)="onContentClick($event)"
                    (start)="onStartProcessInstance($event)"
                    (cancel)="onCancelProcessInstance()"
                    (error)="onStartProcessError($event)">
                </adf-start-process>
            </div>
        </div>
    </mat-tab>
</mat-tab-group>