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

fix dmp blueprint editor screen

This commit is contained in:
Bernaldo Mihasi 2023-08-03 13:10:36 +03:00
parent b94aa51489
commit 17dbd198ad
11 changed files with 461 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/FieldModel.java Normal file
View File

@ -0,0 +1,127 @@
package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition;
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.ExtraFieldType;
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.FieldCategory;
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.SystemFieldType;
import java.util.UUID;
public class FieldModel {
private UUID id;
private FieldCategory category;
private Integer type;
private String label;
private String placeholder;
private String description;
private Integer ordinal;
private boolean required;
public UUID getId() {
return id;
}
public void setId(UUID id) {
this.id = id;
}
public FieldCategory getCategory() {
return category;
}
public void setCategory(FieldCategory category) {
this.category = category;
}
public Integer getType() {
return type;
}
public void setType(Integer type) {
this.type = type;
}
public String getLabel() {
return label;
}
public void setLabel(String label) {
this.label = label;
}
public String getPlaceholder() {
return placeholder;
}
public void setPlaceholder(String placeholder) {
this.placeholder = placeholder;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Integer getOrdinal() {
return ordinal;
}
public void setOrdinal(Integer ordinal) {
this.ordinal = ordinal;
}
public boolean isRequired() {
return required;
}
public void setRequired(boolean required) {
this.required = required;
}
public SystemField toSystemField(){
SystemField systemField = new SystemField();
if (this.category == FieldCategory.SYSTEM) {
systemField.setId(this.id);
systemField.setType(SystemFieldType.fromInteger(this.type));
systemField.setLabel(this.label);
systemField.setPlaceholder(this.placeholder);
systemField.setDescription(this.description);
systemField.setOrdinal(this.ordinal);
systemField.setRequired(this.required);
}
return systemField;
}
public FieldModel fromSystemField(SystemField systemField){
this.setId(systemField.getId());
this.setCategory(FieldCategory.SYSTEM);
this.setType(systemField.getType().getType());
this.setLabel(systemField.getLabel());
this.setPlaceholder(systemField.getPlaceholder());
this.setDescription(systemField.getDescription());
this.setOrdinal(systemField.getOrdinal());
this.setRequired(systemField.isRequired());
return this;
}
public ExtraField toExtraField(){
ExtraField extraField = new ExtraField();
if (this.category == FieldCategory.EXTRA) {
extraField.setId(this.id);
extraField.setType(ExtraFieldType.fromInteger(this.type));
extraField.setLabel(this.label);
extraField.setPlaceholder(this.placeholder);
extraField.setDescription(this.description);
extraField.setOrdinal(this.ordinal);
extraField.setRequired(this.required);
}
return extraField;
}
public FieldModel fromExtraField(ExtraField extraField){
this.setId(extraField.getId());
this.setCategory(FieldCategory.EXTRA);
this.setType(extraField.getType().getValue());
this.setLabel(extraField.getLabel());
this.setPlaceholder(extraField.getPlaceholder());
this.setDescription(extraField.getDescription());
this.setOrdinal(extraField.getOrdinal());
this.setRequired(extraField.getRequired());
return this;
}
}

37
dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/Section.java
View File

@ -2,6 +2,7 @@ package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition;
import eu.eudat.logic.utilities.builders.XmlBuilder; import eu.eudat.logic.utilities.builders.XmlBuilder;
import eu.eudat.logic.utilities.interfaces.XmlSerializable; import eu.eudat.logic.utilities.interfaces.XmlSerializable;
import eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types.FieldCategory;
import org.w3c.dom.Document; import org.w3c.dom.Document;
import org.w3c.dom.Element; import org.w3c.dom.Element;
import org.w3c.dom.Node; import org.w3c.dom.Node;
@ -10,6 +11,7 @@ import org.w3c.dom.NodeList;
import java.util.LinkedList; import java.util.LinkedList;
import java.util.List; import java.util.List;
import java.util.UUID; import java.util.UUID;
import java.util.stream.Collectors;
public class Section implements XmlSerializable<Section> { public class Section implements XmlSerializable<Section> {
@ -17,9 +19,8 @@ public class Section implements XmlSerializable<Section> {
private String label; private String label;
private String description; private String description;
private Integer ordinal; private Integer ordinal;
private List<SystemField> systemFields; private List<FieldModel> fields;
private List<DescriptionTemplate> descriptionTemplates; private List<DescriptionTemplate> descriptionTemplates;
private List<ExtraField> extraFields;
public UUID getId() { public UUID getId() {
return id; return id;
@ -49,11 +50,11 @@ public class Section implements XmlSerializable<Section> {
this.ordinal = ordinal; this.ordinal = ordinal;
} }
public List<SystemField> getSystemFields() { public List<FieldModel> getFields() {
return systemFields; return fields;
} }
public void setSystemFields(List<SystemField> systemFields) { public void setFields(List<FieldModel> fields) {
this.systemFields = systemFields; this.fields = fields;
} }
public List<DescriptionTemplate> getDescriptionTemplates() { public List<DescriptionTemplate> getDescriptionTemplates() {
@ -63,13 +64,6 @@ public class Section implements XmlSerializable<Section> {
this.descriptionTemplates = descriptionTemplates; this.descriptionTemplates = descriptionTemplates;
} }
public List<ExtraField> getExtraFields() {
return extraFields;
}
public void setExtraFields(List<ExtraField> extraFields) {
this.extraFields = extraFields;
}
@Override @Override
public Element toXml(Document doc) { public Element toXml(Document doc) {
Element rootElement = doc.createElement("section"); Element rootElement = doc.createElement("section");
@ -77,8 +71,10 @@ public class Section implements XmlSerializable<Section> {
rootElement.setAttribute("label", this.label); rootElement.setAttribute("label", this.label);
rootElement.setAttribute("description", this.description); rootElement.setAttribute("description", this.description);
rootElement.setAttribute("ordinal", String.valueOf(this.ordinal)); rootElement.setAttribute("ordinal", String.valueOf(this.ordinal));
List<FieldModel> temp = this.fields.stream().filter(f -> f.getCategory().equals(FieldCategory.SYSTEM)).collect(Collectors.toList());
List<SystemField> systemFieldsList = temp.stream().map(FieldModel::toSystemField).collect(Collectors.toList());
Element systemFields = doc.createElement("systemFields"); Element systemFields = doc.createElement("systemFields");
for (SystemField systemField : this.systemFields) { for (SystemField systemField : systemFieldsList) {
systemFields.appendChild(systemField.toXml(doc)); systemFields.appendChild(systemField.toXml(doc));
} }
rootElement.appendChild(systemFields); rootElement.appendChild(systemFields);
@ -87,8 +83,10 @@ public class Section implements XmlSerializable<Section> {
descriptionTemplates.appendChild(descriptionTemplate.toXml(doc)); descriptionTemplates.appendChild(descriptionTemplate.toXml(doc));
} }
rootElement.appendChild(descriptionTemplates); rootElement.appendChild(descriptionTemplates);
temp = this.fields.stream().filter(f -> f.getCategory().equals(FieldCategory.EXTRA)).collect(Collectors.toList());
List<ExtraField> extraFieldList = temp.stream().map(FieldModel::toExtraField).collect(Collectors.toList());
Element extraFields = doc.createElement("extraFields"); Element extraFields = doc.createElement("extraFields");
for (ExtraField extraField : this.extraFields) { for (ExtraField extraField : extraFieldList) {
extraFields.appendChild(extraField.toXml(doc)); extraFields.appendChild(extraField.toXml(doc));
} }
rootElement.appendChild(extraFields); rootElement.appendChild(extraFields);
@ -102,14 +100,15 @@ public class Section implements XmlSerializable<Section> {
this.label = item.getAttribute("label"); this.label = item.getAttribute("label");
this.description = item.getAttribute("description"); this.description = item.getAttribute("description");
this.ordinal = Integer.valueOf(item.getAttribute("ordinal")); this.ordinal = Integer.valueOf(item.getAttribute("ordinal"));
this.systemFields = new LinkedList<>(); this.fields = new LinkedList<>();
Element systemFields = (Element) XmlBuilder.getNodeFromListByTagName(item.getChildNodes(), "systemFields"); Element systemFields = (Element) XmlBuilder.getNodeFromListByTagName(item.getChildNodes(), "systemFields");
if (systemFields != null) { if (systemFields != null) {
NodeList systemFieldElements = systemFields.getChildNodes(); NodeList systemFieldElements = systemFields.getChildNodes();
for (int temp = 0; temp < systemFieldElements.getLength(); temp++) { for (int temp = 0; temp < systemFieldElements.getLength(); temp++) {
Node systemFieldElement = systemFieldElements.item(temp); Node systemFieldElement = systemFieldElements.item(temp);
if (systemFieldElement.getNodeType() == Node.ELEMENT_NODE) { if (systemFieldElement.getNodeType() == Node.ELEMENT_NODE) {
this.systemFields.add(new SystemField().fromXml((Element) systemFieldElement)); SystemField systemField = new SystemField().fromXml((Element) systemFieldElement);
this.fields.add(new FieldModel().fromSystemField(systemField));
} }
} }
} }
@ -124,14 +123,14 @@ public class Section implements XmlSerializable<Section> {
} }
} }
} }
this.extraFields = new LinkedList<>();
Element extraFields = (Element) XmlBuilder.getNodeFromListByTagName(item.getChildNodes(), "extraFields"); Element extraFields = (Element) XmlBuilder.getNodeFromListByTagName(item.getChildNodes(), "extraFields");
if (extraFields != null) { if (extraFields != null) {
NodeList extraFieldElements = extraFields.getChildNodes(); NodeList extraFieldElements = extraFields.getChildNodes();
for (int temp = 0; temp < extraFieldElements.getLength(); temp++) { for (int temp = 0; temp < extraFieldElements.getLength(); temp++) {
Node extraFieldElement = extraFieldElements.item(temp); Node extraFieldElement = extraFieldElements.item(temp);
if (extraFieldElement.getNodeType() == Node.ELEMENT_NODE) { if (extraFieldElement.getNodeType() == Node.ELEMENT_NODE) {
this.extraFields.add(new ExtraField().fromXml((Element) extraFieldElement)); ExtraField extraField = new ExtraField().fromXml((Element) extraFieldElement);
this.fields.add(new FieldModel().fromExtraField(extraField));
} }
} }
} }

27
dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/types/FieldCategory.java Normal file
View File

@ -0,0 +1,27 @@
package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition.types;
public enum FieldCategory {
SYSTEM(0),
EXTRA(1);
private Integer value;
private FieldCategory(Integer value) {
this.value = value;
}
public Integer getValue() {
return value;
}
public static FieldCategory fromInteger(Integer value) {
switch (value) {
case 0:
return SYSTEM;
case 1:
return EXTRA;
default:
throw new RuntimeException("Unsupported FieldCategory Type");
}
}
}

23
dmp-frontend/src/app/core/model/dmp/dmp-blueprint/dmp-blueprint.ts
View File

@ -17,14 +17,14 @@ export interface SectionDmpBlueprint {
label: string; label: string;
description: string; description: string;
ordinal: number; ordinal: number;
systemFields: SystemFieldInSection[]; fields: FieldInSection[];
descriptionTemplates?: DescriptionTemplatesInSection[]; descriptionTemplates?: DescriptionTemplatesInSection[];
extraFields?: ExtraFieldInSection[];
} }
export interface SystemFieldInSection { export interface FieldInSection {
id: string; id: string;
type: SystemFieldType; category: FieldCategory;
type: number;
label: string; label: string;
placeholder: string; placeholder: string;
description: string; description: string;
@ -32,6 +32,11 @@ export interface SystemFieldInSection {
ordinal: number; ordinal: number;
} }
export enum FieldCategory {
SYSTEM = 0,
EXTRA = 1
}
export enum SystemFieldType { export enum SystemFieldType {
TEXT = 0, TEXT = 0,
HTML_TEXT = 1, HTML_TEXT = 1,
@ -54,16 +59,6 @@ export interface DescriptionTemplatesInSection {
maxMultiplicity: number; maxMultiplicity: number;
} }
export interface ExtraFieldInSection {
id: string;
label: string;
description: string;
placeholder: string;
type: ExtraFieldType;
required: boolean;
ordinal: number;
}
export enum ExtraFieldType { export enum ExtraFieldType {
TEXT = 0, TEXT = 0,
RICH_TEXT = 1, RICH_TEXT = 1,

4
dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.module.ts
View File

@ -10,6 +10,7 @@ import { DialodConfirmationUploadDmpProfiles } from './listing/criteria/dialog-c
import { DmpProfileCriteriaComponent } from './listing/criteria/dmp-profile-criteria.component'; import { DmpProfileCriteriaComponent } from './listing/criteria/dmp-profile-criteria.component';
import { DmpProfileListingComponent } from './listing/dmp-profile-listing.component'; import { DmpProfileListingComponent } from './listing/dmp-profile-listing.component';
import { NgxDropzoneModule } from "ngx-dropzone"; import { NgxDropzoneModule } from "ngx-dropzone";
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({ @NgModule({
imports: [ imports: [
@ -18,7 +19,8 @@ import { NgxDropzoneModule } from "ngx-dropzone";
UrlListingModule, UrlListingModule,
ConfirmationDialogModule, ConfirmationDialogModule,
DmpProfileRoutingModule, DmpProfileRoutingModule,
NgxDropzoneModule NgxDropzoneModule,
DragDropModule
], ],
declarations: [ declarations: [
DmpProfileEditorComponent, DmpProfileEditorComponent,

89
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-blueprint-editor.model.ts
View File

@ -1,5 +1,5 @@
import { FormBuilder, FormGroup } from "@angular/forms"; import { FormBuilder, FormGroup } from "@angular/forms";
import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, ExtraFieldInSection, ExtraFieldType, SectionDmpBlueprint, SystemFieldInSection, SystemFieldType } from "@app/core/model/dmp/dmp-blueprint/dmp-blueprint"; import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, FieldCategory, FieldInSection, SectionDmpBlueprint } from "@app/core/model/dmp/dmp-blueprint/dmp-blueprint";
export class DmpBlueprintEditor { export class DmpBlueprintEditor {
public id: string; public id: string;
@ -60,7 +60,7 @@ export class SectionDmpBlueprintEditor {
public label: string; public label: string;
public description: string; public description: string;
public ordinal: number; public ordinal: number;
public systemFields: SystemFieldInSectionEditor[] = new Array<SystemFieldInSectionEditor>(); public fields: FieldInSectionEditor[] = new Array<FieldInSectionEditor>();
public descriptionTemplates: DescriptionTemplatesInSectionEditor[] = new Array<DescriptionTemplatesInSectionEditor>(); public descriptionTemplates: DescriptionTemplatesInSectionEditor[] = new Array<DescriptionTemplatesInSectionEditor>();
fromModel(item: SectionDmpBlueprint): SectionDmpBlueprintEditor { fromModel(item: SectionDmpBlueprint): SectionDmpBlueprintEditor {
@ -68,9 +68,8 @@ export class SectionDmpBlueprintEditor {
this.label = item.label; this.label = item.label;
this.description = item.description; this.description = item.description;
this.ordinal = item.ordinal; this.ordinal = item.ordinal;
if (item.systemFields) { item.systemFields.map(x => this.systemFields.push(new SystemFieldInSectionEditor().fromModel(x))); } if (item.fields) { item.fields.map(x => this.fields.push(new FieldInSectionEditor().fromModel(x))); }
if (item.descriptionTemplates) { item.descriptionTemplates.map(x => this.descriptionTemplates.push(new DescriptionTemplatesInSectionEditor().fromModel(x))); } if (item.descriptionTemplates) { item.descriptionTemplates.map(x => this.descriptionTemplates.push(new DescriptionTemplatesInSectionEditor().fromModel(x))); }
debugger;
return this; return this;
} }
@ -82,12 +81,12 @@ export class SectionDmpBlueprintEditor {
ordinal: [this.ordinal] ordinal: [this.ordinal]
}); });
const formBuilder = new FormBuilder(); const formBuilder = new FormBuilder();
const systemFieldsFormArray = new Array<FormGroup>(); const fieldsFormArray = new Array<FormGroup>();
this.systemFields.forEach(item => { this.fields.forEach(item => {
const form: FormGroup = item.buildForm(); const form: FormGroup = item.buildForm();
systemFieldsFormArray.push(form); fieldsFormArray.push(form);
}); });
formGroup.addControl('systemFields', formBuilder.array(systemFieldsFormArray)); formGroup.addControl('fields', formBuilder.array(fieldsFormArray));
const descriptionTemplatesFormArray = new Array<FormGroup>(); const descriptionTemplatesFormArray = new Array<FormGroup>();
this.descriptionTemplates.forEach(item => { this.descriptionTemplates.forEach(item => {
const form: FormGroup = item.buildForm(); const form: FormGroup = item.buildForm();
@ -98,17 +97,21 @@ export class SectionDmpBlueprintEditor {
} }
} }
export class SystemFieldInSectionEditor { export class FieldInSectionEditor {
public id: string; public id: string;
public type: SystemFieldType; public category: FieldCategory;
public type: number;
public label: string;
public placeholder: string; public placeholder: string;
public description: string; public description: string;
public required: boolean; public required: boolean;
public ordinal: number; public ordinal: number;
fromModel(item: SystemFieldInSection): SystemFieldInSectionEditor { fromModel(item: FieldInSection): FieldInSectionEditor {
this.id = item.id; this.id = item.id;
this.category = item.category;
this.type = item.type; this.type = item.type;
this.label = item.label;
this.placeholder = item.placeholder; this.placeholder = item.placeholder;
this.description = item.description; this.description = item.description;
this.required = item.required; this.required = item.required;
@ -119,7 +122,9 @@ export class SystemFieldInSectionEditor {
buildForm(): FormGroup { buildForm(): FormGroup {
const formGroup = new FormBuilder().group({ const formGroup = new FormBuilder().group({
id: [this.id], id: [this.id],
category: [this.category],
type: [this.type], type: [this.type],
label: [this.label],
placeholder: [this.placeholder], placeholder: [this.placeholder],
description: [this.description], description: [this.description],
required: [this.required], required: [this.required],
@ -157,36 +162,36 @@ export class DescriptionTemplatesInSectionEditor {
} }
} }
export class ExtraFieldsInSectionEditor { // export class ExtraFieldsInSectionEditor {
public id: string; // public id: string;
public label: string; // public label: string;
public description: string; // public description: string;
public placeholder: string; // public placeholder: string;
public type: ExtraFieldType; // public type: ExtraFieldType;
public required: boolean; // public required: boolean;
public ordinal: number; // public ordinal: number;
fromModel(item: ExtraFieldInSection): ExtraFieldsInSectionEditor { // fromModel(item: ExtraFieldInSection): ExtraFieldsInSectionEditor {
this.id = item.id; // this.id = item.id;
this.label = item.label; // this.label = item.label;
this.description = item.description; // this.description = item.description;
this.placeholder = item.placeholder; // this.placeholder = item.placeholder;
this.type = item.type; // this.type = item.type;
this.required = item.required; // this.required = item.required;
this.ordinal = item.ordinal; // this.ordinal = item.ordinal;
return this; // return this;
} // }
buildForm(): FormGroup { // buildForm(): FormGroup {
const formGroup = new FormBuilder().group({ // const formGroup = new FormBuilder().group({
id: [this.id], // id: [this.id],
label: [this.label], // label: [this.label],
description: [this.description], // description: [this.description],
placeholder: [this.placeholder], // placeholder: [this.placeholder],
type: [this.type], // type: [this.type],
required: [this.required], // required: [this.required],
ordinal: [this.ordinal] // ordinal: [this.ordinal]
}); // });
return formGroup; // return formGroup;
} // }
} // }

145
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html
View File

@ -33,22 +33,23 @@
</mat-card-header> --> </mat-card-header> -->
<mat-card-content> <mat-card-content>
<div class="row" style="gap:1em"> <div class="row" style="gap:1em">
<mat-form-field class="col-lg-6" appearance="legacy"> <mat-form-field class="col-lg-6" >
<input matInput placeholder="{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type="text" name="label" formControlName="label" <mat-label>Name</mat-label>
required> <input matInput type="text" name="label" formControlName="label" required>
<mat-error *ngIf="dmpBlueprintsFormGroup.get('label').hasError('required')"> <mat-error *ngIf="dmpBlueprintsFormGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<h4 class="col-12">Sections</h4> <h4 class="col-12">Sections</h4>
<ng-container formArrayName="sections"> <div formArrayName="sections" style="width: 100%;" cdkDropList (cdkDropListDropped)="dropSections($event)">
<div *ngFor="let section of sectionsArray().controls; let sectionIndex=index;" class="section-input" style="width: 100%;"> <div *ngFor="let section of sectionsArray().controls; let sectionIndex=index;" class="section-input" cdkDrag>
<ng-container [formGroupName]="sectionIndex"> <ng-container [formGroupName]="sectionIndex">
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<mat-card class="col-11" style="width: 100%;"> <mat-card class="col-11" style="width: 100%; margin-bottom: 1%;">
<mat-card-header> <mat-card-header>
<mat-card-title>Section {{sectionIndex + 1}}</mat-card-title> <mat-card-title>Section {{sectionIndex + 1}}</mat-card-title>
<mat-icon cdkDragHandle style="cursor: move; color: #129d99;">drag_indicator</mat-icon>
</mat-card-header> </mat-card-header>
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
@ -73,71 +74,80 @@
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="row">
<div class="col-6">
<mat-form-field> <mat-form-field>
<mat-label>System fields</mat-label> <mat-label>System fields</mat-label>
<mat-select multiple> <mat-select multiple>
<mat-option *ngFor="let f of fieldList" [disabled]="systemFieldDisabled(f.type, sectionIndex)" [value]="f.type" (click)="selectedFieldType(f.label, f.type, sectionIndex)">{{f.label}}</mat-option> <mat-option *ngFor="let f of fieldList" [disabled]="systemFieldDisabled(f.type, sectionIndex)" [value]="f.type" (click)="selectedFieldType(f.label, f.type, sectionIndex)">{{f.label}}</mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="systemFieldsArray(sectionIndex).hasError('required')"> <mat-error *ngIf="fieldsArray(sectionIndex).hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-6">
<button mat-button class="action-btn" type="button" (click)="addExtraField(sectionIndex)">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>
<ng-container formArrayName="systemFields"> </div>
<div *ngFor="let systemField of systemFieldsArray(sectionIndex).controls; let systemFieldIndex=index;">
<ng-container [formGroupName]="systemFieldIndex"> <div class="col-12">
<div class="col-12" *ngIf="systemFieldsArray(sectionIndex).length > 0">
<!-- <div *ngFor="let systemField of systemFieldsArray(sectionIndex).value; let i=index;" class="section-input" style="width: 100%;"> --> <div formArrayName="fields" cdkDropList (cdkDropListDropped)="drop($event, sectionIndex)">
<div *ngFor="let field of fieldsArray(sectionIndex).controls; let fieldIndex=index;" cdkDrag>
<ng-container [formGroupName]="fieldIndex">
<div class="col-12" *ngIf="fieldsArray(sectionIndex).length > 0">
<div class="row"> <div class="row">
<div class="col-3"> <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">
<div class="col-2" >
<mat-form-field> <mat-form-field>
<mat-label>System Field</mat-label> <mat-label>System Field</mat-label>
<input matInput disabled value="{{transfromEnumToString(systemField.get('type').value)}}" type="text" name="name"> <input matInput disabled value="{{transfromEnumToString(field.get('type').value)}}" type="text" name="name">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3"> <div class="col-2">
<mat-form-field> <mat-form-field>
<mat-label>Label</mat-label> <mat-label>Label</mat-label>
<input matInput type="text" name="label" formControlName="label"> <input matInput type="text" name="label" formControlName="label">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3"> <div class="col-2">
<mat-form-field> <mat-form-field>
<mat-label>Placeholder</mat-label> <mat-label>Placeholder</mat-label>
<input matInput type="text" name="placeholder" formControlName="placeholder"> <input matInput type="text" name="placeholder" formControlName="placeholder">
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3"> <div class="col-2">
<mat-form-field> <mat-form-field>
<mat-label>Description</mat-label> <mat-label>Description</mat-label>
<input matInput type="text" name="description" formControlName="description"> <input matInput type="text" name="description" formControlName="description">
</mat-form-field> </mat-form-field>
</div> </div>
<!-- <div class="col-3"> <div class="centered-row-item col-1">
<mat-checkbox style="margin-top: 4%;" formControlName="required">Required</mat-checkbox> <mat-checkbox [disabled]="field.get('type').value === 0 || field.get('type').value === 1" formControlName="required">Required</mat-checkbox>
</div> -->
</div> </div>
<!-- </div> --> <div class="field-delete col-1" (click)="removeSystemFieldWithIndex(sectionIndex, fieldIndex)">
</div> <mat-icon class="field-delete-icon">delete</mat-icon>
</ng-container> <span class="field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
</div> </div>
</ng-container> </ng-container>
<ng-container formArrayName="extraFields"> <ng-container *ngIf="field.get('category').value === 1">
<div class="col-12"> <div class="col-2">
<div class="row" *ngFor="let extraField of extraFieldsArray(sectionIndex).controls; let extraFieldIndex=index;"> <mat-form-field>
<ng-container [formGroupName]="extraFieldIndex">
<mat-form-field class="col-3">
<mat-label>Label</mat-label>
<input matInput type="text" name="label" formControlName="label" required>
</mat-form-field>
<mat-form-field class="col-3">
<mat-label>Description</mat-label>
<input matInput type="text" name="description" formControlName="description">
</mat-form-field>
<mat-form-field class="col-3">
<mat-label>Type</mat-label> <mat-label>Type</mat-label>
<mat-select placeholder="Type" formControlName="type" required> <mat-select placeholder="Type" formControlName="type" required>
<mat-option *ngFor="let extraFieldType of getExtraFieldTypes()" [value]="extraFieldType"> <mat-option *ngFor="let extraFieldType of getExtraFieldTypes()" [value]="extraFieldType">
@ -145,50 +155,77 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </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-form-field>
</div>
<div class="col-2">
<mat-form-field>
<mat-label>Placeholder</mat-label>
<input matInput type="text" name="placeholder" formControlName="placeholder" required>
</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"> <div class="centered-row-item col-1">
<mat-checkbox formControlName="required"> <mat-checkbox formControlName="required">
Required Required
</mat-checkbox> </mat-checkbox>
</div> </div>
<div class="extra-field-delete col-1" (click)="removeExtraField(sectionIndex, extraFieldIndex)"> <div class="field-delete col-1" (click)="removeExtraField(sectionIndex, fieldIndex)">
<mat-icon class="extra-field-delete-icon">delete</mat-icon> <mat-icon class="field-delete-icon">delete</mat-icon>
<span class="extra-field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span> <span class="field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
</div> </div>
</ng-container> </ng-container>
</div> </div>
</div> </div>
<div class="col-12">
<div class="row">
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addExtraField(sectionIndex)">Add extra field</button>
</div>
</div>
</div>
</ng-container> </ng-container>
</div>
</div>
<div class="col-12"> <div class="col-12">
<!-- <mat-form-field>
<mat-label>Description Templates</mat-label> -->
<app-multiple-auto-complete placeholder="Description Templates2" [hidePlaceholder]="true" required='false' [configuration]="profilesAutoCompleteConfiguration">
</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>
</div>
<!-- <div class="col-12">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12"> -->
<!-- <mat-form-field> <!-- <mat-form-field>
<mat-label>Description Templates</mat-label> <mat-label>Description Templates</mat-label>
<mat-select (selectionChange)="addDescriptionTemplate($event, sectionIndex)" multiple> <mat-select (selectionChange)="addDescriptionTemplate($event, sectionIndex)" multiple>
<mat-option *ngFor="let descTemplate of descriptionsList">{{descTemplate}}</mat-option> <mat-option *ngFor="let descTemplate of descriptionsList">{{descTemplate}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> --> </mat-form-field> -->
<mat-form-field> <!-- <mat-form-field>
<mat-label>Description Templates</mat-label> <mat-label>Description Templates</mat-label>
<app-multiple-auto-complete placeholder="Description Templates2" [hidePlaceholder]="true" required='false' [formControl]="section.get('descriptionTemplates')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event, sectionIndex)" (optionActionClicked)="onPreviewTemplate($event, sectionIndex)" (optionSelected)="onOptionSelected(sectionIndex)"> <app-multiple-auto-complete placeholder="Description Templates2" [hidePlaceholder]="true" required='false' [formControl]="section.get('descriptionTemplates')" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event, sectionIndex)" (optionActionClicked)="onPreviewTemplate($event, sectionIndex)" (optionSelected)="onOptionSelected(sectionIndex)">
</app-multiple-auto-complete> </app-multiple-auto-complete> -->
<!-- <button matSuffix class="input-btn" (click)="allAvailableProfiles($event)"> <!-- <button matSuffix class="input-btn" (click)="allAvailableProfiles($event)">
<mat-icon class="icon-btn">view_list</mat-icon> <mat-icon class="icon-btn">view_list</mat-icon>
</button> --> </button> -->
</mat-form-field> <!-- </mat-form-field>
</div>
</div> </div>
</div> </div>
</div> -->
<!-- <ng-container formArrayName="descriptionTemplates"> <!-- <ng-container formArrayName="descriptionTemplates">
<div *ngFor="let descriptionTemplate of descriptionTemplatesArray(sectionIndex).controls; let j=index;" class="section-input" style="width: 100%;"> <div *ngFor="let descriptionTemplate of descriptionTemplatesArray(sectionIndex).controls; let j=index;" class="section-input" style="width: 100%;">
<ng-container [formGroupName]="j"> <ng-container [formGroupName]="j">
@ -243,7 +280,7 @@
</ul> </ul>
</div> --> </div> -->
</div> </div>
</ng-container> </div>
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">

6
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss
View File

@ -102,18 +102,18 @@
} }
} }
.extra-field-delete{ .field-delete{
align-items: center; align-items: center;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.extra-field-delete-icon{ .field-delete-icon{
font-size: 1.2em; font-size: 1.2em;
width: 14px; width: 14px;
color: var(--primary-color); color: var(--primary-color);
} }
.extra-field-delete-text{ .field-delete-text{
font-size: 1em; font-size: 1em;
margin-left: 0.5em; margin-left: 0.5em;
color: var(--primary-color); color: var(--primary-color);

81
dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts
View File

@ -32,10 +32,11 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-
import { DmpService } from '@app/core/services/dmp/dmp.service'; import { DmpService } from '@app/core/services/dmp/dmp.service';
import { AvailableProfilesComponent } from '@app/ui/dmp/editor/available-profiles/available-profiles.component'; import { AvailableProfilesComponent } from '@app/ui/dmp/editor/available-profiles/available-profiles.component';
import { DatasetPreviewDialogComponent } from '@app/ui/dmp/dataset-preview/dataset-preview-dialog.component'; import { DatasetPreviewDialogComponent } from '@app/ui/dmp/dataset-preview/dataset-preview-dialog.component';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray } from '@angular/cdk/drag-drop';
import { DmpBlueprint, DmpBlueprintDefinition, ExtraFieldType, SystemFieldType } from '@app/core/model/dmp/dmp-blueprint/dmp-blueprint'; import { DmpBlueprint, DmpBlueprintDefinition, ExtraFieldType, FieldCategory, SystemFieldType } from '@app/core/model/dmp/dmp-blueprint/dmp-blueprint';
import { DmpBlueprintEditor } from './dmp-blueprint-editor.model'; import { DmpBlueprintEditor } from './dmp-blueprint-editor.model';
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
@Component({ @Component({
@ -172,10 +173,11 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
label: this.fb.control(''), label: this.fb.control(''),
description: this.fb.control(''), description: this.fb.control(''),
ordinal: this.fb.control(ordinal), ordinal: this.fb.control(ordinal),
systemFields: this.fb.array([]), fields: this.fb.array([]),
//systemFields: this.fb.array([]),
descriptionTemplates: this.fb.control(''), descriptionTemplates: this.fb.control(''),
// this.fb.array([this.initDescriptionTemplate()]), // this.fb.array([this.initDescriptionTemplate()]),
extraFields: this.fb.array([]) //extraFields: this.fb.array([])
}); });
} }
@ -187,6 +189,31 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.sectionsArray().removeAt(sectionIndex); this.sectionsArray().removeAt(sectionIndex);
} }
fieldsArray(sectionIndex: number): FormArray {
return this.sectionsArray().at(sectionIndex).get('fields') as FormArray;
}
initField(fieldCategory: FieldCategory, fieldType?: number): FormGroup {
return this.fb.group({
id: this.fb.control(Guid.create().toString()),
category: this.fb.control(fieldCategory),
label: this.fb.control(''),
placeholder: this.fb.control(''),
description: this.fb.control(''),
type: (isNullOrUndefined(fieldType)) ? this.fb.control('') : this.fb.control(fieldType),
required: (!isNullOrUndefined(fieldType) && (fieldType == 0 || fieldType == 1)) ? this.fb.control(true) : this.fb.control(false),
ordinal: this.fb.control('')
});
}
addField(sectionIndex: number, fieldCategory: FieldCategory, fieldType?: number): void {
this.fieldsArray(sectionIndex).push(this.initField(fieldCategory, fieldType));
}
removeField(sectionIndex: number, fieldIndex: number): void {
this.fieldsArray(sectionIndex).removeAt(fieldIndex);
}
systemFieldsArray(sectionIndex: number): FormArray { systemFieldsArray(sectionIndex: number): FormArray {
return this.sectionsArray().at(sectionIndex).get('systemFields') as FormArray; return this.sectionsArray().at(sectionIndex).get('systemFields') as FormArray;
} }
@ -204,7 +231,7 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
} }
addSystemField(sectionIndex: number, systemField?: SystemFieldType): void { addSystemField(sectionIndex: number, systemField?: SystemFieldType): void {
this.systemFieldsArray(sectionIndex).push(this.initSystemField(systemField)); this.fieldsArray(sectionIndex).push(this.initField(FieldCategory.SYSTEM, systemField));
} }
transfromEnumToString(type: SystemFieldType): string{ transfromEnumToString(type: SystemFieldType): string{
@ -227,8 +254,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
let i = 0; let i = 0;
for (let s in this.sectionsArray().controls) { for (let s in this.sectionsArray().controls) {
if (i != sectionIndex) { if (i != sectionIndex) {
for (let f of this.systemFieldsArray(i).controls) { for (let f of this.fieldsArray(i).controls) {
if (f.get('type').value == systemField) { if (f.get('category').value == FieldCategory.SYSTEM && f.get('type').value == systemField) {
return true; return true;
} }
} }
@ -239,14 +266,14 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
} }
removeSystemFieldWithIndex(sectionIndex: number, fieldIndex: number): void { removeSystemFieldWithIndex(sectionIndex: number, fieldIndex: number): void {
this.systemFieldsArray(sectionIndex).removeAt(fieldIndex); this.fieldsArray(sectionIndex).removeAt(fieldIndex);
} }
removeSystemField(sectionIndex: number, systemField: SystemFieldType): void { removeSystemField(sectionIndex: number, systemField: SystemFieldType): void {
let i = 0; let i = 0;
for(let sf of this.systemFieldsArray(sectionIndex).controls){ for(let f of this.fieldsArray(sectionIndex).controls){
if(sf.get('type').value == systemField){ if(f.get('category').value == FieldCategory.SYSTEM && f.get('type').value == systemField){
this.systemFieldsArray(sectionIndex).removeAt(i); this.fieldsArray(sectionIndex).removeAt(i);
return; return;
} }
i++; i++;
@ -293,11 +320,11 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
} }
addExtraField(sectionIndex: number): void { addExtraField(sectionIndex: number): void {
this.extraFieldsArray(sectionIndex).push(this.initExtraField()); this.fieldsArray(sectionIndex).push(this.initField(FieldCategory.EXTRA));
} }
removeExtraField(sectionIndex: number, extraFieldIndex: number): void { removeExtraField(sectionIndex: number, fieldIndex: number): void {
this.extraFieldsArray(sectionIndex).removeAt(extraFieldIndex); this.fieldsArray(sectionIndex).removeAt(fieldIndex);
} }
getExtraFieldTypes(): Number[] { getExtraFieldTypes(): Number[] {
@ -319,12 +346,14 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
onSubmitTest(): void { onSubmitTest(): void {
} }
drop(event: CdkDragDrop<string[]>) { drop(event: CdkDragDrop<string[]>, sectionIndex: number) {
this.moveItemInFormArray( moveItemInArray(this.fieldsArray(sectionIndex).controls, event.previousIndex, event.currentIndex);
this.systemFieldsArray(0), moveItemInArray(this.fieldsArray(sectionIndex).value, event.previousIndex, event.currentIndex);
event.previousIndex, }
event.currentIndex
); dropSections(event: CdkDragDrop<string[]>) {
moveItemInArray(this.sectionsArray().controls, event.previousIndex, event.currentIndex);
moveItemInArray(this.sectionsArray().value, event.previousIndex, event.currentIndex);
} }
moveItemInFormArray(formArray: FormArray, fromIndex: number, toIndex: number): void { moveItemInFormArray(formArray: FormArray, fromIndex: number, toIndex: number): void {
@ -458,13 +487,13 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
this.router.navigate(['/dmp-profiles']); this.router.navigate(['/dmp-profiles']);
} }
addField() { // addField() {
(<FormArray>this.formGroup.get('definition').get('fields')).push(new DmpProfileFieldEditorModel().buildForm()); // (<FormArray>this.formGroup.get('definition').get('fields')).push(new DmpProfileFieldEditorModel().buildForm());
} // }
removeField(index: number) { // removeField(index: number) {
(<FormArray>this.formGroup.get('definition').get('fields')).controls.splice(index, 1); // (<FormArray>this.formGroup.get('definition').get('fields')).controls.splice(index, 1);
} // }
getDMPProfileFieldDataTypeValues(): Number[] { getDMPProfileFieldDataTypeValues(): Number[] {
let keys: string[] = Object.keys(DmpProfileFieldDataType); let keys: string[] = Object.keys(DmpProfileFieldDataType);

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

@ -65,8 +65,27 @@
</div> </div>
<div class="col-auto form" id="editor-form"> <div class="col-auto form" id="editor-form">
<div class="col-12 blueprint-section" [hidden]="this.step !== 0"> <div class="col-12 blueprint-section" [hidden]="this.step !== 0">
<div class="dmp-blueprint-form"> <div class="input-form">
<div class="heading2">0.1 Title of DMP *</div>
<mat-form-field> <mat-form-field>
<mat-label>Title</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 class="input-form">
<div class="heading2">0.2 Description of DMP *</div>
<rich-text-editor-component [parentFormGroup]="formGroup" [controlName]="'description'"
[placeholder]="'Fill with description'" [required]="true">
</rich-text-editor-component>
</div>
<div class="dmp-blueprint-form" style="margin-top: 3%;">
<div class="heading2">0.3 Blueprint of DMP *</div>
<mat-form-field>
<mat-label>Select blueprint</mat-label>
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="Select blueprint" [configuration]="dmpBlueprintAutoCompleteConfiguration"> <app-single-auto-complete [required]="false" [formControl]="formGroup.get('profile')" placeholder="Select blueprint" [configuration]="dmpBlueprintAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
</mat-form-field> </mat-form-field>

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

@ -368,6 +368,17 @@ a:hover {
} }
} }
.heading2 {
text-align: left;
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
margin-bottom: 0.625rem;
}
::ng-deep .input-form .mat-form-field-appearance-outline .mat-form-field-outline { ::ng-deep .input-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important; background: #fafafa !important;
} }