395 lines
20 KiB
HTML
395 lines
20 KiB
HTML
<div class="main-content">
|
|
<div class="container-fluid dmp-profile-editor">
|
|
<div class="row align-items-center mb-4" *ngIf="formGroup">
|
|
<div class="col-auto">
|
|
<h3 *ngIf="isNew && !isClone">{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h3>
|
|
<h3 *ngIf="isNew && isClone">
|
|
<span>{{'DMP-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}</span>
|
|
{{formGroup.get('label').value}}
|
|
</h3>
|
|
<h3 *ngIf="!isNew">{{formGroup.get('label').value}}</h3>
|
|
</div>
|
|
<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-PROFILE-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-PROFILE-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-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
|
|
</div>
|
|
</div>
|
|
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
|
<mat-card style="padding: 2em;">
|
|
<!-- <mat-card-header>
|
|
<mat-card-title *ngIf="isNew">
|
|
<h4>{{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}</h4>
|
|
</mat-card-title>
|
|
<mat-card-title *ngIf="!isNew">
|
|
<h4>{{formGroup.get('label').value}}</h4>
|
|
</mat-card-title>
|
|
</mat-card-header> -->
|
|
<mat-card-content>
|
|
<div class="row" style="gap:1em">
|
|
<mat-form-field class="col-lg-6" >
|
|
<mat-label>Name</mat-label>
|
|
<input matInput type="text" name="label" formControlName="label" required>
|
|
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
<h4 class="col-12">Sections</h4>
|
|
|
|
<ng-container formGroupName="definition">
|
|
<div formArrayName="sections" style="width: 100%;" cdkDropList (cdkDropListDropped)="dropSections($event)">
|
|
<div *ngFor="let section of sectionsArray().controls; let sectionIndex=index;" class="section-input" cdkDrag [cdkDragDisabled]="viewOnly">
|
|
<ng-container [formGroupName]="sectionIndex">
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<mat-card class="col-11" style="width: 100%; margin-bottom: 1%;">
|
|
<mat-card-header>
|
|
<mat-card-title>Section {{sectionIndex + 1}}</mat-card-title>
|
|
<mat-icon cdkDragHandle style="cursor: move; color: #129d99;">drag_indicator</mat-icon>
|
|
</mat-card-header>
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field>
|
|
<mat-label>Section name</mat-label>
|
|
<input matInput type="text" name="label" formControlName="label" required>
|
|
<mat-error *ngIf="section.get('label').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field>
|
|
<mat-label>Section description</mat-label>
|
|
<input matInput type="text" name="description" formControlName="description">
|
|
<mat-error *ngIf="section.get('description').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="row">
|
|
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field>
|
|
<mat-label>System fields</mat-label>
|
|
<mat-select multiple [disabled]="viewOnly" [value]="systemFieldListPerSection[sectionIndex]">
|
|
<mat-option *ngFor="let f of fieldList" [disabled]="systemFieldDisabled(f.type, sectionIndex)" [value]="f.type" (click)="selectedFieldType(f.type, sectionIndex)">{{f.label}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="fieldsArray(sectionIndex).hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<button mat-button class="action-btn" type="button" (click)="addExtraField(sectionIndex)" [disabled]="viewOnly">Add extra field</button>
|
|
<!-- <button mat-button class="action-btn" style="margin-left: 3%;" type="button" (click)="addExtraField(sectionIndex)">Add description templates</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
|
|
<div formArrayName="fields" cdkDropList (cdkDropListDropped)="drop($event, sectionIndex)">
|
|
<div *ngFor="let field of fieldsArray(sectionIndex).controls; let fieldIndex=index;" cdkDrag [cdkDragDisabled]="viewOnly">
|
|
<ng-container [formGroupName]="fieldIndex">
|
|
<div class="col-12" *ngIf="fieldsArray(sectionIndex).length > 0">
|
|
<div class="row">
|
|
<div class="col-xx-1" style="padding-left: 0;">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<span style="font-size: 15px;">{{fieldIndex + 1}}</span>
|
|
</div>
|
|
<div class="col-8">
|
|
<mat-icon cdkDragHandle style="cursor: move; color: #129d99;">drag_indicator</mat-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ng-container *ngIf="field.get('category').value === 0 || field.get('category').value === 'SYSTEM'">
|
|
<div class="col-2" >
|
|
<mat-form-field>
|
|
<mat-label>System Field</mat-label>
|
|
<input matInput disabled value="{{transfromEnumToString(field.get('type').value)}}" type="text" name="name">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-2">
|
|
<mat-form-field>
|
|
<mat-label>Label</mat-label>
|
|
<input matInput type="text" name="label" formControlName="label" required>
|
|
<mat-error *ngIf="field.get('label').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-2">
|
|
<mat-form-field>
|
|
<mat-label>Placeholder</mat-label>
|
|
<input matInput type="text" name="placeholder" formControlName="placeholder">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-2">
|
|
<mat-form-field>
|
|
<mat-label>Description</mat-label>
|
|
<input matInput type="text" name="description" formControlName="description">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="centered-row-item col-1">
|
|
<mat-checkbox [disabled]="field.get('type').value === 0 || field.get('type').value === 1" formControlName="required">Required</mat-checkbox>
|
|
</div>
|
|
<div [hidden]="viewOnly" class="field-delete col-1" (click)="removeSystemFieldWithIndex(sectionIndex, fieldIndex)">
|
|
<mat-icon class="field-delete-icon">delete</mat-icon>
|
|
<span class="field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="field.get('category').value === 1 || field.get('category').value === 'EXTRA'">
|
|
<div class="col-2">
|
|
<mat-form-field>
|
|
<mat-label>Type</mat-label>
|
|
<mat-select placeholder="Type" formControlName="type" required>
|
|
<mat-option *ngFor="let extraFieldType of getExtraFieldTypes()" [value]="extraFieldType">
|
|
{{getExtraFieldTypeValue(extraFieldType)}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="field.get('type').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-2">
|
|
<mat-form-field>
|
|
<mat-label>Label</mat-label>
|
|
<input matInput type="text" name="label" formControlName="label" required>
|
|
<mat-error *ngIf="field.get('label').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-2">
|
|
<mat-form-field>
|
|
<mat-label>Placeholder</mat-label>
|
|
<input matInput type="text" name="placeholder" formControlName="placeholder">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-2">
|
|
<mat-form-field>
|
|
<mat-label>Description</mat-label>
|
|
<input matInput type="text" name="description" formControlName="description">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="centered-row-item col-1">
|
|
<mat-checkbox formControlName="required">
|
|
Required
|
|
</mat-checkbox>
|
|
</div>
|
|
<div [hidden]="viewOnly" class="field-delete col-1" (click)="removeExtraField(sectionIndex, fieldIndex)">
|
|
<mat-icon class="field-delete-icon">delete</mat-icon>
|
|
<span class="field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
|
</div>
|
|
</ng-container>
|
|
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-checkbox formControlName="hasTemplates" (change)="checkForProfiles($event, sectionIndex)">
|
|
Description Templates
|
|
</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12" *ngIf="section.get('hasTemplates').value == true">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<mat-form-field>
|
|
<mat-label>Description Templates</mat-label>
|
|
<app-multiple-auto-complete placeholder="Description Templates" [disabled]="viewOnly" [value]="descriptionTemplatesPerSection[sectionIndex]" [hidePlaceholder]="true" required='false' [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event, sectionIndex)" (optionActionClicked)="onPreviewTemplate($event, sectionIndex)" (optionSelected)="onOptionSelected($event, sectionIndex)">
|
|
</app-multiple-auto-complete>
|
|
<!-- <button matSuffix class="input-btn" (click)="allAvailableProfiles($event)">
|
|
<mat-icon class="icon-btn">view_list</mat-icon>
|
|
</button> -->
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ng-container formArrayName="descriptionTemplates">
|
|
<div *ngFor="let descriptionTemplate of descriptionTemplatesArray(sectionIndex).controls; let j=index;" class="section-input" style="width: 100%;">
|
|
<ng-container [formGroupName]="j">
|
|
<div class="col-12" *ngIf="descriptionTemplatesArray(sectionIndex).length > 0">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<mat-form-field>
|
|
<mat-label>Label</mat-label>
|
|
<input matInput type="text" value="descriptionTemplate.get('label')" name="label" formControlName="label">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-4">
|
|
<mat-form-field>
|
|
<mat-label>Min Multiplicity</mat-label>
|
|
<input matInput type="number" min="0" name="minMultiplicity" formControlName="minMultiplicity">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-4">
|
|
<mat-form-field>
|
|
<mat-label>Max Multiplicity</mat-label>
|
|
<input matInput type="number" min="1" name="maxMultiplicity" formControlName="maxMultiplicity">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
</mat-card>
|
|
<div class="col-1">
|
|
<div class="row">
|
|
<!-- <div class="col-auto dlt-section-btn">
|
|
<button mat-button class="action-btn" type="button" click="removeSection(sectionIndex)">Delete</button>
|
|
</div> -->
|
|
<div [hidden]="viewOnly" class="action-list-item col-auto dlt-section-btn" (click)="removeSection(sectionIndex)" [disabled]="viewOnly">
|
|
<mat-icon class="action-list-icon">delete</mat-icon>
|
|
<span class="action-list-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<button mat-button class="action-btn" type="button" (click)="addSection()" [disabled]="viewOnly">Add section</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="col-12">
|
|
<div class="row" *ngFor="let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index">
|
|
<div class="col-10">
|
|
<div class="row">
|
|
<mat-form-field class="col">
|
|
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" [formControl]="fieldFormGroup.get('label')"
|
|
required>
|
|
<mat-error *ngIf="fieldFormGroup.get('label').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
<mat-error *ngIf="fieldFormGroup.get('label').hasError('backendError')">
|
|
{{fieldFormGroup.get('label').getError('backendError').message}}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field class="col">
|
|
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}" [formControl]="fieldFormGroup.get('type')" required>
|
|
<mat-option *ngFor="let fieldType of getDMPProfileFieldTypeValues()" [value]="fieldType">
|
|
{{ getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="fieldFormGroup.get('type').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
<mat-error *ngIf="fieldFormGroup.get('type').hasError('backendError')">
|
|
{{fieldFormGroup.get('type').getError('backendError').message}}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field class="col">
|
|
<mat-select placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}" [formControl]="fieldFormGroup.get('dataType')"
|
|
required>
|
|
<mat-option *ngFor="let fieldDataType of getDMPProfileFieldDataTypeValues()" [value]="fieldDataType">
|
|
{{ getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
<mat-error *ngIf="fieldFormGroup.get('dataType').hasError('backendError')">
|
|
{{fieldFormGroup.get('dataType').getError('backendError').message}}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
<div class="centered-row-item col-auto">
|
|
<mat-checkbox [formControl]="fieldFormGroup.get('required')">
|
|
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}
|
|
</mat-checkbox>
|
|
</div>
|
|
<div *ngIf="isExternalAutocomplete(fieldFormGroup)" class="row">
|
|
<app-dmp-profile-external-autocomplete-field-editor-component [form]="fieldFormGroup">
|
|
</app-dmp-profile-external-autocomplete-field-editor-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-2">
|
|
<div class="row">
|
|
<div class="col-auto" *ngIf="!isNew">
|
|
<button mat-icon-button type="button" (click)="removeField(i)" [disabled]="viewOnly">
|
|
<mat-icon class="mat-24">delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="col-auto" *ngIf="!isNew && formGroup.get('status').value==0 && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
|
|
<button mat-mini-fab color="primary" type="button" (click)="addField()" [disabled]="viewOnly">
|
|
<mat-icon class="mat-24">add</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="col-auto" *ngIf="isNew && i != 0">
|
|
<button mat-mini-fab class="remove" type="button" (click)="removeField(i)">
|
|
<mat-icon class="mat-24">remove</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="col-auto" *ngIf="isNew && i == (formGroup.get('definition').get('fields')['controls'].length - 1)">
|
|
<button mat-mini-fab color="primary" type="button" (click)="addField()" [disabled]="viewOnly">
|
|
<mat-icon class="mat-24">add</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="row mt-4">
|
|
<div class="col-auto">
|
|
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
|
</div>
|
|
<div class="col"></div>
|
|
<!-- <div class="col-auto" *ngIf="!isNew">
|
|
<button mat-raised-button color="primary" type="button" (click)="delete()">{{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}</button>
|
|
</div>
|
|
<button mat-raised-button *ngIf="formGroup.get('status').value!=1" class="col-auto" color="primary" (click)="finalize()"
|
|
[disabled]="!formGroup.valid" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
|
|
<button mat-raised-button *ngIf="formGroup.get('status').value==1" class="col-auto" color="primary" (click)="downloadXML()"
|
|
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
|
|
<div class="col-auto" *ngIf="!viewOnly">
|
|
<button mat-raised-button color="primary" type="submit" [disabled]="!formGroup.valid">
|
|
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
</div> -->
|
|
|
|
<div class="col-auto" *ngIf="!viewOnly">
|
|
<button mat-button class="action-btn" type="submit">
|
|
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</form>
|
|
</div>
|
|
</div>
|