Merge branch 'ui-refactoring' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-refactoring

# Conflicts:
#	dmp-frontend/src/app/ui/admin/dataset-profile/dataset-profile.module.ts

dmp-backend/web/src/main/java/eu/eudat/logic/utilities/builders/ModelBuilder.java

@@ -70,6 +70,7 @@ public class ModelBuilder {
         if (type.equals("checkBox")) return (FieldData<U>) new CheckBoxData().fromData(data);
         if (type.equals("freetext")) return (FieldData<U>) new FreeTextData().fromData(data);
         if (type.equals("textarea")) return (FieldData<U>) new TextAreaData().fromData(data);
+        if (type.equals("datePicker")) return (FieldData<U>) new DataPickerData().fromData(data);
         return null;
     }
 
@@ -86,6 +87,7 @@ public class ModelBuilder {
         if (type.equals("checkBox")) return (FieldData<U>) new CheckBoxData().fromData(data);
         if (type.equals("freetext")) return (FieldData<U>) new FreeTextData().fromData(data);
         if (type.equals("textarea")) return (FieldData<U>) new TextAreaData().fromData(data);
+        if (type.equals("datePicker")) return (FieldData<U>) new DataPickerData().fromData(data);
         return null;
     }
 

dmp-backend/web/src/main/java/eu/eudat/logic/utilities/documents/word/WordBuilder.java

@@ -226,6 +226,8 @@ public class WordBuilder {
                 return field.getValue();
             case "textarea":
                 return field.getValue();
+            case "datepicker":
+                return field.getValue();
         }
         return null;
     }

dmp-backend/web/src/main/java/eu/eudat/models/data/components/commons/datafield/DataPickerData.java

@@ -0,0 +1,34 @@
+package eu.eudat.models.data.components.commons.datafield;
+
+import org.w3c.dom.Document;
+import org.w3c.dom.Element;
+
+import java.util.Map;
+
+public class DataPickerData extends FieldData<DataPickerData> {
+    @Override
+    public DataPickerData fromData(Object data) {
+        if (data != null) {
+            this.setLabel((String) ((Map<String, Object>) data).get("label"));
+        }
+        return this;
+    }
+
+    @Override
+    public Object toData() {
+        return null;
+    }
+
+    @Override
+    public Element toXml(Document doc) {
+        Element root = doc.createElement("data");
+        root.setAttribute("label", this.getLabel());
+        return root;
+    }
+
+    @Override
+    public DataPickerData fromXml(Element item) {
+        this.setLabel(item != null ? item.getAttribute("label") : "");
+        return this;
+    }
+}

dmp-frontend/src/app/core/common/enum/dataset-profile-field-view-style.ts

@@ -4,5 +4,7 @@ export enum DatasetProfileFieldViewStyle {
 	ComboBox = "combobox",
 	CheckBox = "checkBox",
 	FreeText = "freetext",
-	RadioBox = "radiobox"
+	RadioBox = "radiobox",
+	DatePicker = "datePicker"
+
 }

dmp-frontend/src/app/core/model/dataset-profile-definition/field-data/field-data.ts

@@ -40,3 +40,7 @@ export interface FieldDataOption extends FieldData {
 	label: string;
 	value: string;
 }
+
+export interface DatePickerFieldData extends FieldData {
+
+}

dmp-frontend/src/app/core/services/utilities/enum-utils.service.ts

@@ -71,6 +71,7 @@ export class EnumUtils {
 			case DatasetProfileFieldViewStyle.FreeText: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.FREE-TEXT');
 			case DatasetProfileFieldViewStyle.RadioBox: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.RADIO-BOX');
 			case DatasetProfileFieldViewStyle.TextArea: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.TEXT-AREA');
+			case DatasetProfileFieldViewStyle.DatePicker: return this.language.instant('TYPES.DATASET-PROFILE-FIELD-VIEW-STYLE.DATE-PICKER');
 		}
 	}
 

dmp-frontend/src/app/ui/admin/dataset-profile/admin/field-data/date-picker-data-editor-models.ts

@@ -0,0 +1,19 @@
+import { FormGroup } from '@angular/forms';
+import { FieldDataEditorModel } from './field-data-editor-model';
+import { DatePickerFieldData } from '../../../../../core/model/dataset-profile-definition/field-data/field-data';
+
+export class DatePickerDataEditorModel extends FieldDataEditorModel<DatePickerDataEditorModel> {
+    public label: string;
+    
+	buildForm(): FormGroup {
+		const formGroup = this.formBuilder.group({
+			label: [this.label]
+		});
+		return formGroup;
+	}
+
+	fromModel(item: DatePickerFieldData): DatePickerDataEditorModel {
+		this.label = item.label;
+		return this;
+	}
+}

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

@@ -13,6 +13,8 @@ import { TextAreaFieldDataEditorModel } from './field-data/text-area-field-data-
 import { WordListFieldDataEditorModel } from './field-data/word-list-field-data-editor-model';
 import { ViewStyleEditorModel } from './view-style-editor-model';
 import { VisibilityEditorModel } from './visibility-editor-model';
+import { DatasetProfileEditorDatePickerFieldComponent } from '../editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component';
+import { DatePickerDataEditorModel } from './field-data/date-picker-data-editor-models';
 
 export class FieldEditorModel extends BaseFormModel {
 
@@ -45,6 +47,7 @@ export class FieldEditorModel extends BaseFormModel {
 				if (this.viewStyle.renderStyle === 'textarea') { this.data = new TextAreaFieldDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'freetext') { this.data = new FreeTextFieldDataEditorModel().fromModel(item.data); }
 				if (this.viewStyle.renderStyle === 'booleanDecision') { this.data = new BooleanDecisionFieldDataEditorModel().fromModel(item.data); }
+				if (this.viewStyle.renderStyle === 'datePicker') { this.data = new DatePickerDataEditorModel().fromModel(item.data); }
 			}
 		}
 		return this;

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

@@ -2,10 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonFormsModule } from '../../../common/forms/common-forms.module';
 import { CommonUiModule } from '../../../common/ui/common-ui.module';
 import { FormattingModule } from '../../../core/formatting.module';
-import { ConfirmationDialogModule } from '../../../library/confirmation-dialog/confirmation-dialog.module';
 import { DatasetProfileRoutingModule } from './dataset-profile.routing';
-import { DatasetProfileEditorCompositeFieldComponent } from './editor/components/composite-field/dataset-profile-editor-composite-field.component';
 import { DatasetProfileEditorDefaultValueComponent } from './editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component';
+import { DatasetProfileEditorCompositeFieldComponent } from './editor/components/composite-field/dataset-profile-editor-composite-field.component';
 import { DatasetProfileEditorAutoCompleteFieldComponent } from './editor/components/field-type/auto-complete/dataset-profile-editor-auto-complete-field.component';
 import { DatasetProfileEditorBooleanDecisionFieldComponent } from './editor/components/field-type/boolean-decision/dataset-profile-editor-boolean-decision-field.component';
 import { DatasetProfileEditorCheckboxFieldComponent } from './editor/components/field-type/checkbox/dataset-profile-editor-checkbox-field.component';
@@ -21,7 +20,8 @@ import { DatasetProfileEditorSectionComponent } from './editor/components/sectio
 import { DatasetProfileEditorComponent } from './editor/dataset-profile-editor.component';
 import { DatasetProfileCriteriaComponent } from './listing/criteria/dataset-profile.component';
 import { DatasetProfileListingComponent } from './listing/dataset-profile-listing.component';
-import { DatasetProfilePreviewerComponent } from './preview/dataset-profile-preview.component';
+import { ConfirmationDialogModule } from '../../../library/confirmation-dialog/confirmation-dialog.module';
+import { DatasetProfileEditorDatePickerFieldComponent } from './editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component';
 
 @NgModule({
 	imports: [
@@ -47,9 +47,10 @@ import { DatasetProfilePreviewerComponent } from './preview/dataset-profile-prev
 		DatasetProfileEditorFreeTextFieldComponent,
 		DatasetProfileEditorRadioBoxFieldComponent,
 		DatasetProfileEditorTextAreaFieldComponent,
+		DatasetProfileEditorDatePickerFieldComponent,
 		DatasetProfileEditorWordListFieldComponent,
-		DatasetProfileEditorDefaultValueComponent,
+		DatasetProfileEditorDefaultValueComponent
-		DatasetProfilePreviewerComponent
+
 	],
 	entryComponents: [
 	]

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-profile-editor-default-value/component-profile-editor-default-value.component.html

@@ -60,4 +60,15 @@
         <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
     </mat-form-field>
 
+    <!-- DatePicker -->
+    <mat-form-field class="col-12" *ngIf="viewStyle === viewStyleEnum.DatePicker">
+            <!--(focus)="date.open()" (click)="date.open()"-->
+            <input matInput 
+                [placeholder]="placeHolder" class="table-input" [matDatepicker]="date"
+                [formControl]="form" [required]="required">
+            <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+            <mat-datepicker #date></mat-datepicker>
+            <mat-error *ngIf="form.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+            </mat-error>
+        </mat-form-field>
 </div>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component.html

@@ -0,0 +1,9 @@
+<div class="row" *ngIf="form.get('data')">
+    <h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-DATE-PICKER-TITLE'
+		| translate}}</h5>
+    <mat-form-field class="col-12">
+        <input matInput type="string"
+            placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-CHECKBOX-PLACEHOLDER' | translate}}"
+            [formControl]="form.get('data').get('label')">
+    </mat-form-field>
+</div>

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component.scss

@@ -0,0 +1,3 @@
+.full-width {
+  width: 100%;
+}

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/datepicker/dataset-profile-editor-date-picker-field.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DatePickerDataEditorModel } from '../../../../admin/field-data/date-picker-data-editor-models';
+
+@Component({
+	selector: 'app-dataset-profile-editor-date-picker-field-component',
+	styleUrls: ['./dataset-profile-editor-date-picker-field.component.scss'],
+	templateUrl: './dataset-profile-editor-date-picker-field.component.html'
+})
+export class DatasetProfileEditorDatePickerFieldComponent implements OnInit {
+
+	@Input() form: FormGroup;
+	private data: DatePickerDataEditorModel = new DatePickerDataEditorModel();
+
+	ngOnInit() {
+		if (!this.form.get('data')) { this.form.addControl('data', this.data.buildForm()); }
+	}
+}

dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field-type/free-text/dataset-profile-editor-free-text-field.component.html

@@ -1,8 +1,11 @@
 <div class="row" *ngIf="form.get('data')">
 
-	<h5 style="font-weight: bold" class="col-12">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-TITLE' | translate}}</h5>
+	<h5 style="font-weight: bold" class="col-12">
+		{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-TITLE' | translate}}</h5>
 
 	<mat-form-field class="col-12">
-		<input matInput type="string" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-PLACEHOLDER' | translate}}" [formControl]="form.get('data').get('label')">
+		<input matInput type="string"
+			placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-FREE-TEXT-PLACEHOLDER' | translate}}"
+			[formControl]="form.get('data').get('label')">
 	</mat-form-field>
 </div>

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

@@ -15,6 +15,7 @@
 			<mat-option [value]="viewStyleEnum.FreeText">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.FreeText)}}</mat-option>
 			<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
 			<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
+			<mat-option [value]="viewStyleEnum.DatePicker">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatePicker)}}</mat-option>
 		</mat-select>
 		<mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 	</mat-form-field>
@@ -41,6 +42,8 @@
 	<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
 	<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
 	<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
+	<app-dataset-profile-editor-date-picker-field-component *ngSwitchCase="viewStyleEnum.DatePicker" class="col-12" [form]="form"></app-dataset-profile-editor-date-picker-field-component>
+	
 	<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
 	 [form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
 	<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>

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

@@ -13,6 +13,7 @@ import { RadioBoxFieldDataEditorModel } from '../../../admin/field-data/radio-bo
 import { TextAreaFieldDataEditorModel } from '../../../admin/field-data/text-area-field-data-editor-model';
 import { WordListFieldDataEditorModel } from '../../../admin/field-data/word-list-field-data-editor-model';
 import { RuleEditorModel } from '../../../admin/rule-editor-model';
+import { DatePickerDataEditorModel } from '../../../admin/field-data/date-picker-data-editor-models';
 
 @Component({
 	selector: 'app-dataset-profile-editor-field-component',
@@ -66,6 +67,9 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 						case DatasetProfileFieldViewStyle.TextArea:
 							this.form.addControl('data', new TextAreaFieldDataEditorModel().buildForm());
 							break;
+						case DatasetProfileFieldViewStyle.DatePicker:
+							this.form.addControl('data', new DatePickerDataEditorModel().buildForm());
+							break;
 					}
 				}
 			});
@@ -80,6 +84,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements
 			case DatasetProfileFieldViewStyle.FreeText:
 			case DatasetProfileFieldViewStyle.ComboBox:
 			case DatasetProfileFieldViewStyle.BooleanDecision:
+			case DatasetProfileFieldViewStyle.DatePicker:
 				return false;
 			default:
 				return false;

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

@@ -147,7 +147,7 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 	}
 
 	onSubmit() {
-		const data = this.form.value;
+		let data = this.form.value;
 
 		if (this.datasetProfileId) {
 			this.datasetProfileService.updateForm(this.datasetProfileId, data)
@@ -156,6 +156,8 @@ export class DatasetProfileEditorComponent extends BaseComponent implements OnIn
 					this.router.navigate(['/dataset-profiles']);
 				});
 		} else {
+			this.form.get('status').setValue(0);
+			data = this.form.value;
 			this.datasetProfileService.createForm(data)
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(() => {

dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-field/form-field.component.html

@@ -1,44 +1,57 @@
-<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)" [id]="this.form.get('id').value"
+<div *ngIf="form && this.visibilityRulesService.checkElementVisibility(this.form.get('id').value)"
- [formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle" class="dynamic-form-field row">
+	[id]="this.form.get('id').value" [formGroup]="form" [ngSwitch]="this.form.get('viewStyle').value.renderStyle"
+	class="dynamic-form-field row">
 
 	<h5 *ngIf="this.form.get('title').value && !isChild">{{this.form.get('title').value}}</h5>
 
-	<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}</h5>
+	<h5 *ngIf="this.form.get('description').value && !isChild" class="col-12">{{this.form.get('description').value}}
-	<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12"><i>{{this.form.get('extendedDescription').value}}</i></h5>
+	</h5>
+	<h5 *ngIf="this.form.get('extendedDescription').value && !isChild" class="col-12">
+		<i>{{this.form.get('extendedDescription').value}}</i></h5>
 
 	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.FreeText" class="col-12">
-		<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}" [required]="form.get('validationRequired').value">
+		<input matInput [formControl]="form.get('value')" placeholder="{{form.get('data').value.label}}"
+			[required]="form.get('validationRequired').value">
 		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
 			| translate}}</mat-error>
 	</mat-form-field>
 
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.ComboBox" class="col-12">
 		<div class="row">
-			<mat-form-field class="col-md-12" *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
+			<mat-form-field class="col-md-12"
-				<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [formControl]="form.get('value')"
+				*ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.Autocomplete">
-				 [configuration]="singleAutoCompleteConfiguration" [required]="form.get('validationRequired').value">
+				<app-single-auto-complete placeholder="{{ form.get('data').value.label | translate }}"
-				</app-single-auto-complete>
+					[formControl]="form.get('value')" [configuration]="singleAutoCompleteConfiguration"
-				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-			</mat-form-field>
-			<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList" class="col-md-12">
-				<mat-select [formControl]="form.get('value')" placeholder="{{ form.get('data').value.label | translate }}"
 					[required]="form.get('validationRequired').value">
-					<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}</mat-option>
+				</app-single-auto-complete>
+				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				</mat-error>
+			</mat-form-field>
+			<mat-form-field *ngIf="form.get('data').value.type === datasetProfileComboBoxTypeEnum.WordList"
+				class="col-md-12">
+				<mat-select [formControl]="form.get('value')"
+					placeholder="{{ form.get('data').value.label | translate }}"
+					[required]="form.get('validationRequired').value">
+					<mat-option *ngFor="let opt of form.get('data').value.options" [value]="opt.value">{{opt.label}}
+					</mat-option>
 				</mat-select>
-				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+				</mat-error>
 			</mat-form-field>
 		</div>
 	</div>
 
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.CheckBox" class="col-12">
-		<mat-checkbox [formControl]="form.get('value')" [required]="form.get('validationRequired').value">{{form.get('data').value.label}}</mat-checkbox>
+		<mat-checkbox [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
+			{{form.get('data').value.label}}</mat-checkbox>
 	</div>
 
 	<mat-form-field *ngSwitchCase="datasetProfileFieldViewStyleEnum.TextArea" class="col-12">
-		<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10"
+		<textarea matInput [formControl]="form.get('value')" matTextareaAutosize matAutosizeMinRows="2"
-		 [required]="form.get('validationRequired').value" placeholder="{{ form.get('data').value.label | translate }}"></textarea>
+			matAutosizeMaxRows="10" [required]="form.get('validationRequired').value"
-		<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix aria-label="Clear"
+			placeholder="{{ form.get('data').value.label | translate }}"></textarea>
-		 (click)="this.form.patchValue({'value': ''})">
+		<button mat-icon-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix
+			aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
 			<mat-icon>close</mat-icon>
 		</button>
 		<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
@@ -47,17 +60,38 @@
 
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.BooleanDecision" class="col-12">
 		<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
-			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="true">Yes</mat-radio-button>
+			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="true">Yes
-			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="false">No</mat-radio-button>
+			</mat-radio-button>
+			<mat-radio-button class="radio-button-item" name="{{form.get('id').value}}" value="false">No
+			</mat-radio-button>
 		</mat-radio-group>
-		<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+		</mat-error>
 	</div>
 
 	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.RadioBox" class="col-12">
 		<mat-radio-group [formControl]="form.get('value')" [required]="form.get('validationRequired').value">
-			<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index" class="radio-button-item"
+			<mat-radio-button *ngFor="let option of form.get('data').value.options let index = index"
-			 [value]="option.value">{{option.label}}</mat-radio-button>
+				class="radio-button-item" [value]="option.value">{{option.label}}</mat-radio-button>
 		</mat-radio-group>
-		<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+		<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+		</mat-error>
 	</div>
+
+	<div *ngSwitchCase="datasetProfileFieldViewStyleEnum.DatePicker" class="col-12">
+		<mat-form-field class="col-12">
+			<input matInput placeholder="{{ form.get('data').value.label | translate }}" class="table-input"
+				[matDatepicker]="date" [required]="form.get('validationRequired').value"
+				[formControl]="form.get('value')">
+			<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+			<mat-datepicker #date></mat-datepicker>
+			<mat-error *ngIf="form.get('value').hasError('required')">
+				{{'GENERAL.VALIDATION.REQUIRED' | translate}}
+			</mat-error>
+		</mat-form-field>
+	</div>
+
+
+
+
 </div>

dmp-frontend/src/assets/i18n/en.json

@@ -136,7 +136,11 @@
 						"FIELD-AUTOCOMPLETE-LABEL": "Label",
 						"FIELD-AUTOCOMPLETE-VALUE": "Value",
 						"FIELD-AUTOCOMPLETE-URL": "Url",
-						"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root"
+						"FIELD-AUTOCOMPLETE-OPTIONS-ROOT": "Options Root",
+						"FIELD-DATE-PICKER-TITLE": "Date Picker",
+						"FIELD-DATE-PICKER-PLACEHOLDER": "Input Placeholder",
+						"FIELD-DATE-PICKER-LABEL": "Label",
+						"FIELD-DATE-PICKER-VALUE": "Value"
 					},
 					"DEFAULT-VALUES": {
 						"NONE": "None",
@@ -487,7 +491,8 @@
 			"COMBO-BOX": "Combo Box",
 			"FREE-TEXT": "Free Text",
 			"RADIO-BOX": "Radio Box",
-			"TEXT-AREA": "Text Area"
+			"TEXT-AREA": "Text Area",
+			"DATE-PICKER":"Date Picker"
 		},
 		"DATASET-PROFILE-COMBO-BOX-TYPE": {
 			"WORD-LIST": "Word List",