MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

no message

This commit is contained in:
Sofia Papacharalampous 2024-03-13 09:46:16 +02:00
parent 60899bfea3
commit f754dbe661
11 changed files with 317 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html
View File

@ -1,6 +1,7 @@
<div class="template-container" *ngIf="descriptionTemplate && formGroup"> <div class="template-container" *ngIf="descriptionTemplate && formGroup">
<div mat-dialog-title class="row d-flex m-0 header"> <div mat-dialog-title class="row d-flex m-0 header">
<span class="template-title align-self-center" matTooltip="{{descriptionTemplate.label}}">{{'DMP-LISTING.COLUMNS.PROFILE' | translate}} - {{descriptionTemplate.label}}</span> <!-- <span class="template-title align-self-center" matTooltip="{{descriptionTemplate.label}}">{{'DMP-LISTING.COLUMNS.PROFILE' | translate}} - {{descriptionTemplate.label}}</span> -->
<span class="template-title align-self-center" matTooltip="{{descriptionTemplate.label}}">{{'DESCRIPTION-TEMPLATE-PREVIEW.TEMPLATE' | translate}} - {{descriptionTemplate.label}}</span>
<span class="ml-auto align-self-center" (click)="closeDialog()"><mat-icon class="close-icon">close</mat-icon></span> <span class="ml-auto align-self-center" (click)="closeDialog()"><mat-icon class="close-icon">close</mat-icon></span>
</div> </div>
<div *ngIf="progressIndication" class="progress-bar"> <div *ngIf="progressIndication" class="progress-bar">

2
dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html
View File

@ -7,7 +7,7 @@
<input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled> <input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled>
</mat-form-field> </mat-form-field>
<mat-form-field class="col field-title" floatLabel="never"> <mat-form-field class="col field-title" floatLabel="never">
<textarea matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' |translate)+' '+('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput" [formControl]="this.form.get('title')"></textarea> <textarea matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+' '+('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput" [formControl]="this.form.get('title')"></textarea>
<mat-error *ngIf="this.form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error> <mat-error *ngIf="this.form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>

8
dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/external-datasets/description-template-editor-external-datasets-field.component.html
View File

@ -1,13 +1,13 @@
<div class="row" *ngIf="form.get('data')"> <div class="row" *ngIf="form.get('data')">
<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-EXTERNAL-DATASETS-TITLE' <h5 style="font-weight: bold" class="col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-EXTERNAL-DATASETS-TITLE'
| translate}}</h5> | translate}}</h5>
<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multipleSelect')"> <mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multipleSelect')">
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-MULTIPLE-AUTOCOMPLETE' | translate}}
</mat-checkbox> </mat-checkbox>
<div class="col-6"> <div class="col-6">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-EXTERNAL-DATASETS-PLACEHOLDER' | translate}}</mat-label> <mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-EXTERNAL-DATASETS-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="string" [formControl]="form.get('data').get('label')"> <input matInput type="string" [formControl]="form.get('data').get('label')">
<mat-error *ngIf="form.get('data').get('label').hasError('backendError')">{{form.get('data').get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('data').get('label').hasError('backendError')">{{form.get('data').get('label').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
@ -15,7 +15,7 @@
<div class="col-6"> <div class="col-6">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label> <mat-label>
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.EXTERNAL-DATASET-TYPE-NAME' | translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.EXTERNAL-DATASET-TYPE-NAME' | translate}}
</mat-label> </mat-label>
<mat-select [formControl]="form.get('data').get('type')"> <mat-select [formControl]="form.get('data').get('type')">
<mat-option *ngFor="let type of externalDatasetTypeEnumValues" [value]="type">{{enumUtils.toDescriptionTemplateFieldDataExternalDatasetTypeString(type)}}</mat-option> <mat-option *ngFor="let type of externalDatasetTypeEnumValues" [value]="type">{{enumUtils.toDescriptionTemplateFieldDataExternalDatasetTypeString(type)}}</mat-option>

2
dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/select/description-template-editor-select-field.component.html
View File

@ -5,7 +5,7 @@
<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched"> <ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
<mat-icon class="text-danger translateY-3">warning_amber</mat-icon> <mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
<small class="text-danger">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' |translate}}</small> <small class="text-danger">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</small>
</ng-container> </ng-container>
</div> </div>
<mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multipleSelect')"> <mat-checkbox class="col-auto" [formControl]="this.form.get('data').get('multipleSelect')">

12
dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
View File

@ -99,7 +99,7 @@
</mat-option> </mat-option>
</mat-select> </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('backendError')">{{formGroup.get('language').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' |translate}}</mat-error> <mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12"> <div class="col-12">
@ -305,13 +305,13 @@
<ng-template #actions> <ng-template #actions>
<div> <div>
<button mat-raised-button class="template_action_btn mr-3" (click)="cancel()">{{'DATASET-WIZARD.ACTIONS.CLOSE' | translate}}</button> <button mat-raised-button class="template_action_btn mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
<!-- <button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1" [disabled]="!formGroup.valid" mat-raised-button class="template_action_btn save-btn" type="button"> --> <!-- <button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1" [disabled]="!formGroup.valid" mat-raised-button class="template_action_btn save-btn" type="button"> -->
<button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1" mat-raised-button class="template_action_btn save-btn" type="button"> <button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1" mat-raised-button class="template_action_btn save-btn" type="button">
<span class="d-flex flex-row row"> <span class="d-flex flex-row row">
<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' |translate}}</span> <span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
<mat-divider [vertical]="true"></mat-divider> <mat-divider [vertical]="true"></mat-divider>
<span class="align-items-center justify-content-center col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave"> <span class="align-items-center justify-content-center mw-100 col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave">
<mat-icon>expand_more</mat-icon> <mat-icon>expand_more</mat-icon>
</span> </span>
</span> </span>
@ -326,7 +326,7 @@
<mat-icon (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menuUpdate">expand_more</mat-icon> <mat-icon (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menuUpdate">expand_more</mat-icon>
</button> --> </button> -->
<button *ngIf="formGroup.disabled || formGroup.get('status').value==1" [@finalize_btn] mat-raised-button class="template_action_btn save-btn" (click)="formSubmit()"> <button *ngIf="formGroup.disabled || formGroup.get('status').value==1" [@finalize_btn] mat-raised-button class="template_action_btn save-btn" (click)="formSubmit()">
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.UPDATE' |translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.UPDATE' | translate}}
<mat-icon (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menuUpdate">expand_more</mat-icon> <mat-icon (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menuUpdate">expand_more</mat-icon>
</button> </button>
<mat-menu #menuUpdate="matMenu"> <mat-menu #menuUpdate="matMenu">
@ -335,7 +335,7 @@
</mat-menu> </mat-menu>
<button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1 && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="finalize-btn ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="updateAndFinalize(true)"> <button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1 && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="finalize-btn ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="updateAndFinalize(true)">
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' |translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' | translate}}
</button> </button>
</div> </div>
</ng-template> </ng-template>

4
dmp-frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html
View File

@ -55,7 +55,7 @@
<div class="d-flex" style="align-items: center;"> <div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon> <mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection --> <!-- Create new subsection -->
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' | translate}}
</div> </div>
@ -101,7 +101,7 @@
<div class="d-flex" style="align-items: center;"> <div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon> <mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection --> <!-- Create new subsection -->
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' |translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-NEW-SUBSECTION' | translate}}
</div> </div>
</button> </button>

4
dmp-frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
View File

@ -2,7 +2,7 @@
<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button"> <button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon> <mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}} {{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.SEARCH-FILTER-BTN' | translate}}
</button> </button>
@ -12,7 +12,7 @@
<div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center justify-content-between">
<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4> <h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
<button color="accent" mat-button (click)="clearFilters()"> <button color="accent" mat-button (click)="clearFilters()">
{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}} {{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CLEAR-ALL-FILTERS' | translate}}
</button> </button>
</div> </div>

491
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
View File

@ -1,5 +1,5 @@
<!-- <div class="main-content"> --> <!-- <div class="main-content"> -->
<div class="container-fluid dmp-blueprint-editor"> <div class="container-fluid dmp-blueprint-editor d-flex align-items-center">
<div class="row align-items-center mb-4" *ngIf="formGroup"> <div class="row align-items-center mb-4" *ngIf="formGroup">
<div class="col-auto"> <div class="col-auto">
<h3 *ngIf="!isFinalized && !isNewVersion">{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h3> <h3 *ngIf="!isFinalized && !isNewVersion">{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h3>
@ -27,263 +27,280 @@
<button mat-button class="finalize-btn" (click)="finalize()" [disabled]="!this.isFormValid()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button> <button mat-button class="finalize-btn" (click)="finalize()" [disabled]="!this.isFormValid()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
</div> </div>
</div> </div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()"> <div class="">
<mat-card> <form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<!-- <mat-card-header> <mat-card class="pt-3 pb-3">
<mat-card-title *ngIf="isNew"> <!-- <mat-card-header>
<h4>{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h4> <mat-card-title *ngIf="isNew">
</mat-card-title> <h4>{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h4>
<mat-card-title *ngIf="!isNew"> </mat-card-title>
<h4>{{formGroup.get('label').value}}</h4> <mat-card-title *ngIf="!isNew">
</mat-card-title> <h4>{{formGroup.get('label').value}}</h4>
</mat-card-header> --> </mat-card-title>
<mat-card-content> </mat-card-header> -->
<div class="row"> <mat-card-content>
<div class="col-6"> <div class="row">
<mat-form-field class="w-100"> <div class="col-6">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.NAME' | translate}}</mat-label> <mat-form-field class="w-100">
<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error> <input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
</mat-form-field> <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div> </mat-form-field>
<h4 class="col-12">{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTIONS' | translate}}</h4> </div>
<h4 class="col-12">{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTIONS' | translate}}</h4>
<div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)"> <div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)">
<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled"> <div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled">
<div class="col-12"> <div class="col-12">
<mat-card> <mat-card class="pt-3 pb-3">
<mat-card-header> <mat-card-header>
<div class="row mb-3 d-flex align-items-center"> <div class="row mb-3 d-flex align-items-center">
<div class="col-auto d-flex"> <div class="col-auto d-flex">
<mat-card-title>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-PREFIX' | translate}} {{sectionIndex + 1}}</mat-card-title> <mat-card-title>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-PREFIX' | translate}} {{sectionIndex + 1}}</mat-card-title>
</div> </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 d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
<div class="col-auto d-flex"> <div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-SECTION' | translate}}" (click)="removeSection(sectionIndex)" [disabled]="formGroup.disabled"> <button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-SECTION' | translate}}" (click)="removeSection(sectionIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div>
</div> </div>
</div> </mat-card-header>
</mat-card-header> <mat-card-content>
<mat-card-content> <div class="row">
<div class="row"> <div class="col-6">
<div class="col-6"> <mat-form-field class="w-100">
<mat-form-field class="w-100"> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-NAME' | translate}}</mat-label>
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-NAME' | translate}}</mat-label> <input matInput type="text" name="label" [formControl]="section.get('label')" required>
<input matInput type="text" name="label" [formControl]="section.get('label')" required> <mat-error *ngIf="section.get('label').hasError('backendError')">{{section.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="section.get('label').hasError('backendError')">{{section.get('label').getError('backendError').message}}</mat-error> <mat-error *ngIf="section.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-form-field>
</mat-form-field> </div>
</div> <div class="col-6">
<div class="col-6"> <mat-form-field class="w-100">
<mat-form-field class="w-100"> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-DESCRIPTION' | translate}}</mat-label>
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-DESCRIPTION' | translate}}</mat-label> <input matInput type="text" name="description" [formControl]="section.get('description')">
<input matInput type="text" name="description" [formControl]="section.get('description')"> <mat-error *ngIf="section.get('description').hasError('backendError')">{{section.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="section.get('description').hasError('backendError')">{{section.get('description').getError('backendError').message}}</mat-error> <mat-error *ngIf="section.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-form-field>
</mat-form-field> </div>
</div> <div class="col-auto mb-3">
<div class="col-auto"> <button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="action-btn" type="button" (click)="addField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button> </div>
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="d-flex align-items-center mb-4" [cdkDragDisabled]="formGroup.disabled">
<div class="d-flex align-items-baseline">
<div class="mr-1">
<span style="font-size: 15px;">{{fieldIndex + 1}}</span>
</div>
<div [hidden]="viewOnly" class="mr-1">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="mr-1"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
</div>
<div class="d-flex flex-wrap mt-1">
<div class="col-auto w-100 mt-3">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option>
</mat-select>
<mat-error *ngIf="field.get('category').hasError('backendError')">{{field.get('category').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
</mat-select>
<mat-error *ngIf="field.get('systemFieldType').hasError('backendError')">{{field.get('systemFieldType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('dataType')">
<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
{{enumUtils.toDmpBlueprintExtraFieldDataTypeString(extraFieldDataType)}}
</mat-option>
</mat-select>
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')">
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto w-100" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="w-100 col-auto" *ngIf="field.get('category').value != null">
<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</div>
<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>
</div>
</div> </div>
<div cdkDropList class="col-12" (cdkDropListDropped)="dropFields($event, sectionIndex)"> <div class="col-12">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled"> <div class="row d-flex flex-column">
<div class="col-auto"> <div class="col-auto">
<span style="font-size: 15px;">{{fieldIndex + 1}}</span> <mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)">
{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
</mat-checkbox>
<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error>
<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div> </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" *ngIf="section.get('hasTemplates').value == true">
<div class="col-auto"> <button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option>
</mat-select>
<mat-error *ngIf="field.get('category').hasError('backendError')">{{field.get('category').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
</mat-select>
<mat-error *ngIf="field.get('systemFieldType').hasError('backendError')">{{field.get('systemFieldType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('dataType')">
<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
{{enumUtils.toDmpBlueprintExtraFieldDataTypeString(extraFieldDataType)}}
</mat-option>
</mat-select>
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')">
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col" *ngIf="field.get('category').value != null">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto" *ngIf="field.get('category').value != null">
<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div [hidden]="viewOnly" class="col-auto">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div> </div>
</div> </div>
<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>
</div> </div>
</div>
</mat-card-content>
<div class="col-12"> <div cdkDropList class="col-12" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
<div class="row"> <div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled">
<div class="col-auto">
<mat-checkbox [formControl]="section.get('hasTemplates')" (change)="removeAllDescriptionTemplates($event, sectionIndex)"> <div class="d-flex align-items-baseline">
{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}} <div class="mr-1">
<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error> <span style="font-size: 15px;">{{descriptionTemplateIndex + 1}}</span>
<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </div>
</mat-checkbox> <div class="mr-1">
</div> <button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
<div class="col-auto" *ngIf="section.get('hasTemplates').value == true"> <mat-icon>delete</mat-icon>
<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button> </button>
</div> </div>
</div> <div class="mr-1"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
</div> </div>
<div class="d-flex flex-wrap mt-1">
<div class="col-auto w-100 mt-3">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete>
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto w-100">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
<input matInput class="mt-3" type="text" name="label" [formControl]="descriptionTemplate.get('label')">
<mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
<input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
<input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<div cdkDropList class="col-12" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)"> </div>
<div *ngFor="let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled"> <mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
<div class="col-auto">
<span style="font-size: 15px;">{{descriptionTemplateIndex + 1}}</span>
</div> </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 *ngIf="section.get('hasTemplates').value == true">
<div class="col"> <mat-form-field class="col-6 mt-3">
<mat-form-field class="w-100"> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label> <app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
<app-single-auto-complete [formControl]="descriptionTemplate.get('descriptionTemplateGroupId')" [hidePlaceholder]="true" [configuration]="descriptionTempalteGroupSingleAutocompleteConfiguration" (optionActionClicked)="onPreviewDescriptionTemplate($event, i)"></app-single-auto-complete> <mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')">{{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col">
<mat-form-field class="w-100"> </mat-card-content>
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="descriptionTemplate.get('label')">
<mat-error *ngIf="descriptionTemplate.get('label').hasError('backendError')">{{descriptionTemplate.get('label').getError('backendError').message}}</mat-error> </mat-card>
<mat-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </div>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}</mat-label>
<input matInput type="number" min="0" name="minMultiplicity" [formControl]="descriptionTemplate.get('minMultiplicity')">
<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('backendError')">{{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('minMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}</mat-label>
<input matInput type="number" min="1" name="maxMultiplicity" [formControl]="descriptionTemplate.get('maxMultiplicity')">
<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('backendError')">{{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}</mat-error>
<mat-error *ngIf="descriptionTemplate.get('maxMultiplicity').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" (click)="removeDescriptionTemplate(sectionIndex, descriptionTemplateIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
</div>
<div *ngIf="section.get('hasTemplates').value == true">
<mat-form-field class="col-6">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}</mat-label>
<app-multiple-auto-complete [formControl]="section.get('prefillingSourcesIds')" [configuration]="prefillingSourceService.multipleAutocompleteConfiguration"></app-multiple-auto-complete>
<mat-error *ngIf="section.get('prefillingSourcesIds').hasError('backendError')">{{section.get('prefillingSourcesIds').getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</mat-card>
</div> </div>
</div> </div>
</div>
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addSection()" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button> <button mat-button class="action-btn" type="button" (click)="addSection()" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
<mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="row mt-4">
<div class="row mt-4"> <div class="col-auto">
<div class="col-auto"> <button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button> </div>
<div class="col"></div>
<div class="col-auto">
<button mat-button class="action-btn" [disabled]="!canSave" type="submit">
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div> </div>
<div class="col"></div> </mat-card-content>
<div class="col-auto"> </mat-card>
<button mat-button class="action-btn" [disabled]="!canSave" type="submit"> </form>
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}} </div>
</button> </div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>

17
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
View File

@ -1,7 +1,18 @@
::ng-deep label {
// display:block !important;
margin-bottom: 0 !important;
}
.dmp-blueprint-editor { .dmp-blueprint-editor {
margin-top: 1.3rem; // margin-top: 1.3rem;
margin-left: 1em; // margin-left: 1em;
margin-right: 3em; // margin-right: 3em;
// padding-top: 1.3rem;
// padding-left: 1em;
// padding-right: 3em;
// box-sizing: border-box !important;
.remove { .remove {
background-color: white; background-color: white;

22
dmp-frontend/src/assets/i18n/en.json
View File

@ -202,6 +202,9 @@
"NO-DATA-TO-DISPLAY": "No data to display" "NO-DATA-TO-DISPLAY": "No data to display"
}, },
"COMMONS": { "COMMONS": {
"ERRORS": {
"DEFAULT": ""
},
"LISTING-COMPONENT": { "LISTING-COMPONENT": {
"SEARCH-FILTER-BTN": "Filter Results", "SEARCH-FILTER-BTN": "Filter Results",
"CLEAR-ALL-FILTERS": "clear all filters", "CLEAR-ALL-FILTERS": "clear all filters",
@ -373,6 +376,9 @@
"NOTIFICATIONS":"Notifications", "NOTIFICATIONS":"Notifications",
"PREFILLING-SOURCES":"Prefilling Sources" "PREFILLING-SOURCES":"Prefilling Sources"
}, },
"DESCRIPTION-TEMPLATE-PREVIEW" : {
"TEMPLATE": "Template"
},
"DESCRIPTION-TEMPLATE-EDITOR": { "DESCRIPTION-TEMPLATE-EDITOR": {
"TITLE": { "TITLE": {
"NEW": "New API Client", "NEW": "New API Client",
@ -394,6 +400,8 @@
"DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.", "DATASET-TEMPLATE-DESCRIPTION-HINT": "A brief description of what the Dataset is about, it's scope and objectives.",
"DESCRIPTION-TEMPLATE-TYPE": "Description template type", "DESCRIPTION-TEMPLATE-TYPE": "Description template type",
"DESCRIPTION-TEMPLATE-SELECT-TYPE": "Select a type", "DESCRIPTION-TEMPLATE-SELECT-TYPE": "Select a type",
"DATASET-TEMPLATE-LANGUAGE-HINT": "",
"DATASET-TEMPLATE-TYPE-HINT": "",
"DATASET-TEMPLATE-LANGUAGE": "Description template language", "DATASET-TEMPLATE-LANGUAGE": "Description template language",
"DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language", "DATASET-TEMPLATE-SELECT-LANGUAGE": "Select a language",
"DATASET-TEMPLATE-USERS": "Editors", "DATASET-TEMPLATE-USERS": "Editors",
@ -675,6 +683,9 @@
"VALIDATE": "Validate", "VALIDATE": "Validate",
"PREVIEW-AND-FINALIZE": "Preview & Finalize", "PREVIEW-AND-FINALIZE": "Preview & Finalize",
"BACK-TO-TOP": "Back to top", "BACK-TO-TOP": "Back to top",
"NEXT": "Next",
"CLOSE": "Close",
"PREVIOUS": "Previous",
"FIELD": { "FIELD": {
"MAKE-IT-REQUIRED": "Make input required", "MAKE-IT-REQUIRED": "Make input required",
"ADD-VISIBILITY-RULE": "Make Conditional Question", "ADD-VISIBILITY-RULE": "Make Conditional Question",
@ -1077,6 +1088,10 @@
"DISCARD": "Discard" "DISCARD": "Discard"
} }
}, },
"DESCRIPTION-COPY-DIALOG": {
"TITLE": "Copy Description to DMP",
"PLACEHOLDER": "Search DMP"
},
"PREFILL-DESCRIPTION-DIALOG": { "PREFILL-DESCRIPTION-DIALOG": {
"TITLE": "Initialize your Dataset", "TITLE": "Initialize your Dataset",
"OR": "OR", "OR": "OR",
@ -1104,6 +1119,9 @@
"DESCRIPTION-TEMPLATE-LISTING": { "DESCRIPTION-TEMPLATE-LISTING": {
"TITLE": "Description Templates", "TITLE": "Description Templates",
"CREATE-DESCRIPTION-TEMPLATE": "Create Description Template", "CREATE-DESCRIPTION-TEMPLATE": "Create Description Template",
"MESSAGES": {
"TEMPLATE-UPLOAD-SUCCESS":"Template successfully uploaded"
},
"FIELDS": { "FIELDS": {
"NAME": "Name", "NAME": "Name",
"DESCRIPTION": "Description", "DESCRIPTION": "Description",
@ -1160,7 +1178,9 @@
"IS-ACTIVE": "Is Active", "IS-ACTIVE": "Is Active",
"STATUS": "Status", "STATUS": "Status",
"CANCEL": "Cancel", "CANCEL": "Cancel",
"APPLY-FILTERS": "Apply filters" "APPLY-FILTERS": "Apply filters",
"CLEAR-ALL-FILTERS": "clear all filters",
"SEARCH-FILTER-BTN": "Filter Results"
}, },
"CONFIRM-DELETE-DIALOG": { "CONFIRM-DELETE-DIALOG": {
"MESSAGE": "Would you like to delete this Description Type?", "MESSAGE": "Would you like to delete this Description Type?",

10
dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss
View File

@ -1,4 +1,14 @@
// ::ng-deep .mat-dialog-container {
// overflow: hidden;
// padding: 20px;
// border-radius: 125px;
// }
.confirmation-dialog { .confirmation-dialog {
padding: 24px;
overflow: hidden;
.confirmation { .confirmation {
padding-bottom: 20px; padding-bottom: 20px;
} }