argos/dmp-frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-edi...

64 lines
3.8 KiB
HTML

<form class="description-base-fields-editor" *ngIf="formGroup" [formGroup]="formGroup">
<div class="col-12 intro">
<p>{{'DESCRIPTION-EDITOR.BASE-INFO.INTRO' | translate}}</p>
<span>{{'DESCRIPTION-EDITOR.BASE-INFO.INTRO-TIP' | translate}}</span>
</div>
<div class="col-12 card">
<!-- Title Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.1 {{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TITLE' | translate}}*</div>
<div class="title-form">
<mat-form-field class="w-100">
<input matInput placeholder="{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TITLE' | 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>
</div>
</div>
</div>
<!-- Description field -->
<div class="row">
<div class="col-12">
<div class="heading">1.2 {{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION' | translate}}</div>
<span class="hint">{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-HINT' | translate}}</span>
<div class="description-form">
<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [wrapperClasses]="'full-width editor ' +
((formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'required' : '')" [editable]="!formGroup.get('description').disabled">
</rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && (formGroup.get('description').hasError('required') || formGroup.get('description').hasError('backendError'))) ? 'visible' : 'invisible'" class="mat-form-field form-field-subscript-wrapper">
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</div>
</div>
<!-- Tags -->
<div class="row">
<div class="col-12">
<div class="heading">1.3 {{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.TAGS' | translate}}</div>
<div class="profile-form">
<app-tags-field-component [form]="formGroup.get('tags')"></app-tags-field-component>
</div>
</div>
</div>
<!-- Template Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.4 {{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE' | translate}}*</div>
<div class="profile-form">
<mat-form-field class="w-100">
<mat-select placeholder="{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE-PLACEHOLDER'| translate}}" [required]="true" [compareWith]="compareWith" [formControl]="formGroup.get('descriptionTemplateId')">
<mat-option *ngFor="let descriptionTemplate of availableDescriptionTemplates" [value]="descriptionTemplate.id" class="multiline-mat-option">
<div>{{descriptionTemplate.label}}</div>
<div>{{'DESCRIPTION-EDITOR.BASE-INFO.FIELDS.DESCRIPTION-TEMPLATE-VERSION'| translate}} {{descriptionTemplate.version}}</div>
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('descriptionTemplateId').hasError('backendError')">{{formGroup.get('descriptionTemplateId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('descriptionTemplateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
</form>