fix dmp blueprint editor screen

dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/FieldModel.java

@@ -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;
+    }
+}

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

@@ -2,6 +2,7 @@ package eu.eudat.models.data.entities.xmlmodels.dmpprofiledefinition;
 
 import eu.eudat.logic.utilities.builders.XmlBuilder;
 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.Element;
 import org.w3c.dom.Node;
@@ -10,6 +11,7 @@ import org.w3c.dom.NodeList;
 import java.util.LinkedList;
 import java.util.List;
 import java.util.UUID;
+import java.util.stream.Collectors;
 
 public class Section implements XmlSerializable<Section> {
 
@@ -17,9 +19,8 @@ public class Section implements XmlSerializable<Section> {
     private String label;
     private String description;
     private Integer ordinal;
-    private List<SystemField> systemFields;
+    private List<FieldModel> fields;
     private List<DescriptionTemplate> descriptionTemplates;
-    private List<ExtraField> extraFields;
 
     public UUID getId() {
         return id;
@@ -49,11 +50,11 @@ public class Section implements XmlSerializable<Section> {
         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() {
@@ -63,13 +64,6 @@ public class Section implements XmlSerializable<Section> {
         this.descriptionTemplates = descriptionTemplates;
     }
 
-    public List<ExtraField> getExtraFields() {
-        return extraFields;
-    }
-    public void setExtraFields(List<ExtraField> extraFields) {
-        this.extraFields = extraFields;
-    }
-
     @Override
     public Element toXml(Document doc) {
         Element rootElement = doc.createElement("section");
@@ -77,8 +71,10 @@ public class Section implements XmlSerializable<Section> {
         rootElement.setAttribute("label", this.label);
         rootElement.setAttribute("description", this.description);
         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");
-        for (SystemField systemField : this.systemFields) {
+        for (SystemField systemField : systemFieldsList) {
             systemFields.appendChild(systemField.toXml(doc));
         }
         rootElement.appendChild(systemFields);
@@ -87,8 +83,10 @@ public class Section implements XmlSerializable<Section> {
             descriptionTemplates.appendChild(descriptionTemplate.toXml(doc));
         }
         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");
-        for (ExtraField extraField : this.extraFields) {
+        for (ExtraField extraField : extraFieldList) {
             extraFields.appendChild(extraField.toXml(doc));
         }
         rootElement.appendChild(extraFields);
@@ -102,14 +100,15 @@ public class Section implements XmlSerializable<Section> {
         this.label = item.getAttribute("label");
         this.description = item.getAttribute("description");
         this.ordinal = Integer.valueOf(item.getAttribute("ordinal"));
-        this.systemFields = new LinkedList<>();
+        this.fields = new LinkedList<>();
         Element systemFields = (Element) XmlBuilder.getNodeFromListByTagName(item.getChildNodes(), "systemFields");
         if (systemFields != null) {
             NodeList systemFieldElements = systemFields.getChildNodes();
             for (int temp = 0; temp < systemFieldElements.getLength(); temp++) {
                 Node systemFieldElement = systemFieldElements.item(temp);
                 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");
         if (extraFields != null) {
             NodeList extraFieldElements = extraFields.getChildNodes();
             for (int temp = 0; temp < extraFieldElements.getLength(); temp++) {
                 Node extraFieldElement = extraFieldElements.item(temp);
                 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));
                 }
             }
         }

dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/types/FieldCategory.java

@@ -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");
+        }
+    }
+}

dmp-frontend/src/app/core/model/dmp/dmp-blueprint/dmp-blueprint.ts

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

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

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

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

@@ -1,5 +1,5 @@
 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 {
     public id: string;
@@ -60,7 +60,7 @@ export class SectionDmpBlueprintEditor {
     public label: string;
     public description: string;
     public ordinal: number;
-    public systemFields: SystemFieldInSectionEditor[] = new Array<SystemFieldInSectionEditor>();
+    public fields: FieldInSectionEditor[] = new Array<FieldInSectionEditor>();
     public descriptionTemplates: DescriptionTemplatesInSectionEditor[] = new Array<DescriptionTemplatesInSectionEditor>();
 
     fromModel(item: SectionDmpBlueprint): SectionDmpBlueprintEditor {
@@ -68,9 +68,8 @@ export class SectionDmpBlueprintEditor {
 		this.label = item.label;
 		this.description = item.description;
         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))); }
-		debugger;
 		return this;
 	}
 
@@ -82,12 +81,12 @@ export class SectionDmpBlueprintEditor {
 			ordinal: [this.ordinal]
 		});
         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();
-			systemFieldsFormArray.push(form);
+			fieldsFormArray.push(form);
 		});
-		formGroup.addControl('systemFields', formBuilder.array(systemFieldsFormArray));
+		formGroup.addControl('fields', formBuilder.array(fieldsFormArray));
         const descriptionTemplatesFormArray = new Array<FormGroup>();
 		this.descriptionTemplates.forEach(item => {
 			const form: FormGroup = item.buildForm();
@@ -98,17 +97,21 @@ export class SectionDmpBlueprintEditor {
 	}
 }
 
-export class SystemFieldInSectionEditor {
+export class FieldInSectionEditor {
     public id: string;
-    public type: SystemFieldType;
+	public category: FieldCategory;
+    public type: number;
+    public label: string;
     public placeholder: string;
     public description: string;
     public required: boolean;
     public ordinal: number;
 
-    fromModel(item: SystemFieldInSection): SystemFieldInSectionEditor {
+    fromModel(item: FieldInSection): FieldInSectionEditor {
 		this.id = item.id;
+		this.category = item.category;
 		this.type = item.type;
+		this.label = item.label;
         this.placeholder = item.placeholder;
         this.description = item.description;
         this.required = item.required;
@@ -119,7 +122,9 @@ export class SystemFieldInSectionEditor {
 	buildForm(): FormGroup {
 		const formGroup = new FormBuilder().group({
 			id: [this.id],
+			category: [this.category],
 			type: [this.type],
+			label: [this.label],
             placeholder: [this.placeholder],
             description: [this.description],
             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;
-	}
+// 	}
-}
+// }

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

@@ -33,22 +33,23 @@
 				</mat-card-header> -->
 				<mat-card-content>
 					<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')">
 								{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
 						<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">
 									<div class="col-12">
 										<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-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">
@@ -73,122 +74,158 @@
 
 												<div class="col-12">
 													<div class="row">
+
 														<div class="col-12">
-															<mat-form-field>
+															<div class="row">
-																<mat-label>System fields</mat-label>
+																<div class="col-6">
-																<mat-select multiple>
+																	<mat-form-field>
-																	<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-label>System fields</mat-label>
-																</mat-select>
+																		<mat-select multiple>
-																<mat-error *ngIf="systemFieldsArray(sectionIndex).hasError('required')">
+																			<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>
-																	{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-select>
-															</mat-form-field>
+																		<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)">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>
+																	<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">
+																					<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">
+																						</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 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">
+																					<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-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">
+																						<mat-checkbox formControlName="required">
+																							Required
+																						</mat-checkbox>
+																					</div>
+																					<div 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 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>
-												<ng-container formArrayName="systemFields">
-													<div *ngFor="let systemField of systemFieldsArray(sectionIndex).controls; let systemFieldIndex=index;">
-														<ng-container [formGroupName]="systemFieldIndex">
-															<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 class="row">
-																		<div class="col-3">
-																			<mat-form-field>
-																				<mat-label>System Field</mat-label>
-																				<input matInput disabled value="{{transfromEnumToString(systemField.get('type').value)}}" type="text" name="name">
-																			</mat-form-field>
-																		</div>
-																		<div class="col-3">
-																			<mat-form-field>
-																				<mat-label>Label</mat-label>
-																				<input matInput type="text" name="label" formControlName="label">
-																			</mat-form-field>
-																		</div>
-																		<div class="col-3">
-																			<mat-form-field>
-																				<mat-label>Placeholder</mat-label>
-																				<input matInput type="text" name="placeholder" formControlName="placeholder">
-																			</mat-form-field>
-																		</div>
-																		<div class="col-3">
-																			<mat-form-field>
-																				<mat-label>Description</mat-label>
-																				<input matInput type="text" name="description" formControlName="description">
-																			</mat-form-field>
-																		</div>
-																		<!-- <div class="col-3">
-																				<mat-checkbox style="margin-top: 4%;" formControlName="required">Required</mat-checkbox>
-																		</div> -->
-																	</div>
-																<!-- </div> -->
-															</div>
-														</ng-container>
-													</div>
-												</ng-container>
-
-												<ng-container formArrayName="extraFields">
-													<div class="col-12">
-														<div class="row" *ngFor="let extraField of extraFieldsArray(sectionIndex).controls; let extraFieldIndex=index;">
-															<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-select placeholder="Type" formControlName="type" required>
-																		<mat-option *ngFor="let extraFieldType of getExtraFieldTypes()" [value]="extraFieldType">
-																			{{getExtraFieldTypeValue(extraFieldType)}}
-																		</mat-option>
-																	</mat-select>
-																</mat-form-field>
-																<div class="centered-row-item col-1">
-																	<mat-checkbox formControlName="required">
-																		Required
-																	</mat-checkbox>
-																</div>
-																<div class="extra-field-delete col-1" (click)="removeExtraField(sectionIndex, extraFieldIndex)">
-																	<mat-icon class="extra-field-delete-icon">delete</mat-icon>
-																	<span class="extra-field-delete-text">{{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}</span>
-																</div>
-															</ng-container>
-
-														</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>
 													
-												<div class="col-12">
+												<!-- <div class="col-12">
 													<div class="row">
-														<div class="col-12">
+														<div class="col-12"> -->
 															<!-- <mat-form-field>
 																<mat-label>Description Templates</mat-label>
 																<mat-select (selectionChange)="addDescriptionTemplate($event, sectionIndex)" multiple>
 																	<mat-option *ngFor="let descTemplate of descriptionsList">{{descTemplate}}</mat-option>
 																</mat-select>
 															</mat-form-field> -->
-															<mat-form-field>
+															<!-- <mat-form-field>
 																<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>
+																</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>
+															<!-- </mat-form-field>
 														</div>
 													</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">
@@ -243,7 +280,7 @@
 									</ul>
 								</div> -->
 							</div>
-						</ng-container>
+						</div>
 
 						<div class="col-12">
 							<div class="row">

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

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

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

@@ -32,10 +32,11 @@ import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-
 import { DmpService } from '@app/core/services/dmp/dmp.service';
 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 { 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 { Guid } from '@common/types/guid';
+import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
 
 
 @Component({
@@ -172,10 +173,11 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
 			label: this.fb.control(''),
 			description: this.fb.control(''),
 			ordinal: this.fb.control(ordinal),
-			systemFields: this.fb.array([]),
+			fields: this.fb.array([]),
+			//systemFields: this.fb.array([]),
 			descriptionTemplates: this.fb.control(''),
 			// 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);
 	}
 
+	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 {
 		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 {
-		this.systemFieldsArray(sectionIndex).push(this.initSystemField(systemField));
+		this.fieldsArray(sectionIndex).push(this.initField(FieldCategory.SYSTEM, systemField));
 	}
 
 	transfromEnumToString(type: SystemFieldType): string{
@@ -227,8 +254,8 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
 		let i = 0;
 		for (let s in this.sectionsArray().controls) {
 			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;
 					}
 				}
@@ -239,14 +266,14 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
 	}
 	  
 	removeSystemFieldWithIndex(sectionIndex: number, fieldIndex: number): void {
-		this.systemFieldsArray(sectionIndex).removeAt(fieldIndex);
+		this.fieldsArray(sectionIndex).removeAt(fieldIndex);
 	}
 
 	removeSystemField(sectionIndex: number, systemField: SystemFieldType): void {
 		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;
 			}
 			i++;
@@ -293,11 +320,11 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
 	}
 	  
 	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[] {
@@ -319,12 +346,14 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
 	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 {
@@ -458,13 +487,13 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie
 		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[] {
 		let keys: string[] = Object.keys(DmpProfileFieldDataType);

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

@@ -65,8 +65,27 @@
 				</div>
 				<div class="col-auto form" id="editor-form">
 					<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-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>
 							</mat-form-field>

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

@@ -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 {
 	background: #fafafa !important;
 }