argos/dmp-frontend/src/app/dmps/editor/dmp-editor.component.html

73 lines
4.7 KiB
HTML
Raw Normal View History

2017-12-19 11:33:47 +01:00
<div class="data-management-plan-editor">
2017-12-18 11:01:22 +01:00
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
2017-12-18 12:24:12 +01:00
<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
2017-12-19 12:45:56 +01:00
<mat-card-title *ngIf="!isNew">{{formGroup.get('label').value}}</mat-card-title>
2017-12-18 11:01:22 +01:00
<mat-card-content>
2017-12-14 18:13:28 +01:00
2017-12-18 11:01:22 +01:00
<mat-form-field>
2017-12-18 12:24:12 +01:00
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
2017-12-18 11:01:22 +01:00
<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
2017-12-14 18:13:28 +01:00
2017-12-18 11:01:22 +01:00
<mat-form-field class="full-width">
2017-12-18 12:24:12 +01:00
<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
2017-12-18 11:01:22 +01:00
required></textarea>
<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
2017-12-14 18:13:28 +01:00
2017-12-20 17:50:16 +01:00
<td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
(inputChange)="filterProfiles($event)" requireMatch>
<ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
{{chip.name}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
{{option.name}}
</div>
</ng-template>
<mat-progress-bar [style.height.px]="2" *ngIf="filteredProfilesAsync" mode="indeterminate"></mat-progress-bar>
</td-chips>
2017-12-18 12:24:12 +01:00
<td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
(inputChange)="filterOrganisations($event)" requireMatch>
2017-12-18 11:01:22 +01:00
<ng-template td-chip let-chip="chip">
2017-12-18 12:24:12 +01:00
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
2017-12-18 11:01:22 +01:00
{{chip.name}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
2017-12-18 12:24:12 +01:00
{{option.name}}
2017-12-18 11:01:22 +01:00
</div>
2017-12-18 12:24:12 +01:00
</ng-template>
2017-12-18 11:01:22 +01:00
<mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
</td-chips>
2017-12-14 18:13:28 +01:00
2017-12-18 12:24:12 +01:00
<td-chips color="accent" [items]="filteredResearchers" formControlName="researchers" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}"
(inputChange)="filterResearchers($event)" requireMatch>
<ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
{{chip.name}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
{{option.name}}
</div>
</ng-template>
<mat-progress-bar [style.height.px]="2" *ngIf="filteringResearchersAsync" mode="indeterminate"></mat-progress-bar>
</td-chips>
2017-12-18 11:01:22 +01:00
<div layout="row" class="full-width text-right" align="end">
2017-12-18 12:24:12 +01:00
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
<button *ngIf="!isNew" mat-raised-button color="primary" type="submit" (click)="delete()">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button>
2017-12-14 18:13:28 +01:00
</div>
2017-12-18 11:01:22 +01:00
</mat-card-content>
</mat-card>
</form>
2017-12-18 12:24:12 +01:00
<div *ngIf="formGroup"> {{ formGroup.value | json }}</div>
2017-12-18 11:01:22 +01:00
</div>