inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1532] Assignee typeahead in start task form (#2839)

Browse Source 
* people module directory restructuring

* Extract PeopleSearchFieldComponent to reuse most part of it

* Transform PeopleSearchFieldComponent to the form we want to reuse

* People selector component, first try

* Remove material grid from start-task.component, first part

* Styling and i18n

* clear button for deleting the selected assignee

* Remove people preloading, remove combobox and update assigneeId

* Fix existing tests

* Add new tests

* Final css fixes
This commit is contained in:
Popovics András
2018-01-30 13:38:53 +00:00
committed by Eugenio Romano
parent 74cd0fab33
commit 9bd18c9770
35 changed files with 836 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
lib/process-services/task-list/components/start-task.component.html
View File

@@ -5,67 +5,70 @@
</mat-grid-tile>
</mat-grid-list>
<mat-card-content>
<mat-grid-list cols="1" rowHeight="80px">
<mat-grid-tile>
<mat-form-field class="adf-new-task-text-width">
<input matInput placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME'|translate}}"
[(ngModel)]="startTaskmodel.name" required id="name_id">
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
<mat-grid-list cols="1" rowHeight="80px">
<mat-grid-tile>
<mat-form-field class="adf-new-task-text-width">
<textarea matInput placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION'|translate}}"
[(ngModel)]="startTaskmodel.description" id="description_id"></textarea>
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
<mat-grid-list cols="2" rowHeight="80px">
<mat-grid-tile>
<mat-form-field class="adf-start-task-input-container">
<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
[matDatepicker]="taskDatePicker"
(keydown)="true"
(focusout)="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>
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>
<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 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"
(focusout)="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>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field class="adf-start-task-input-container">
<mat-select placeholder="{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE'|translate}}" id="assignee_id"
class="adf-mat-select" [(ngModel)]="assigneeId">
<mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
<span *ngFor="let user of people">
<mat-option [value]="user.id" *ngIf="!isUserNameEmpty(user)">{{ getDisplayUser(user.firstName,
user.lastName, ' ')}}
</mat-option>
</span>
</mat-select>
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
<mat-grid-list cols="2" rowHeight="80px">
<mat-grid-tile>
<mat-form-field class="adf-start-task-input-container">
<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>
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
</mat-grid-list>
<div class="adf-grid-column adf-grid-half-width">
<adf-people-selector [(peopleId)]="assigneeId" id="assignee_id"></adf-people-selector>
</div>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<mat-grid-list cols="1" rowHeight="60px">