argos/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.compon...

263 lines
18 KiB
HTML
Raw Normal View History

2023-10-24 09:40:26 +02:00
<!-- <div class="main-content"> -->
<div class="container-fluid dmp-blueprint-editor">
<div class="row align-items-center mb-4" *ngIf="formGroup">
<div class="col-auto">
<h3 *ngIf="isNew && !isClone">{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h3>
<h3 *ngIf="isNew && isClone">
<span>{{'DMP-BLUEPRINT-EDITOR.TITLE.CLONE' | translate}}</span>
{{formGroup.get('label').value}}
</h3>
<h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
2021-06-22 15:48:46 +02:00
</div>
2023-10-24 09:40:26 +02:00
<div class="col"></div>
<div class="col-auto" *ngIf="!isNew">
<button mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="formGroup.get('status').value==1">
<button mat-button class="finalize-btn" (click)="downloadXML()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div>
<div *ngIf="formGroup.get('status').value!=1" class="col-auto">
<button mat-button class="finalize-btn" (click)="finalize()" [disabled]="!this.isFormValid()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
</div>
</div>
2023-10-25 16:47:48 +02:00
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
2023-10-24 09:40:26 +02:00
<mat-card>
<!-- <mat-card-header>
2019-06-05 16:07:36 +02:00
<mat-card-title *ngIf="isNew">
<h4>{{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}</h4>
2019-06-05 16:07:36 +02:00
</mat-card-title>
<mat-card-title *ngIf="!isNew">
<h4>{{formGroup.get('label').value}}</h4>
</mat-card-title>
</mat-card-header> -->
2023-10-24 09:40:26 +02:00
<mat-card-content>
<div class="row">
2023-10-25 16:47:48 +02:00
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
2024-01-18 10:59:42 +01:00
<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>
2023-10-25 16:47:48 +02:00
</mat-form-field>
</div>
<h4 class="col-12">{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTIONS' | translate}}</h4>
2023-10-24 09:40:26 +02:00
<div class="col-12" cdkDropList (cdkDropListDropped)="dropSections($event)">
2023-10-27 17:56:19 +02:00
<div *ngFor="let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class="row mb-3" cdkDrag [cdkDragDisabled]="formGroup.disabled">
2023-10-24 09:40:26 +02:00
<div class="col-12">
<mat-card>
<mat-card-header>
2023-10-25 16:47:48 +02:00
<div class="row mb-3 d-flex align-items-center">
<div class="col-auto d-flex">
<mat-card-title>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-PREFIX' | translate}} {{sectionIndex + 1}}</mat-card-title>
</div>
2024-01-25 17:08:47 +01:00
<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
2023-10-27 17:56:19 +02:00
<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">
<mat-icon>delete</mat-icon>
</button>
2023-10-25 16:47:48 +02:00
</div>
</div>
2023-10-24 09:40:26 +02:00
</mat-card-header>
2023-10-25 16:47:48 +02:00
<mat-card-content>
<div class="row">
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-NAME' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="section.get('label')" required>
2024-01-18 10:59:42 +01:00
<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>
2023-10-25 16:47:48 +02:00
</mat-form-field>
</div>
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SECTION-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="section.get('description')">
2024-01-18 10:59:42 +01:00
<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>
2023-10-25 16:47:48 +02:00
</mat-form-field>
</div>
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELDS' | translate}}</mat-label>
2024-01-25 17:08:47 +01:00
<mat-select multiple [(ngModel)]="selectedSystemFields" [disabled]="formGroup.disabled" [ngModelOptions]="{standalone: true}" (selectionChange)= "addSystemField(sectionIndex, $event)">
2023-10-25 16:47:48 +02:00
<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-auto">
2023-10-27 17:56:19 +02:00
<button mat-button class="action-btn" type="button" (click)="addExtraField(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-EXTRA-FIELD' | translate}}</button>
2023-10-25 16:47:48 +02:00
</div>
2023-10-24 09:40:26 +02:00
2023-10-25 16:47:48 +02:00
<div cdkDropList class="col-12" (cdkDropListDropped)="dropFields($event, sectionIndex)">
2023-10-27 17:56:19 +02:00
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled">
2023-10-24 09:40:26 +02:00
2023-10-25 16:47:48 +02:00
<div class="col-auto">
<span style="font-size: 15px;">{{fieldIndex + 1}}</span>
</div>
2024-01-29 12:13:30 +01:00
<div class="col-auto d-flex"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div>
2023-10-25 16:47:48 +02:00
<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' | translate}}</mat-label>
<input matInput disabled value="{{enumUtils.toDmpBlueprintSystemFieldTypeString(field.get('systemFieldType').value)}}" type="text" name="name">
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
2024-01-29 12:13:30 +01:00
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
2023-10-25 16:47:48 +02:00
</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.FIELD-DATA-TYPE' | translate}}</mat-label>
2024-01-25 17:08:47 +01:00
<mat-select [formControl]="field.get('dataType')">
2023-10-25 16:47:48 +02:00
<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
{{enumUtils.toDmpBlueprintExtraFieldDataTypeString(extraFieldDataType)}}
</mat-option>
</mat-select>
2024-01-18 10:59:42 +01:00
<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>
2023-10-25 16:47:48 +02:00
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
2024-01-25 17:08:47 +01:00
<input matInput type="text" name="label" [formControl]="field.get('label')">
2024-01-18 10:59:42 +01:00
<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>
2023-10-25 16:47:48 +02:00
</mat-form-field>
</div>
<div class="col">
<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')">
2024-01-18 10:59:42 +01:00
<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
2024-01-29 12:13:30 +01:00
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
2023-10-25 16:47:48 +02:00
</mat-form-field>
</div>
<div class="col">
<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')">
2024-01-18 10:59:42 +01:00
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
2024-01-29 12:13:30 +01:00
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
2023-10-25 16:47:48 +02:00
</mat-form-field>
</div>
2023-10-27 17:56:19 +02:00
<div class="col-auto">
<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.TEXT || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.HTML_TEXT" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
2024-01-18 10:59:42 +01:00
<mat-error *ngIf="field.get('systemFieldType').hasError('backendError')">{{field.get('systemFieldType').getError('backendError').message}}</mat-error>
2024-01-29 12:13:30 +01:00
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
2023-10-25 16:47:48 +02:00
</div>
2023-10-27 17:56:19 +02:00
<div *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.SYSTEM" [hidden]="viewOnly" class="col-auto">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-SYSTEM-FIELD' | translate}}" (click)="removeSystemField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
2023-10-25 16:47:48 +02:00
</div>
2023-10-27 17:56:19 +02:00
<div *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.EXTRA" [hidden]="viewOnly" class="col-auto">
<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-EXTRA-FIELD' | translate}}" (click)="removeExtraField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
2023-10-24 09:40:26 +02:00
</div>
2024-01-29 12:13:30 +01:00
<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>
2023-10-24 09:40:26 +02:00
</div>
</div>
2023-10-25 16:47:48 +02:00
</mat-card-content>
2023-10-24 09:40:26 +02:00
<div class="col-12">
<div class="row">
2023-10-25 16:47:48 +02:00
<div class="col-auto">
2024-01-29 12:13:30 +01:00
<mat-checkbox [formControl]="section.get('hasTemplates')" (change) = "removeAllDescriptionTemplates($event, sectionIndex)">
2023-10-25 16:47:48 +02:00
{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}
<mat-error *ngIf="section.get('hasTemplates').hasError('backendError')">{{section.get('hasTemplates').getError('backendError').message}}</mat-error>
2024-01-29 12:13:30 +01:00
<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
2023-10-24 09:40:26 +02:00
</mat-checkbox>
</div>
2024-01-29 12:13:30 +01:00
<div class="col-auto" *ngIf="section.get('hasTemplates').value == true">
<button mat-button class="action-btn" type="button" (click)="addDescriptionTemplate(sectionIndex)" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
</div>
2023-10-24 09:40:26 +02:00
</div>
</div>
2024-01-29 12:13:30 +01:00
<div cdkDropList class="col-12" (cdkDropListDropped)="dropDescriptionTemplates($event, sectionIndex)">
<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">
<span style="font-size: 15px;">{{descriptionTemplateIndex + 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">
2023-10-25 16:47:48 +02:00
<mat-form-field class="w-100">
2024-01-31 10:27:36 +01:00
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
2024-01-29 12:13:30 +01:00
<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>
2023-10-25 16:47:48 +02:00
</div>
2024-01-29 12:13:30 +01:00
<div class="col">
<mat-form-field class="w-100">
<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-error *ngIf="descriptionTemplate.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
2024-01-29 12:13:30 +01:00
<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>
2024-01-31 10:27:36 +01:00
<mat-error *ngIf="section.get('descriptionTemplates').hasError('backendError')">{{section.get('descriptionTemplates').getError('backendError').message}}</mat-error>
2023-10-24 09:40:26 +02:00
</div>
</mat-card>
2023-10-25 16:47:48 +02:00
</div>
2019-01-18 18:03:45 +01:00
</div>
2024-01-25 17:08:47 +01:00
<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>
2019-01-18 18:03:45 +01:00
</div>
2023-10-24 09:40:26 +02:00
<div class="col-12">
<div class="row">
<div class="col-auto">
2023-10-27 17:56:19 +02:00
<button mat-button class="action-btn" type="button" (click)="addSection()" [disabled]="formGroup.disabled">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
2023-10-24 09:40:26 +02:00
</div>
2019-06-05 16:07:36 +02:00
</div>
2019-01-18 18:03:45 +01:00
</div>
2023-10-24 09:40:26 +02:00
</div>
<div class="row mt-4">
<div class="col-auto">
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col"></div>
2023-10-27 17:56:19 +02:00
<div class="col-auto">
<button mat-button class="action-btn" [disabled]="formGroup.disabled" type="submit">
2023-10-24 09:40:26 +02:00
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
2023-10-25 16:47:48 +02:00
</div>