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

318 lines
22 KiB
HTML

<div class="main-content">
<div class="container-fluid">
<div *ngIf="formGroup" class="form-container">
<div class="fixed-editor-header">
<div class="card editor-header">
<div class="col">
<div class="row">
<div class="col-auto info">
<div class="title">{{'DMP-EDITOR.TITLE-EDIT' | translate}}</div>
<div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.UNSAVED-CHANGES' | translate}})</span></div>
</div>
<div class="ml-auto d-flex flex-row">
<div class="col-auto d-flex align-items-center">
<button [disabled]="saving" *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discard()">
{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
</button>
<button [disabled]="saving" *ngIf="isNew" mat-raised-button type="button" (click)="formSubmit()" class="save-btn">
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button>
<div *ngIf="!isNew && formGroup.enabled && !lockStatus">
<button [disabled]="saving" *ngIf="!isFinalized" mat-raised-button (click)="formSubmit()" class="save-btn">
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
<button *ngIf="lockStatus" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-EDITOR.LOCKED' | translate}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- First Step -->
<div class="row" id="editor-form" *ngIf="this.step === 0 && this.isNew">
<div class="col-12 blueprint-section">
<div class="row">
<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.TITLE' | translate}} *</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS.TITLE' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="formGroup.get('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 class="row">
<div class="heading2 col-12">{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}} *</div>
<div class="col-12">
<rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="true">
</rich-text-editor-component>
</div>
</div>
<div class="dmp-blueprint-form" style="margin-top: 3%;">
<div class="heading2">{{'DMP-EDITOR.FIELDS.BLUEPRINT' | translate}} *</div>
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS.BLUEPRINT' | translate}}</mat-label>
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('blueprint')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
</app-single-auto-complete>
</mat-form-field>
</div>
<div class="row">
<div class="col-5">
<button mat-button class="action-btn" [disabled]="!(formGroup.get('blueprint').value && formGroup.get('label').value && formGroup.get('description').value)" (click)="selectBlueprint()">{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</button>
</div>
<div class="col-7" *ngIf="formGroup.get('blueprint').value == null || (formGroup.get('blueprint').value && formGroup.get('blueprint').value.id !== defaultBlueprintId)">
<div class="row">
<div class="col-6">
<p>{{'DMP-EDITOR.ACTIONS.OR-CONTINUE-WITH' | translate}}</p>
</div>
<div class="col-6">
<button mat-button class="action-btn" style="float: right;" (click)="selectDefaultBlueprint()">{{'DMP-EDITOR.ACTIONS.DEFAULT-BLUEPRINT' | translate}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-auto dmp-stepper" *ngIf="this.step != 0">
<div class="stepper-title">{{'DMP-EDITOR.TITLE' | translate}}</div>
<div class="stepper-options">
<ol class="stepper-list" start="1">
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
<!-- <div *ngIf="selectedBlueprint?.definition"> -->
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1)}">{{section.label}}</li>
<ol class="descriptionsInSection">
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
<div class="d-flex flex-direction-row">
<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
<mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDescription(description.id)">close</mat-icon>
<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALISED' | translate}}">check</mat-icon>
</div>
</li>
</ol>
<ul *ngIf="item.id && section.hasTemplates && canEditSection(section.id) && !formGroup.disabled" class="add-description-option">
<li>
<a class="add-description-action" [routerLink]="['/descriptions/edit/' + item.id + '/' + section.id]">
<mat-icon>add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
</a>
</li>
</ul>
</div>
</div>
</ol>
</div>
<div class="stepper-actions" *ngIf="this.step !== 0">
<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
<span class="material-icons">chevron_left</span>
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
</div>
<div *ngIf="this.step < this.maxStep" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
<span class="material-icons">chevron_right</span>
</div>
</div>
<div class="col-auto pr-0" *ngIf="this.step !== 0">
<!-- <app-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup" [isDmpEditor]="true"></app-form-progress-indication> -->
</div>
</div>
<div class="col-auto form" id="editor-form" *ngIf="this.step !== 0">
<div *ngIf="selectedBlueprint?.definition">
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
<div class="section-info" [hidden]="this.step !== (i + 1)">
<div class="col-12 intro">
{{section.description}}
</div>
<div class="col-12 card" *ngIf="section.fields?.length > 0">
<div class="row">
<div class="col-12">
<div *ngFor="let field of section.fields; let j=index">
<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toDmpBlueprintSystemFieldTypeString(field.systemFieldType)}}<span *ngIf="field.required">*</span></div>
<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}<span *ngIf="field.required">*</span></div>
<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}<span *ngIf="field.required">*</span></div>
<div *ngIf="field.description != null && field.description.length > 0" class="hint">{{field.description}}</div>
<div class="input-form">
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.System">
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Title">
<mat-form-field class="w-100">
<input matInput placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" [formControl]="formGroup.get('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 *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Description">
<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="field.placeholder ?? 'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [required]="field.required">
</rich-text-editor-component>
</div>
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Language">
<mat-form-field class="w-100">
<mat-select [formControl]="formGroup.get('language')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
{{ lang.name }}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('language').hasError('backendError')">{{formGroup.get('language').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled">
<div class="col-auto">
<span style="font-size: 15px;">{{contactIndex + 1}}</span>
</div>
<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="col-auto">
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" [formControl]="contact.get('contactType')">
<div *ngFor="let contactType of dmpContactTypeEnumValues">
<mat-button-toggle class="lang-button" [value]="contactType">{{enumUtils.toDmpContactTypeString(contactType)}}</mat-button-toggle>
</div>
</mat-button-toggle-group>
</div>
<div class="col pt-4">
<div class="row">
<div class="col d-flex" *ngIf="contact.get('contactType').value == dmpContactTypeEnum.Internal">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.USER' | translate}}</mat-label>
<app-single-auto-complete [formControl]="contact.get('userId')" [hidePlaceholder]="true" [configuration]="userService.singleAutoCompleteDmpAssociatedUserConfiguration"></app-single-auto-complete>
<mat-error *ngIf="contact.get('userId').hasError('backendError')">{{contact.get('userId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="contact.get('userId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<ng-container *ngIf="contact.get('contactType').value == dmpContactTypeEnum.External">
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.FIRST-NAME' | translate}}</mat-label>
<input matInput type="text" name="firstName" [formControl]="contact.get('firstName')">
<mat-error *ngIf="contact.get('firstName').hasError('backendError')">{{contact.get('firstName').getError('backendError').message}}</mat-error>
<mat-error *ngIf="contact.get('firstName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.LAST-NAME' | translate}}</mat-label>
<input matInput type="text" name="lastName" [formControl]="contact.get('lastName')">
<mat-error *ngIf="contact.get('lastName').hasError('backendError')">{{contact.get('lastName').getError('backendError').message}}</mat-error>
<mat-error *ngIf="contact.get('lastName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS1.EMAIL' | translate}}</mat-label>
<input matInput type="text" name="email" [formControl]="contact.get('email')">
<mat-error *ngIf="contact.get('email').hasError('backendError')">{{contact.get('email').getError('backendError').message}}</mat-error>
<mat-error *ngIf="contact.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</ng-container>
</div>
</div>
<div class="col-auto">
<button [disabled]="formGroup.disabled" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS1.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('backendError')">{{formGroup.get('properties').get('contacts').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div class="row">
<div class="col">
<button mat-icon-button (click)="addContact()" [disabled]="formGroup.disabled">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.AccessRights">
<mat-form-field class="w-100">
<mat-select [formControl]="formGroup.get('accessType')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.ACCESS-TYPE' | translate}}">
<mat-option *ngFor="let dmpAccessType of dmpAccessTypeEnumValues" [value]="dmpAccessType">
{{enumUtils.toDmpAccessTypeString(dmpAccessType)}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('accessType').hasError('backendError')">{{formGroup.get('accessType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('accessType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
<div>
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections"></app-dmp-user-field-component>
</div>
</div>
</div>
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">
<div>
<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('references')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType"></app-reference-field-component>
</div>
</div>
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.Extra">
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Text">
<mat-form-field class="w-100">
<mat-label>{{field.label}}</mat-label>
<input matInput placeholder="{{field.placeholder ?? field.label}}" type="text" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.RichText">
<rich-text-editor-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" placeholder="{{field.placeholder ?? field.label}}" [required]="field.required"></rich-text-editor-component>
</div>
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Date">
<mat-form-field class="w-100">
<mat-label>{{field.label}}</mat-label>
<input matInput placeholder="{{field.placeholder ?? field.label}}" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" [matDatepicker]="date" [required]="field.required">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker>
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Number">
<mat-form-field class="w-100">
<mat-label>{{field.label}}</mat-label>
<input matInput placeholder="{{field.placeholder ?? field.label}}" type="number" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 card" *ngIf="section.hasTemplates">
<div class="row">
<div class="col-12">
<div class="input-form">
<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
<mat-form-field class="w-100">
<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" [hidePlaceholder]="true" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="descriptionTemplateService.descriptionTempalteGroupMultipleAutocompleteConfiguration" (optionRemoved)="onRemoveDescriptionTemplate($event, i)" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="col pl-0 pt-0 pb-0 d-flex">
<span class="not-found-template">{{'DMP-EDITOR.NO-TEMPLATE-MESSAGE' | translate}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>