davidcanonieto 661b55985a [ADF-3009] Date picker checked on Start Task Component (#3725)
* [adf-3009] Date picker checked on Start Task Component

* [ADF-3009] Event trigger changed

* [ADF-3009] Event in mat-datepicker restored
2018-09-19 17:14:12 +01:00

89 lines
4.5 KiB
HTML

<mat-card class="adf-new-task-layout-card">
<mat-grid-list cols="1" rowHeight="60px">
<mat-grid-tile>
<div class="adf-new-task-heading">{{'ADF_TASK_LIST.START_TASK.FORM.TITLE'|translate}}</div>
</mat-grid-tile>
</mat-grid-list>
<mat-card-content>
<div class="adf-new-task-layout-card-content">
<div class="adf-grid-full-width adf-grid-row">
<mat-form-field class="adf-grid-full-width adf-grid-column">
<input matInput
class="adf-grid-full-width"
placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME'|translate}}"
[(ngModel)]="startTaskmodel.name"
required
id="name_id">
</mat-form-field>
</div>
<div class="adf-grid-full-width adf-grid-row">
<mat-form-field class="adf-grid-full-width adf-grid-column">
<textarea
matInput
class="adf-grid-full-width"
placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION'|translate}}"
[(ngModel)]="startTaskmodel.description"
rows="1"
id="description_id">
</textarea>
</mat-form-field>
</div>
<div class="adf-grid-full-width adf-grid-row">
<div class="adf-grid-column adf-grid-half-width">
<div class="adf-grid-full-width adf-grid-row">
<mat-form-field class="adf-grid-full-width">
<input matInput
[matDatepicker]="taskDatePicker"
(keydown)="true"
(keyup)="onDateChanged($event.srcElement.value)"
placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DATE'|translate}}"
[(ngModel)]="startTaskmodel.dueDate"
id="date_id">
<mat-datepicker-toggle matSuffix [for]="taskDatePicker"></mat-datepicker-toggle>
<mat-datepicker #taskDatePicker
[touchUi]="true"
(dateChanged)="onDateChanged($event)">
</mat-datepicker>
<div class="adf-error-text-container">
<div *ngIf="dateError">
<div class="adf-error-text">{{'ADF_TASK_LIST.START_TASK.FORM.DATE.ERROR'|translate}}</div>
<mat-icon class="adf-error-icon">warning</mat-icon>
</div>
</div>
</mat-form-field>
</div>
<div class="adf-grid-full-width adf-grid-row">
<mat-form-field class="adf-grid-full-width">
<mat-select placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}" id="form_id" [(ngModel)]="formKey">
<mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
<mat-option *ngFor="let form of forms" [value]="form.id">{{ form.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="adf-grid-column adf-grid-half-width">
<people-widget (peopleSelected)="getAssigneeId($event)" [field]="field"></people-widget>
</div>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<mat-grid-list cols="1" rowHeight="60px">
<mat-grid-tile>
<div class="adf-new-task-footer">
<button mat-button (click)="onCancel()" id="button-cancel">
{{'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL'|translate}}
</button>
<button color="primary" mat-button [disabled]="!startTaskmodel.name || dateError" (click)="start()" id="button-start">
{{'ADF_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
</button>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-card-actions>
</mat-card>