argos/dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html

86 lines
4.4 KiB
HTML

<div class="main-info" [formGroup]="formGroup">
<div class="col-12 intro">
{{'DMP-EDITOR.MAIN-INFO.INTRO' | translate}}
</div>
<div class="col-12 card">
<!-- Title Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.1 {{'DMP-EDITOR.FIELDS.NAME' | translate}}*</div>
<div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
<div class="title-form">
<mat-form-field *ngIf="!isNewDataset">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isNewDataset">
<app-single-auto-complete [required]="true" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration"></app-single-auto-complete>
<!-- <app-single-auto-complete [required]="true" [formControl]="formGroup" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete> -->
</mat-form-field>
</div>
</div>
</div>
<!-- Description field -->
<div class="row" *ngIf="!isNewDataset">
<div class="col-12">
<div class="heading">1.2 {{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
<div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
<div class="description-form">
<mat-form-field>
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
</mat-form-field>
</div>
</div>
</div>
<!-- Researchers field-->
<div class="row" *ngIf="!isNewDataset">
<div class="col-12">
<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}</div>
<div class="hint">
<div class="pb-1">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
</div>
<div class="author-form">
<mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('researchers').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button matSuffix class="input-btn" [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher($event)">
<mat-icon class="icon-btn">add_circle</mat-icon>
</button>
</mat-form-field>
</div>
</div>
</div>
<!-- Organizations Field -->
<div class="row" *ngIf="!isNewDataset">
<div class="col-12">
<div class="heading">1.4 {{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}</div>
<div class="hint">
<div class="pb-1">{{'DMP-EDITOR.FIELDS.ORGANISATIONS-HINT' | translate}}</div>
<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
</div>
<div class="organizations-form">
<mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.ORGANIZATION' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('organisations').hasError('backendError')">
{{formGroup.get('organisations').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('organisations').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<button *ngIf="showOrganizationCreator()" matSuffix class="input-btn" [disabled]="canAddOrganizations()" type="button" (click)="addOrganization($event)">
<mat-icon class="icon-btn">add_circle</mat-icon>
</button>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>