mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
49738ad555
* [ADF-3282] Refactor Start Task Component * [ADF-3282] Fix e2e test * [ADF-3282] Remove maxTaskNameLength from start task doc
96 lines
4.5 KiB
HTML
96 lines
4.5 KiB
HTML
<mat-card fxFlex="70%" class="adf-new-task-layout-card">
|
|
<mat-card-header fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px" class="adf-new-task-heading">
|
|
<mat-card-title>{{'ADF_TASK_LIST.START_TASK.FORM.TITLE' | translate}}</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<form [formGroup]="taskForm" fxLayout="column" fxLayoutGap="10px">
|
|
<div class="adf-task-name">
|
|
<mat-form-field fxFlex>
|
|
<mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME' | translate}}</mat-label>
|
|
<input
|
|
matInput
|
|
id="name_id"
|
|
formControlName="name">
|
|
<mat-error *ngIf="nameController.hasError('required')">
|
|
{{ 'ADF_TASK_LIST.START_TASK.FORM.ERROR.REQUIRED' | translate }}
|
|
</mat-error>
|
|
<mat-error *ngIf="nameController.hasError('maxlength')">
|
|
{{ 'ADF_TASK_LIST.START_TASK.FORM.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxTaskNameLength } }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="adf-task-description">
|
|
<mat-form-field fxFlex>
|
|
<mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION' | translate}}</mat-label>
|
|
<textarea
|
|
matInput
|
|
rows="1"
|
|
id="description_id"
|
|
formControlName="description">
|
|
</textarea>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
|
|
<mat-form-field fxFlex>
|
|
<input
|
|
matInput
|
|
(keyup)="onDateChanged($event.srcElement.value)"
|
|
(dateInput)="onDateChanged($event.value)"
|
|
[matDatepicker]="taskDatePicker"
|
|
placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
|
|
id="date_id">
|
|
<mat-datepicker-toggle
|
|
matSuffix
|
|
[for]="taskDatePicker"></mat-datepicker-toggle>
|
|
<mat-datepicker
|
|
#taskDatePicker
|
|
[touchUi]="true">
|
|
</mat-datepicker>
|
|
<div class="adf-error-text-container">
|
|
<div *ngIf="dateError">
|
|
<div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.ERROR.DATE'|translate}}</div>
|
|
<mat-icon class="adf-error-icon">warning</mat-icon>
|
|
</div>
|
|
</div>
|
|
</mat-form-field>
|
|
<div fxFlex>
|
|
<people-widget
|
|
(peopleSelected)="getAssigneeId($event)"
|
|
[field]="field"
|
|
class="adf-people-widget-content"></people-widget>
|
|
</div>
|
|
</div>
|
|
<div class="adf-task-form">
|
|
<mat-form-field fxFlex="48%" fxFlex.xs="100%">
|
|
<mat-label id="form_label">{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}</mat-label>
|
|
<mat-select
|
|
id="form_id"
|
|
class="form-control"
|
|
formControlName="formKey">
|
|
<mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
|
|
<mat-option *ngFor="let form of forms$ | async" [value]="form.id">{{ form.name }}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
<div class="adf-new-task-footer" fxLayout="row" fxLayoutAlign="end end">
|
|
<button
|
|
mat-button
|
|
(click)="onCancel()"
|
|
id="button-cancel">
|
|
{{'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL'|translate}}
|
|
</button>
|
|
<button
|
|
color="primary"
|
|
mat-button
|
|
[disabled]="!isFormValid()"
|
|
(click)="saveTask()"
|
|
id="button-start">
|
|
{{'ADF_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
|
|
</button>
|
|
</div>
|
|
</mat-card-actions>
|
|
</mat-card>
|