red-ui/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
Adina Țeudan 4b73e3893e UI updates
2020-12-14 17:03:34 +02:00

80 lines
3.5 KiB
HTML

<section class="dialog">
<form (submit)="saveProject()" [formGroup]="projectForm">
<div
[translate]="project?.projectId ? 'project-listing.add-edit-dialog.header-edit' : 'project-listing.add-edit-dialog.header-new'"
class="dialog-header heading-l"
></div>
<div class="dialog-content">
<div class="red-input-group required">
<label translate="project-listing.add-edit-dialog.form.name.label"></label>
<input
formControlName="projectName"
name="projectName"
type="text"
[placeholder]="'project-listing.add-edit-dialog.form.name.placeholder' | translate"
/>
</div>
<div class="red-input-group required" *ngIf="!project">
<mat-form-field floatLabel="always">
<mat-label>{{ 'project-listing.add-edit-dialog.form.template' | translate }}</mat-label>
<mat-select value="EFSA 1 (Vertebrate Authors)" style="width: 100%;">
<mat-option *ngFor="let type of ['EFSA 1 (Vertebrate Authors)']" [value]="type">
{{ type }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="red-input-group">
<label translate="project-listing.add-edit-dialog.form.description.label"></label>
<textarea
#textarea
[class.has-scrollbar]="hasScrollbar"
formControlName="description"
name="description"
type="text"
rows="5"
[placeholder]="'project-listing.add-edit-dialog.form.description.placeholder' | translate"
></textarea>
</div>
<div class="due-date">
<mat-checkbox [checked]="hasDueDate" (change)="hasDueDate = !hasDueDate" class="filter-menu-checkbox" color="primary">
{{ 'project-listing.add-edit-dialog.form.due-date' | translate }}
</mat-checkbox>
<div class="red-input-group datepicker-wrapper" *ngIf="hasDueDate">
<input placeholder="dd/mm/yy" [matDatepicker]="picker" formControlName="dueDate" />
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</div>
</div>
</div>
<div class="dialog-actions">
<button
[disabled]="disabled || !changed"
color="primary"
mat-flat-button
translate="project-listing.add-edit-dialog.actions.save"
type="submit"
></button>
<redaction-icon-button
[disabled]="disabled || !changed"
(action)="saveProjectAndAddMembers()"
*ngIf="!project?.projectId"
text="project-listing.add-edit-dialog.actions.save-and-add-members"
icon="red:assign"
type="show-bg"
></redaction-icon-button>
</div>
</form>
<redaction-circle-button icon="red:close" mat-dialog-close class="dialog-close"></redaction-circle-button>
</section>