From 17dbd198ad0da75ba3b6bb32e836613e34a1c614 Mon Sep 17 00:00:00 2001 From: Aldo Mihasi Date: Thu, 3 Aug 2023 13:10:36 +0300 Subject: [PATCH] fix dmp blueprint editor screen --- .../dmpprofiledefinition/FieldModel.java | 127 +++++++++ .../dmpprofiledefinition/Section.java | 37 ++- .../types/FieldCategory.java | 27 ++ .../model/dmp/dmp-blueprint/dmp-blueprint.ts | 23 +- .../admin/dmp-profile/dmp-profile.module.ts | 4 +- .../editor/dmp-blueprint-editor.model.ts | 89 ++++--- .../editor/dmp-profile-editor.component.html | 245 ++++++++++-------- .../editor/dmp-profile-editor.component.scss | 6 +- .../editor/dmp-profile-editor.component.ts | 81 ++++-- .../dmp-editor-blueprint.component.html | 21 +- .../dmp-editor-blueprint.component.scss | 11 + 11 files changed, 461 insertions(+), 210 deletions(-) create mode 100644 dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/FieldModel.java create mode 100644 dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/types/FieldCategory.java diff --git a/dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/FieldModel.java b/dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/FieldModel.java new file mode 100644 index 000000000..b311d005f --- /dev/null +++ b/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; + } +} diff --git a/dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/Section.java b/dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/Section.java index 2ed95c937..bcb128653 100644 --- a/dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/Section.java +++ b/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
{ @@ -17,9 +19,8 @@ public class Section implements XmlSerializable
{ private String label; private String description; private Integer ordinal; - private List systemFields; + private List fields; private List descriptionTemplates; - private List extraFields; public UUID getId() { return id; @@ -49,11 +50,11 @@ public class Section implements XmlSerializable
{ this.ordinal = ordinal; } - public List getSystemFields() { - return systemFields; + public List getFields() { + return fields; } - public void setSystemFields(List systemFields) { - this.systemFields = systemFields; + public void setFields(List fields) { + this.fields = fields; } public List getDescriptionTemplates() { @@ -63,13 +64,6 @@ public class Section implements XmlSerializable
{ this.descriptionTemplates = descriptionTemplates; } - public List getExtraFields() { - return extraFields; - } - public void setExtraFields(List extraFields) { - this.extraFields = extraFields; - } - @Override public Element toXml(Document doc) { Element rootElement = doc.createElement("section"); @@ -77,8 +71,10 @@ public class Section implements XmlSerializable
{ rootElement.setAttribute("label", this.label); rootElement.setAttribute("description", this.description); rootElement.setAttribute("ordinal", String.valueOf(this.ordinal)); + List temp = this.fields.stream().filter(f -> f.getCategory().equals(FieldCategory.SYSTEM)).collect(Collectors.toList()); + List 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
{ descriptionTemplates.appendChild(descriptionTemplate.toXml(doc)); } rootElement.appendChild(descriptionTemplates); + temp = this.fields.stream().filter(f -> f.getCategory().equals(FieldCategory.EXTRA)).collect(Collectors.toList()); + List 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
{ 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
{ } } } - 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)); } } } diff --git a/dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/types/FieldCategory.java b/dmp-backend/web/src/main/java/eu/eudat/models/data/entities/xmlmodels/dmpprofiledefinition/types/FieldCategory.java new file mode 100644 index 000000000..cec77366d --- /dev/null +++ b/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"); + } + } +} diff --git a/dmp-frontend/src/app/core/model/dmp/dmp-blueprint/dmp-blueprint.ts b/dmp-frontend/src/app/core/model/dmp/dmp-blueprint/dmp-blueprint.ts index 5f25b8875..d9f4f4f36 100644 --- a/dmp-frontend/src/app/core/model/dmp/dmp-blueprint/dmp-blueprint.ts +++ b/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, diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.module.ts b/dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.module.ts index 5059a98b0..f85a1a0d3 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/dmp-profile.module.ts +++ b/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, diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-blueprint-editor.model.ts b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-blueprint-editor.model.ts index fb7c3e3d0..a2ad7e5f2 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-blueprint-editor.model.ts +++ b/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(); + public fields: FieldInSectionEditor[] = new Array(); public descriptionTemplates: DescriptionTemplatesInSectionEditor[] = new Array(); 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(); - this.systemFields.forEach(item => { + const fieldsFormArray = new Array(); + 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(); 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 { - public id: string; - public label: string; - public description: string; - public placeholder: string; - public type: ExtraFieldType; - public required: boolean; - public ordinal: number; +// export class ExtraFieldsInSectionEditor { +// public id: string; +// public label: string; +// public description: string; +// public placeholder: string; +// public type: ExtraFieldType; +// public required: boolean; +// public ordinal: number; - fromModel(item: ExtraFieldInSection): ExtraFieldsInSectionEditor { - this.id = item.id; - this.label = item.label; - this.description = item.description; - this.placeholder = item.placeholder; - this.type = item.type; - this.required = item.required; - this.ordinal = item.ordinal; - return this; - } +// fromModel(item: ExtraFieldInSection): ExtraFieldsInSectionEditor { +// this.id = item.id; +// this.label = item.label; +// this.description = item.description; +// this.placeholder = item.placeholder; +// this.type = item.type; +// this.required = item.required; +// this.ordinal = item.ordinal; +// return this; +// } - buildForm(): FormGroup { - const formGroup = new FormBuilder().group({ - id: [this.id], - label: [this.label], - description: [this.description], - placeholder: [this.placeholder], - type: [this.type], - required: [this.required], - ordinal: [this.ordinal] - }); - return formGroup; - } -} \ No newline at end of file +// buildForm(): FormGroup { +// const formGroup = new FormBuilder().group({ +// id: [this.id], +// label: [this.label], +// description: [this.description], +// placeholder: [this.placeholder], +// type: [this.type], +// required: [this.required], +// ordinal: [this.ordinal] +// }); +// return formGroup; +// } +// } \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html index 1c09aeac8..09ec4be95 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html +++ b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.html @@ -33,22 +33,23 @@ -->
- - + + Name + {{'GENERAL.VALIDATION.REQUIRED' | translate}}

Sections

- -
+
+
- + Section {{sectionIndex + 1}} + drag_indicator
@@ -73,122 +74,158 @@
+
- - System fields - - {{f.label}} - - - {{'GENERAL.VALIDATION.REQUIRED' | translate}} - +
+
+ + System fields + + {{f.label}} + + + {{'GENERAL.VALIDATION.REQUIRED' | translate}} + +
+
+ + +
+
+ +
+ +
+
+ +
+
+
+
+
+ {{fieldIndex + 1}} +
+
+ drag_indicator +
+
+
+ +
+ + System Field + + +
+
+ + Label + + +
+
+ + Placeholder + + +
+
+ + Description + + +
+
+ Required +
+
+ delete + {{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}} +
+ + + +
+ + Type + + + {{getExtraFieldTypeValue(extraFieldType)}} + + + +
+
+ + Label + + +
+
+ + Placeholder + + +
+
+ + Description + + +
+
+ + Required + +
+
+ delete + {{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}} +
+ + +
+
+ +
+
+ +
+ + + + + +
+
+
- -
- -
- -
-
- - System Field - - -
-
- - Label - - -
-
- - Placeholder - - -
-
- - Description - - -
- -
- -
- -
- - - -
-
- - - Label - - - - Description - - - - Type - - - {{getExtraFieldTypeValue(extraFieldType)}} - - - -
- - Required - -
-
- delete - {{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}} -
- - -
-
- -
-
-
- -
-
-
- - -
+ - + - +
- +
diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss index 9313e4bc8..6cc8ea3a0 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.scss +++ b/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); diff --git a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts b/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts index f4f3498ae..b8cf5cd85 100644 --- a/dmp-frontend/src/app/ui/admin/dmp-profile/editor/dmp-profile-editor.component.ts +++ b/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 { DmpBlueprint, DmpBlueprintDefinition, ExtraFieldType, SystemFieldType } from '@app/core/model/dmp/dmp-blueprint/dmp-blueprint'; +import { CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray } from '@angular/cdk/drag-drop'; +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) { - if (f.get('type').value == systemField) { + for (let f of this.fieldsArray(i).controls) { + 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){ - if(sf.get('type').value == systemField){ - this.systemFieldsArray(sectionIndex).removeAt(i); + for(let f of this.fieldsArray(sectionIndex).controls){ + if(f.get('category').value == FieldCategory.SYSTEM && f.get('type').value == systemField){ + 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 { - this.extraFieldsArray(sectionIndex).removeAt(extraFieldIndex); + removeExtraField(sectionIndex: number, fieldIndex: number): void { + this.fieldsArray(sectionIndex).removeAt(fieldIndex); } getExtraFieldTypes(): Number[] { @@ -319,12 +346,14 @@ export class DmpProfileEditorComponent extends BaseComponent implements AfterVie onSubmitTest(): void { } - drop(event: CdkDragDrop) { - this.moveItemInFormArray( - this.systemFieldsArray(0), - event.previousIndex, - event.currentIndex - ); + drop(event: CdkDragDrop, sectionIndex: number) { + moveItemInArray(this.fieldsArray(sectionIndex).controls, event.previousIndex, event.currentIndex); + moveItemInArray(this.fieldsArray(sectionIndex).value, event.previousIndex, event.currentIndex); + } + + dropSections(event: CdkDragDrop) { + 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() { - (this.formGroup.get('definition').get('fields')).push(new DmpProfileFieldEditorModel().buildForm()); - } + // addField() { + // (this.formGroup.get('definition').get('fields')).push(new DmpProfileFieldEditorModel().buildForm()); + // } - removeField(index: number) { - (this.formGroup.get('definition').get('fields')).controls.splice(index, 1); - } + // removeField(index: number) { + // (this.formGroup.get('definition').get('fields')).controls.splice(index, 1); + // } getDMPProfileFieldDataTypeValues(): Number[] { let keys: string[] = Object.keys(DmpProfileFieldDataType); diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.html index 7c356d557..34735967d 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.html +++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.html @@ -65,8 +65,27 @@
-
+
+
0.1 Title of DMP *
+ Title + + + +
+
+
0.2 Description of DMP *
+ + +
+
+
0.3 Blueprint of DMP *
+ + Select blueprint diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.scss index a6be61a3c..027268655 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor-blueprint.component.scss +++ b/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; }