From fdc0d3a8b8bbdeaead4459134b7f20a57e40447f Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Mon, 3 Jun 2019 12:01:42 +0300
Subject: [PATCH] Dataset editor restyle - 1st commit

---
 .../dataset-editor.component.html             |  42 ++++--
 .../dataset-wizard.component.html             | 127 +++++++++++++++-
 .../dataset-wizard.component.scss             | 135 +++++++++++------
 .../dataset-wizard.component.ts               | 140 ++++++++++++------
 .../src/app/ui/dataset/dataset.module.ts      |   2 +
 .../form-section/form-section.component.scss  |   1 +
 .../dataset-description-form.component.html   |   2 +-
 .../dataset-description-form.component.scss   |  10 +-
 dmp-frontend/src/assets/css/demo.css          |  14 +-
 9 files changed, 348 insertions(+), 125 deletions(-)

diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
index b53e87f72..1a82038bb 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.html
@@ -1,17 +1,27 @@
-<div class=" row dataset-editor" [formGroup]="formGroup">
-	<mat-form-field class="col-md-6">
-		<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="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>
-	<mat-form-field class="col-md-6">
-		<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
-		<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
-		<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-	</mat-form-field>
-	<mat-form-field class="col-12">
-		<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></textarea>
-		<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
-		<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-	</mat-form-field>
+<div class="container-fluid">
+	<div class="row dataset-editor" [formGroup]="formGroup">
+		<div class="col-12">
+			<div class="row">
+				<mat-form-field class="col-6">
+					<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="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="row">
+				<mat-form-field class="col-6">
+					<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
+					<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
+					<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				</mat-form-field>
+			</div>
+			<div class="row">
+				<mat-form-field class="col-6">
+					<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></textarea>
+					<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
+					<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				</mat-form-field>
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
index 3d1387380..ecc42e566 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
@@ -1,4 +1,114 @@
 <div class="main-content">
+	<div class="container-fluid">
+		<div class="card dataset-wizard">
+			<div class="card-header card-header-plain d-flex">
+				<div class="card-desc d-flex flex-column justify-content-center">
+					<h4 *ngIf="!isNew" class="card-title">{{datasetWizardModel?.label}}
+						<span *ngIf="this.formGroup && this.formGroup.dirty"> -
+							{{ 'GENERAL.STATUSES.EDIT' | translate }}</span>
+					</h4>
+					<div *ngIf="isNew" class="card-desc new-dataset d-flex flex-column justify-content-center">
+						<h4 class="card-title">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h4>
+					</div>
+				</div>
+				<div class="d-flex ml-auto p-2" *ngIf="datasetWizardModel && !isNew">
+					<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon"
+						*ngIf="!publicMode" (click)="$event.stopImmediatePropagation();">
+						<mat-icon class="more-horiz">more_horiz</mat-icon>
+					</button>
+					<mat-menu #actionsMenu="matMenu">
+						<button mat-menu-item (click)="openDmpSearchDialogue()" class="menu-item">
+							<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
+						</button>
+						<button mat-menu-item *ngIf="!viewOnly && !isCopy"
+							(click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)"
+							class="menu-item">
+							<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
+						</button>
+						<button mat-menu-item (click)="advancedClicked()" class="menu-item">
+							<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.ADV-EXP' | translate }}
+						</button>
+						<button mat-menu-item *ngIf="needsUpdate()" class="menu-item"
+							(click)="openUpdateDatasetProfileDialogue();">{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}</button>
+					</mat-menu>
+					<button mat-raised-button color="primary" (click)="downloadPDF()"
+						class="lightblue-btn ml-2 text-uppercase">
+						<mat-icon>save_alt</mat-icon> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
+					</button>
+				</div>
+			</div>
+			<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
+				<div class="d-flex flex-column">
+					<mat-tab-group class="mt-3">
+						<mat-tab>
+							<ng-template mat-tab-label class="tab-label">
+								<i class="material-icons-outlined mr-2">view_agenda</i>
+								DATASET DETAILS
+							</ng-template>
+							<form *ngIf="formGroup" [formGroup]="formGroup" class="p-3">
+								<mat-form-field class="col-md-6">
+									<app-single-auto-complete [required]="true" [formControl]="formGroup.get('dmp')"
+										placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}"
+										[configuration]="dmpAutoCompleteConfiguration">
+									</app-single-auto-complete>
+								</mat-form-field>
+								<mat-form-field class="col-md-6">
+									<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}"
+										[required]="true" formControlName="profile">
+										<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id" (onSelectionChange)="selctionChanged()">
+											{{profile.label}}
+										</mat-option>
+									</mat-select>
+									<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">
+										{{formGroup.get('profile').getError('backendError').message}}</mat-error>
+								</mat-form-field>
+								<app-dataset-editor-component [formGroup]="formGroup"></app-dataset-editor-component>
+							</form>
+						</mat-tab>
+						<mat-tab>
+							<ng-template mat-tab-label>
+								<mat-icon class="mr-2">work_outline</mat-icon>
+								EXTERNAL REFERENCES
+							</ng-template>
+							<form *ngIf="formGroup" [formGroup]="formGroup" class="p-3">
+								<app-dataset-external-references-editor-component [formGroup]="formGroup"
+									[viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
+							</form>
+						</mat-tab>
+						<mat-tab [disabled]="isNew && (formGroup.get('profile').disabled || formGroup.get('profile').invalid)">
+							<ng-template mat-tab-label>
+								<div class="d-flex">
+									<mat-icon class="mr-2">library_books</mat-icon>
+									DESCRIPTION
+								</div>
+							</ng-template>
+							<app-dataset-description-form
+								*ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
+								[form]="this.formGroup.get('datasetProfileDefinition')"
+								[visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules"
+								[datasetProfileId]="formGroup.get('profile').value">
+							</app-dataset-description-form>
+						</mat-tab>
+					</mat-tab-group>
+
+					<div class="actions">
+						<button mat-raised-button (click)="cancel()" type="button" class="cancelButton">
+							{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
+						</button>
+						<button *ngIf="datasetWizardModel.status == 0 || isNew" mat-raised-button class="saveButton" (click)="save();"
+							type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
+						<button *ngIf="datasetWizardModel.status == 0 || isNew" mat-raised-button [disabled]="!formGroup.valid" class="saveAndFinalizeButton"
+							(click)="saveFinalize();"
+							type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-FINALISE' | translate }}</button>
+						<div class="fill-space"></div>
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
+
+<!-- <div class="main-content">
 	<div class="container-fluid">
 		<div class="dataset-wizard">
 			<h3 *ngIf="isNew">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h3>
@@ -18,9 +128,9 @@
 				</mat-menu>
 				<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode">
 					<mat-icon>more_vert</mat-icon>
-				</button>
+				</button> -->
 
-				<!-- <div class="col"></div>
+<!-- <div class="col"></div>
 				<div class="col-auto" *ngIf=" !viewOnly">
 					<button *ngIf="!editMode" class="col-auto" mat-icon-button (click)="enableForm()">
 						<mat-icon class="mat-24">edit</mat-icon>
@@ -29,7 +139,8 @@
 						<mat-icon class="mat-24">lock</mat-icon>
 					</button>
 				</div> -->
-			</div>
+
+<!-- </div>
 			<div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition">
 				<button mat-raised-button color="primary" *ngIf="!isNew && !viewOnly && !isCopy" class="deleteButton" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)"
 				type="button">{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}</button>
@@ -109,8 +220,9 @@
 								</div>
 							</div>
 						</div>
-					</mat-step>
-					<!-- <mat-step class="step-container">
+					</mat-step> -->
+
+<!-- <mat-step class="step-container">
 						<ng-template matStepLabel>{{'DATASET-WIZARD.FOURTH-STEP.TITLE' | translate}}</ng-template>
 						<div *ngIf="this.isActiveStep(3)">
 							<app-dynamic-form-pending-questions-display class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form-pending-questions-display>
@@ -120,8 +232,9 @@
 							</div>
 						</div>
 					</mat-step> -->
-				</mat-horizontal-stepper>
+
+<!-- </mat-horizontal-stepper>
 			</div>
 		</div>
 	</div>
-</div>
+</div> -->
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
index 5c53329ef..a3b62250a 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
@@ -1,47 +1,92 @@
 .dataset-wizard {
-	.step-container {
-		margin-top: 1em;
-	}
-	.external-item-card {
-		margin-top: 1em;
-	}
-	.external-item-action-row,
-	.description-action-row {
-		margin-top: 1em;
-	}
-	.deleteButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
-	.saveButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
-	.saveAndFinalizeButton {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
-	.downloadPDF {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
-	.downloadXML {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
-	.downloadDOCX {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
-	.updateDatasetProfile {
-		margin-top: 15px;
-		margin-bottom: 15px;
-		margin-right: 15px;
-	}
+  .step-container {
+    margin-top: 1em;
+  }
+  .external-item-card {
+    margin-top: 1em;
+  }
+  .external-item-action-row,
+  .description-action-row {
+    margin-top: 1em;
+  }
+  .deleteButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+  .cancelButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+  .saveButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+  .saveAndFinalizeButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+  .downloadPDF {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+  .downloadXML {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+  .downloadDOCX {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+  .updateDatasetProfile {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .actions > button {
+    background-color: #0070c0 !important;
+    color: #ffffff;
+    text-transform: uppercase;
+  }
+
+  .more-horiz {
+    font-size: 28px;
+    color: #aaaaaa;
+  }
+
+  .more-icon :hover {
+    color: #4687e6;
+  }
+
+  .new-dataset {
+    height: 3.5em;
+  }
+}
+
+.menu-item {
+  width: 248px;
+}
+
+::ng-deep .mat-tab-labels {
+  justify-content: space-between;
+}
+
+::ng-deep .mat-tab-label-content {
+  text-transform: uppercase;
+}
+
+::ng-deep .mat-ink-bar {
+  background-color: #0070c0 !important;
 }
diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
index cc583ff98..239988f19 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
@@ -1,7 +1,7 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog, MatSnackBar, MatStepper } from '@angular/material';
-import { ActivatedRoute, Params, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import * as FileSaver from 'file-saver';
 import { Observable } from 'rxjs';
@@ -9,6 +9,7 @@ import { takeUntil } from 'rxjs/operators';
 import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
 import { BaseComponent } from '../../../core/common/base/base.component';
 import { DatasetStatus } from '../../../core/common/enum/dataset-status';
+import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
 import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile';
 import { DmpModel } from '../../../core/model/dmp/dmp';
 import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
@@ -19,17 +20,15 @@ import { DatasetWizardService } from '../../../core/services/dataset-wizard/data
 import { DmpService } from '../../../core/services/dmp/dmp.service';
 import { ExternalSourcesConfigurationService } from '../../../core/services/external-sources/external-sources-configuration.service';
 import { ExternalSourcesService } from '../../../core/services/external-sources/external-sources.service';
+import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
 import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration';
+import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
+import { ExportMethodDialogComponent } from '../../../library/export-method-dialog/export-method-dialog.component';
 import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
 import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
 import { DatasetDescriptionFormEditorModel } from '../../misc/dataset-description-form/dataset-description-form.model';
-import { DatasetWizardEditorModel } from './dataset-wizard-editor.model';
-import { SnackBarNotificationLevel, UiNotificationService, SnackBarNotification } from '../../../core/services/notification/ui-notification-service';
-import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
-import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
 import { DatasetCopyDialogueComponent } from './dataset-copy-dialogue/dataset-copy-dialogue.component';
-import { FormControl } from '@angular/forms';
-import { error } from 'selenium-webdriver';
+import { DatasetWizardEditorModel } from './dataset-wizard-editor.model';
 
 @Component({
 	selector: 'app-dataset-wizard-component',
@@ -50,7 +49,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	datasetWizardModel: DatasetWizardEditorModel;
 	isNew = true;
 	isCopy = false;
-	formGroup: FormGroup;
+	formGroup: FormGroup = null;
 	datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel;
 
 	availableProfiles: DatasetProfileModel[] = [];
@@ -322,18 +321,50 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 			this.formGroup.get('dmp').valueChanges
 				.pipe(takeUntil(this._destroyed))
 				.subscribe(x => {
-					if (x) { this.loadDatasetProfiles(); }
-					else {
-						this.availableProfiles = [];
-						this.formGroup.get('profile').reset();
-					}
+					this.dmpValueChanged(x);
 				});
+			this.formGroup.get('profile').valueChanges
+				.pipe(takeUntil(this._destroyed))
+				.subscribe(x => {
+					this.datasetProfileValueChanged(x);
+				});
+			this.dmpValueChanged(null);
 		}
-		this.route.params
+
+		// this.route.params
+		// 	.pipe(takeUntil(this._destroyed))
+		// 	.subscribe((params: Params) => {
+		// 		const itemId = params['id'];
+		// 		if (itemId != null) { setTimeout(() => this.stepper.selectedIndex = 2); }
+		// 	});
+	}
+
+	dmpValueChanged(dmp: DmpListingModel) {
+		if (dmp) {
+			this.formGroup.get('profile').enable();
+			this.loadDatasetProfiles();
+		}
+		else {
+			this.availableProfiles = [];
+			this.formGroup.get('profile').reset();
+			this.formGroup.get('profile').disable();
+			this.formGroup.removeControl('datasetProfileDefinition');
+		}
+	}
+
+	datasetProfileValueChanged(profiledId: string) {
+		console.log("inhere");
+		if (profiledId && profiledId.length > 0) {
+			this.formGroup.removeControl('datasetProfileDefinition');
+			this.getDefinition();
+		}
+	}
+
+	selctionChanged() {
+		this.formGroup.get('profile').valueChanges
 			.pipe(takeUntil(this._destroyed))
-			.subscribe((params: Params) => {
-				const itemId = params['id'];
-				if (itemId != null) { setTimeout(() => this.stepper.selectedIndex = 2); }
+			.subscribe(x => {
+				this.datasetProfileValueChanged(x);
 			});
 	}
 
@@ -360,20 +391,18 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	}
 
 	public cancel(): void {
-		//this.router.navigate(['/plans']);
+		this.router.navigate(['/datasets']);
 	}
 
 	getDefinition() {
-		if (this.formGroup.invalid) { setTimeout(() => this.stepper.selectedIndex = 0); return; }
-		if (this.isNew) {
-			this.datasetWizardService.getDefinition(this.formGroup.get('profile').value)
-				.pipe(takeUntil(this._destroyed))
-				.subscribe(item => {
-					this.datasetWizardModel.datasetProfileDefinition = new DatasetDescriptionFormEditorModel().fromModel(item);
-					this.datasetProfileDefinitionModel = this.datasetWizardModel.datasetProfileDefinition;
-					this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
-				});
-		}
+		// if (this.formGroup.invalid) { setTimeout(() => this.stepper.selectedIndex = 0); return; }
+		this.datasetWizardService.getDefinition(this.formGroup.get('profile').value)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(item => {
+				this.datasetWizardModel.datasetProfileDefinition = new DatasetDescriptionFormEditorModel().fromModel(item);
+				this.datasetProfileDefinitionModel = this.datasetWizardModel.datasetProfileDefinition;
+				this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
+			});
 	}
 
 	formSubmit(): void {
@@ -389,17 +418,17 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 		this.datasetWizardService.createDataset(this.formGroup.value)
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(
-			complete => {
-				this.datasetWizardService.getSingle(complete.id)
-					.pipe(takeUntil(this._destroyed))
-					.subscribe(
-					result => {
-						this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(result);
-					}
-					);
-				this.onCallbackSuccess();
-			},
-			error => this.onCallbackError(error)
+				complete => {
+					this.datasetWizardService.getSingle(complete.id)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
+							result => {
+								this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(result);
+							}
+						);
+					this.onCallbackSuccess();
+				},
+				error => this.onCallbackError(error)
 			);
 	}
 
@@ -439,8 +468,6 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 	}
 
 	downloadPDF(): void {
-
-
 		this.datasetWizardService.downloadPDF(this.downloadDocumentId)
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(response => {
@@ -474,6 +501,27 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 			});
 	}
 
+	advancedClicked() {
+		const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
+			maxWidth: '400px',
+			data: {
+				message: "Download as:",
+				XMLButton: "XML",
+				documentButton: "Document",
+				pdfButton: "PDF"
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result == "pdf") {
+				this.downloadPDF();
+			} else if (result == "xml") {
+				this.downloadXML();
+			} else if (result == "doc") {
+				this.downloadDOCX();
+			}
+		});
+	}
+
 	getFilenameFromContentDispositionHeader(header: string): string {
 		const regex: RegExp = new RegExp(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/g);
 
@@ -530,7 +578,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 
 	openConfirm(dmpLabel, id): void {
 		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-			//maxWidth: '300px',
+			maxWidth: '300px',
 			data: {
 				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
 				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
@@ -542,8 +590,8 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
 				this.datasetWizardService.delete(id)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(
-					complete => { this.onCallbackSuccess(); this.router.navigateByUrl('/datasets') },
-					error => this.onCallbackError(error)
+						complete => { this.onCallbackSuccess(); this.router.navigateByUrl('/datasets') },
+						error => this.onCallbackError(error)
 					);
 			}
 		});
diff --git a/dmp-frontend/src/app/ui/dataset/dataset.module.ts b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
index 791f285ff..1296235b4 100644
--- a/dmp-frontend/src/app/ui/dataset/dataset.module.ts
+++ b/dmp-frontend/src/app/ui/dataset/dataset.module.ts
@@ -19,6 +19,7 @@ import { DatasetListingComponent } from './listing/dataset-listing.component';
 import { DatasetCopyDialogueComponent } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
 import { DatasetUploadDialogue } from './listing/criteria/dataset-upload-dialogue/dataset-upload-dialogue.component';
 import { DatasetListingItemComponent } from './listing/listing-item/dataset-listing-item.component';
+import { ExportMethodDialogModule } from '../../library/export-method-dialog/export-method-dialog.module';
 
 @NgModule({
 	imports: [
@@ -28,6 +29,7 @@ import { DatasetListingItemComponent } from './listing/listing-item/dataset-list
 		ConfirmationDialogModule,
 		AutoCompleteModule,
 		ExternalSourcesModule,
+		ExportMethodDialogModule,
 		DatasetDescriptionFormModule,
 		DatasetRoutingModule
 	],
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss
index d9df0bba6..80e23cb0a 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.scss
@@ -1,5 +1,6 @@
 .dynamic-form-section {
 	.expansion-panel {
+		background-color: #eeeeee54;
 		margin-bottom: 1em;
 	}
 	.addOneFieldButton {
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html
index e0ad30eb6..4780ce4c1 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.html
@@ -1,5 +1,5 @@
 <form *ngIf="form" novalidate [formGroup]="form">
-	<div class="dynamic-form-editor row">
+	<div class="dynamic-form-editor">
 		<app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication>
 
 		<div class="col-12" id="form-container">
diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss
index f9bec7cd8..6bedcb460 100644
--- a/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss
+++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description-form.component.scss
@@ -1,11 +1,11 @@
 .dynamic-form-editor {
 	mat-vertical-stepper {
-		background-color: #e0e0e0;
+		background-color: #ffffff;
 	}
 }
 
 // .ng-sidebar {
-//     width: 40%;  
+//     width: 40%;
 // }
 
 // /* .toc-container {
@@ -31,12 +31,12 @@
 // }
 
 // .ng-sidebar-container {
-//     overflow: inherit !important; 
+//     overflow: inherit !important;
 
 // }
 
 // /* .ng-sidebar__content {
-//     overflow: inherit !important; 
+//     overflow: inherit !important;
 // } */
 
 // .alignment-center{
@@ -59,7 +59,7 @@
 
 //   .full-width{
 //       width:100%;
-//   } 
+//   }
 
 //   .full-height{
 //       height:100%;
diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css
index 56fb33041..5df37668f 100644
--- a/dmp-frontend/src/assets/css/demo.css
+++ b/dmp-frontend/src/assets/css/demo.css
@@ -1,3 +1,7 @@
+input:-webkit-autofill {
+	-webkit-box-shadow: inset 0 0 0px 9999px white;
+}
+
 *:focus {
 	outline: none !important;
 }
@@ -17,9 +21,9 @@ h4 {
 }
 
 h6 {
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    font-weight: 500;
+	font-size: 0.85rem;
+	text-transform: uppercase;
+	font-weight: 500;
 }
 
 .max-width-136 {
@@ -220,8 +224,8 @@ h6 {
 	/* font-size: 9px; */
 	/* font-weight: 500; */
 	white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .card [class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {