alfresco-ng2-components/lib/process-services/task-list/components/task-details.component.html

<div *ngIf="!taskDetails" data-automation-id="adf-tasks-details--empty">
    <ng-template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]"
                 [ngForTemplate]="noTaskDetailsTemplateComponent">
        {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.NONE' | translate }}
    </ng-template>
    <div *ngIf="!noTaskDetailsTemplateComponent">
        {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.NONE' | translate }}
    </div>
</div>
<div *ngIf="taskDetails" class="adf-task-details">

    <div *ngIf="showHeader" class="adf-task-details-header">
        <h2 class="adf-activiti-task-details__header">
            <span>{{taskDetails.name || 'No name'}}</span>
        </h2>
    </div>

    <div class="adf-task-details-core"
        fxLayout="column"
        fxLayoutGap="8px"
        fxLayout.lt-lg="column">

        <div class="adf-task-details-core-form">
            <div *ngIf="isAssigned()">
                <adf-form *ngIf="isFormComponentVisible()" #activitiForm
                          [taskId]="taskDetails.id"
                          [showTitle]="showFormTitle"
                          [showRefreshButton]="showFormRefreshButton"
                          [showCompleteButton]="showFormCompleteButton"
                          [disableCompleteButton]="!isCompleteButtonEnabled()"
                          [showSaveButton]="isSaveButtonVisible()"
                          [readOnly]="internalReadOnlyForm"
                          [fieldValidators]="fieldValidators"
                          (formSaved)='onFormSaved($event)'
                          (formCompleted)='onFormCompleted($event)'
                          (formContentClicked)='onFormContentClick($event)'
                          (formLoaded)='onFormLoaded($event)'
                          (error)='onFormError($event)'
                          (executeOutcome)='onFormExecuteOutcome($event)'>
                </adf-form>
                <adf-task-standalone *ngIf="isTaskStandaloneComponentVisible()"
                                     [taskName]="taskDetails.name"
                                     [taskId]="taskDetails.id"
                                     [isCompleted]="isCompletedTask()"
                                     [hasCompletePermission]="isCompleteButtonEnabled()"
                                     [hideCancelButton]="true"
                                     (complete)="onComplete()"
                                     (showAttachForm)="onShowAttachForm()">
                </adf-task-standalone>

                <mat-card class="adf-message-card" *ngIf="!isTaskStandaloneComponentVisible() && !isCompletedTask() && !isFormComponentVisible()" >
                    <mat-card-content>
                        <div class="adf-no-form-message-container">
                            <div class="adf-no-form-message-list">
                                <div *ngIf="!isCompletedTask()" class="adf-no-form-message">
                                    <span id="adf-no-form-message">{{'ADF_TASK_LIST.STANDALONE_TASK.NO_FORM_MESSAGE' | translate}}</span>
                                </div>
                            </div>
                        </div>
                    </mat-card-content>

                    <mat-card-actions class="adf-no-form-mat-card-actions">
                        <div>
                            <button mat-button id="adf-no-form-complete-button" color="primary" (click)="onComplete()">{{ 'ADF_TASK_LIST.DETAILS.BUTTON.COMPLETE' | translate }}</button>
                        </div>
                    </mat-card-actions>

                </mat-card>

                <adf-attach-form *ngIf="isShowAttachForm()"
                                 [taskId]="taskDetails.id"
                                 [formKey]="taskDetails.formKey"
                                 (cancelAttachForm)="onCancelAttachForm()"
                                 (success)="onCompleteAttachForm()">
                </adf-attach-form>
            </div>
            <div *ngIf="!isAssigned()" id="claim-message-id">
                {{ 'ADF_TASK_LIST.DETAILS.MESSAGES.CLAIM' | translate }}
            </div>
        </div>
        <div class="adf-task-details-core-sidebar">
            <adf-info-drawer *ngIf="showHeaderContent" title="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE' | translate }}" id="adf-task-details-core-sidebar-drawer" class="adf-task-details-core-sidebar-drawer">
                <adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE' | translate }}">
                    <div class="adf-assignment-container" *ngIf="showAssignee">
                        <adf-people-search
                            (searchPeople)="searchUser($event)"
                            (success)="assignTaskToUser($event)"
                            (closeSearch)="onCloseSearch()"
                            [results]="peopleSearch">
                            <ng-container adf-people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_ASSIGNEE' | translate }}
                            </ng-container>
                            <ng-container adf-people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_ASSIGNEE' | translate }}
                            </ng-container>
                        </adf-people-search>
                    </div>
                    <adf-task-header
                        [class]="getTaskHeaderViewClass()"
                        [taskDetails]="taskDetails"
                        [formName]="taskFormName"
                        (claim)="onClaimAction($event)"
                        (unclaim)="onUnclaimAction($event)">
                    </adf-task-header>
                    <adf-people *ngIf="showInvolvePeople" #people
                                [people]="taskPeople"
                                [readOnly]="internalReadOnlyForm"
                                [taskId]="taskDetails.id">
                    </adf-people>
                </adf-info-drawer-tab>

                <adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE' | translate }}">
                    <mat-card *ngIf="showComments">
                        <mat-card-content>
                            <adf-comments #activitiComments
                                          [readOnly]="isReadOnlyComment()"
                                          [taskId]="taskDetails.id">
                            </adf-comments>
                        </mat-card-content>
                    </mat-card>
                </adf-info-drawer-tab>

            </adf-info-drawer>

            <div *ngIf="showHeaderContent" class="adf-task-details-core-sidebar-checklist">
                <div *ngIf="showChecklist">
                    <adf-checklist #activitiChecklist
                                   [readOnly]="internalReadOnlyForm"
                                   [taskId]="taskDetails.id"
                                   [assignee]="taskDetails?.assignee?.id"
                                   (checklistTaskCreated)="onChecklistTaskCreated($event)"
                                   (checklistTaskDeleted)="onChecklistTaskDeleted($event)">
                    </adf-checklist>
                </div>
            </div>
        </div>
    </div>

    <ng-template #errorDialog>
        <h3 matDialogTitle>{{'ADF_TASK_LIST.DETAILS.ERROR.TITLE'|translate}}</h3>
        <mat-dialog-content>
            <p>{{'ADF_TASK_LIST.DETAILS.ERROR.DESCRIPTION'|translate}}</p>
        </mat-dialog-content>
        <mat-dialog-actions>
            <button mat-button type="button" (click)="closeErrorDialog()">{{'ADF_TASK_LIST.DETAILS.ERROR.CLOSE'|translate}}
            </button>
        </mat-dialog-actions>
    </ng-template>

</div>