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

Jenkinsfile

@@ -0,0 +1,66 @@
+def pipelineContext = [:]
+
+pipeline {
+	agent any
+ 
+    options {
+        skipDefaultCheckout(true)
+    }
+
+    stages {
+		stage('Checkout') {
+			steps {
+				checkout scm
+			}
+		}
+        stage('Build API') {
+            steps {
+				script {
+					pipelineContext.apiImage = docker.build("open-dmp-api:${env.BUILD_ID}", "-f dmp-backend/Dockerfile.CI dmp-backend/")
+				}
+            }
+        }
+		stage('Build WebApp') {
+            steps {
+				script {
+					pipelineContext.webappImage = docker.build("open-dmp-webapp:${env.BUILD_ID}", "-f dmp-frontend/Dockerfile.CI dmp-frontend/")
+				}
+            }
+        }
+		//stage('SonarQube analysis') {
+		//	steps {
+		//		 script {
+		//			def scannerHome = tool 'SonarQube Scanner 4.3';
+		//			withSonarQubeEnv('SonarQube') { // If you have configured more than one global server connection, you can specify its name
+		//				sh "${scannerHome}/bin/sonar-scanner"
+		//			}
+		//		}
+		//	}
+		//}
+		//// waiting for sonar results based into the configured web hook in Sonar server which push the status back to jenkins
+        //stage('SonarQube scan result check') {
+        //    steps {
+        //        timeout(time: 2, unit: 'MINUTES') {
+        //            retry(3) {
+        //                script {
+        //                    def qg = waitForQualityGate()
+        //                    if (qg.status != 'OK') {
+        //                        error "Pipeline aborted due to quality gate failure: ${qg.status}"
+        //                    }
+        //                }
+        //            }
+        //        }
+        //    }
+        //}
+		stage('Pushing to Docker Registry') {
+            steps {
+				script {
+					docker.withRegistry('http://drepo.local.cite.gr', 'b2c651c1-9a3b-4a98-a6da-e1dd7a20f512') {
+						pipelineContext.apiImage.push()
+						pipelineContext.webappImage.push()
+					}
+				}
+            }
+        }
+    }
+}

dmp-backend/Dockerfile.CI

@@ -0,0 +1,15 @@
+FROM maven:3-jdk-8-alpine AS MAVEN_BUILD
+
+COPY pom.xml /build/
+COPY data /build/data/
+COPY elastic /build/elastic/
+COPY queryable /build/queryable/
+COPY web /build/web/
+
+WORKDIR /build/
+RUN mvn package
+
+FROM openjdk:8-jre-alpine
+WORKDIR /app
+COPY --from=MAVEN_BUILD /build/web/target/web-1.0-SNAPSHOT.jar /app/app.jar
+ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom" ,"-Dspring.profiles.active=${PROF}","-jar","/app.jar"]

dmp-frontend/Dockerfile.CI

@@ -0,0 +1,31 @@
+# stage1 as builder
+FROM node:12-alpine as builder
+
+# copy the package.json to install dependencies
+COPY package.json ./
+
+# Install the dependencies and make the folder
+RUN npm install && mkdir /src && mv ./node_modules ./src
+
+WORKDIR /src
+
+COPY . .
+
+# Build the project and copy the files
+RUN npm run ng build -- --deploy-url=/ --prod
+
+FROM nginx:alpine
+
+#!/bin/sh
+
+COPY nginx.conf.CI /etc/nginx/nginx.conf
+
+## Remove default nginx index page
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy from the stahg 1
+COPY --from=builder /src/dist /usr/share/nginx/html
+
+EXPOSE 8080
+
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

dmp-frontend/nginx.conf.CI

@@ -0,0 +1,28 @@
+server {
+
+  listen 8080;
+
+  sendfile on;
+
+  default_type application/octet-stream;
+
+
+  gzip on;
+  gzip_http_version 1.1;
+  gzip_disable      "MSIE [1-6]\.";
+  gzip_min_length   1100;
+  gzip_vary         on;
+  gzip_proxied      expired no-cache no-store private auth;
+  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+  gzip_comp_level   9;
+
+
+  root /usr/share/nginx/html;
+
+
+  location / {
+    try_files $uri $uri/ /index.html =404;
+	add_header Cache-Control "no-store, no-cache, must-revalidate";
+  }
+
+}

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html

@@ -65,13 +65,12 @@
 							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
 						</div>
-						<div *ngIf="this.step === this.maxStep && isNew" mat-raised-button type="button" class="col-auto stepper-btn dataset-next next-disabled ml-auto">
+						<div *ngIf="!formGroup.get('profile').value" mat-raised-button type="button" class="col-auto stepper-btn dataset-next next-disabled ml-auto">
 							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
 						</div>
-						<div *ngIf="this.step === 1 && !isNew" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset(formGroup.get('dmp').value.id)" target="_blank">
+						<div *ngIf="this.step === this.maxStep && !lockStatus && formGroup.get('profile').value" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto">
-							<mat-icon>add</mat-icon>
+							<div (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</div>
-							<div>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</div>
 						</div>
 					</div>
 				</div>

dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html

@@ -102,7 +102,7 @@
 				<div class="col-auto form">
 					<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewVersion]="isNewVersion" [isClone]="isClone" (onFormChanged)="formChanged()"></main-info>
 					<funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized" [isNewVersion]="isNewVersion" [isClone]="isClone" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
-					<license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
+					<license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></license-info>
 					<dataset-info [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
 
 					<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">

dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts

@@ -48,7 +48,6 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
 	isPublic: false;
 	parentDmpLabel: string;
 	isNewVersion: boolean = false;
-	isNewDataset: boolean = false;
 	isClone: boolean = true;
 	isNew: boolean = false;
 	isUserOwner: boolean = true;

dmp-frontend/src/app/ui/dmp/dmp.routing.ts

@@ -80,24 +80,24 @@ const routes: Routes = [
 			title: 'GENERAL.TITLES.DMP-NEW'
 		}
 	},
-	{
+	// {
-		path: 'new/dataset',
+	// 	path: 'new/dataset',
-		component: DmpEditorComponent,
+	// 	component: DmpEditorComponent,
-		canActivate: [AuthGuard],
+	// 	canActivate: [AuthGuard],
-		data: {
+	// 	data: {
-			breadcrumbs: 'new/dataset',
+	// 		breadcrumbs: 'new/dataset',
-			title: 'GENERAL.TITLES.DATASET-NEW'
+	// 		title: 'GENERAL.TITLES.DATASET-NEW'
-		}
+	// 	}
-	},
+	// },
-	{
+	// {
-		path: 'new/dataset/:dmpId',
+	// 	path: 'new/dataset/:dmpId',
-		component: DmpEditorComponent,
+	// 	component: DmpEditorComponent,
-		canActivate: [AuthGuard],
+	// 	canActivate: [AuthGuard],
-		data: {
+	// 	data: {
-			breadcrumbs: 'new/dataset',
+	// 		breadcrumbs: 'new/dataset',
-			title: 'GENERAL.TITLES.DATASET-NEW'
+	// 		title: 'GENERAL.TITLES.DATASET-NEW'
-		}
+	// 	}
-	},
+	// },
 	{
 		path: 'new_version/:id',
 		// component: DmpWizardComponent,

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

@@ -67,7 +67,6 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 	@Input() formGroup: FormGroup;
 	@Input() dmpId: string;
 	@Input() datasetId: string;
-	@Input() isNewDataset: boolean;
 	@Input() availableProfiles: DatasetProfileModel[];
 	@Output() formChanged: EventEmitter<any> = new EventEmitter();
 	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
@@ -103,9 +102,9 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 
 		this.datasetWizardModel = new DatasetWizardEditorModel();
 		this.registerFormListeners();
-		if (this.isNewDataset) {
+		// if (this.isNewDataset) {
-			this.loadDatasetProfiles();
+		// 	this.loadDatasetProfiles();
-		}
+		// }
 
 		this.profilesAutoCompleteConfiguration = {
 			filterFn: this.filterProfiles.bind(this),
@@ -198,20 +197,20 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 	}
 
 	registerFormListeners() {
-		this.formGroup.get('dmp').valueChanges
+		// this.formGroup.get('dmp').valueChanges
-			.pipe(takeUntil(this._destroyed))
+		// 	.pipe(takeUntil(this._destroyed))
-			.subscribe(x => {
+		// 	.subscribe(x => {
-				this.dmpValueChanged(x);
+		// 		this.dmpValueChanged(x);
-			});
+		// 	});
 
 		// if (this.isNewDataset) {
-			this.formGroup.get('profile').valueChanges
+			// this.formGroup.get('profile').valueChanges
-				.pipe(takeUntil(this._destroyed))
+			// 	.pipe(takeUntil(this._destroyed))
-				.subscribe(x => {
+			// 	.subscribe(x => {
-					if (!isNullOrUndefined(x)) {
+			// 		if (!isNullOrUndefined(x)) {
-						this.datasetProfileValueChanged(x.id);
+			// 			this.datasetProfileValueChanged(x.id);
-					}
+			// 		}
-				});
+			// 	});
 		// }
 	}
 
@@ -239,12 +238,12 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 		this.formGroup.valueChanges
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(val => {
-				this.formChanged.emit(val);
+				// this.formChanged.emit(val);
 			});
 	}
 
 	onFormChanged(event) {
-		this.formChanged.emit(event);
+		// this.formChanged.emit(event);
 	}
 
 	getDefinition(profileId: string) {

dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html

@@ -12,7 +12,7 @@
 					<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
 				</div>
 				<div class="profile-form">
-					<mat-form-field *ngIf="!isNewDataset">
+					<mat-form-field>
 						<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
@@ -23,14 +23,6 @@
 							<mat-icon class="icon-btn">view_list</mat-icon>
 						</button>
 					</mat-form-field>
-					<mat-form-field *ngIf="isNewDataset">
-						<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [formControl]="this.formGroup.get('datasets')['controls'][0].get('profile')">
-							<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
-								{{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>
 				</div>
 				<div class="col pl-0 pt-2 pb-3 d-flex">
 					<span class="not-found">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.FIELDS.HELP' | translate}}</span>

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

@@ -40,7 +40,6 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 	@Input() isPublic: boolean;
 	@Input() isFinalized: boolean;
 	@Input() isNewVersion: boolean;
-	@Input() isNewDataset: boolean;
 	@Input() isClone: boolean;
 	@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
 
@@ -99,23 +98,23 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 				subtitleFn: (item) => item['description']
 			};
 		}
-		if (this.formGroup.get('datasets')['controls'][0]) {
+		// if (this.formGroup.get('datasets')['controls'][0]) {
-			this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges.pipe(takeUntil(this._destroyed))
+		// 	this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges.pipe(takeUntil(this._destroyed))
-				.subscribe(x => {
+		// 		.subscribe(x => {
-					// this.registerFormListeners();
+					// //this.registerFormListeners();
-					if (this.formGroup.get('datasets')['controls'][0].get('dmp').value) {
+		// 			if (this.formGroup.get('datasets')['controls'][0].get('dmp').value) {
-						this.loadDatasetProfiles();
+		// 				this.loadDatasetProfiles();
-						this.profilesAutoCompleteConfiguration = {
+		// 				this.profilesAutoCompleteConfiguration = {
-							filterFn: this.filterProfiles.bind(this),
+		// 					filterFn: this.filterProfiles.bind(this),
-							initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
+		// 					initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
-							displayFn: (item) => item['label'],
+		// 					displayFn: (item) => item['label'],
-							titleFn: (item) => item['label'],
+		// 					titleFn: (item) => item['label'],
-							subtitleFn: (item) => item['description']
+		// 					subtitleFn: (item) => item['description']
-						};
+		// 				};
-						this.onFormChanged.emit();
+		// 				this.onFormChanged.emit();
-					}
+		// 			}
-				});
+		// 		});
-		}
+		// }
 	}
 
 	// Researchers

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

@@ -2,7 +2,7 @@
 	<div class="container-fluid">
 		<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
 			<!-- DMP Header -->
-			<div [hidden]="this.step >= stepsBeforeDatasets" *ngIf="!isNewDataset" class="fixed-editor-header">
+			<div [hidden]="this.step >= stepsBeforeDatasets" class="fixed-editor-header">
 				<div class="card editor-header">
 					<div class="col">
 						<div class="row">
@@ -28,113 +28,57 @@
 					</div>
 				</div>
 			</div>
-			<!-- Dataset Header -->
-			<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="(this.step !== i + stepsBeforeDatasets) && !isNewDataset" class="fixed-editor-header">
-				<div class="card dataset-editor-header" [style.height]="isNewDataset ? 'auto' : '113px'">
-					<div class="col">
-						<div class="row">
-							<div class="col info" *ngIf="!isNewDataset">
-								<div class="dataset-title">{{'DMP-EDITOR.TITLE.EDIT-DATASET' | translate}}</div>
-								<div class="dataset-subtitle">{{ dataset.get('label').value }} <span *ngIf="isDirty()" class="dataset-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
-								<div class="d-flex flex-direction-row pt-2">
-									<div class="col-auto dataset-part-of">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
-										<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
-									</div>
-									<div class="col-auto dmp-title">{{ formGroup.get('label').value }}</div>
-									<div class="col d-flex align-items-center">
-										<a [routerLink]="['/overview/' + formGroup.get('id').value]" target="_blank" class="pointer"><span class="material-icons">open_in_new</span></a>
-									</div>
-								</div>
-							</div>
-							<div class="col info" *ngIf="isNewDataset">
-								<div *ngIf="!hasDmpId" class="dataset-title">{{'DMP-EDITOR.TITLE.CREATE-DATASET' | translate}}</div>
-								<div *ngIf="hasDmpId" class="dataset-title">{{'DMP-EDITOR.TITLE.ADD-DATASET' | translate}} {{formGroup.get('datasets')['controls'][0].get('dmp').value.label}}</div>
-							</div>
-							<div class="row">
-								<div class="col-auto d-flex align-items-center p-0">
-									<button *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
-										{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
-									</button>
-								</div>
-								<div class="col-auto d-flex align-items-center">
-									<button *ngIf="!lockStatus && !isFinalized" mat-raised-button class="dataset-save-btn" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
-									<button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
-									<!-- <div *ngIf="!isNew && formGroup.enabled && !lockStatus">
-										<button *ngIf="!isFinalized" mat-raised-button type="submit" class="dataset-save-btn">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
-									</div> -->
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
 			<div class="row editor-content">
-				<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets || isNewDataset, 'dataset-stepper': this.step >= stepsBeforeDatasets && !isNewDataset}">
+				<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
 					<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
 					<div class="stepper-options">
 						<ol class="stepper-list">
-							<li *ngIf="!isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
+							<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
-							<li *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}}</li>
+							<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
-
+							<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (5)</li>
-							<li *ngIf="!isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
+							<li (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
-
-							<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (5)</li>
-
-							<li *ngIf="!isNewDataset" (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
-							<li *ngIf="isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
 
 							<!-- <li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}"> -->
-							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="isNewDataset ? changeStep(i + stepsBeforeDatasets, dataset) : editDataset(dataset.get('id').value)" class="active-dataset">
+							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="editDataset(dataset.get('id').value)" class="active-dataset">
 								<div class="d-flex flex-direction-row">
 									<div class="label" matTooltip="{{dataset.get('label').value}}">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}: {{ dataset.get('label').value }}</div>
-									<mat-icon *ngIf="dataset.get('status').value !== 1 && !isNewDataset" class="ml-2 mr-2 remove-dataset size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">close</mat-icon>
+									<mat-icon *ngIf="dataset.get('status').value !== 1" class="ml-2 mr-2 remove-dataset size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">close</mat-icon>
 									<mat-icon *ngIf="dataset.get('status').value === 1" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DATASET-STATUS.FINALISED' | translate}}">check</mat-icon>
 								</div>
-								<!-- <ul class="dataset-list">
-									<li *ngIf="!isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (5)</li>
-									<li *ngIf="isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }}</li>
-								</ul> -->
 							</li>
 						</ol>
-						<!-- <ul *ngIf="!isNewDataset && hasProfile() && !isFinalized" class="add-dataset-option">
+						<ul *ngIf="hasProfile() && !isNew && !isFinalized" class="add-dataset-option">
 							<li>
-								<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
+								<a class="add-dataset-action" [routerLink]="['/datasets/new/' + dmp.id]">
 									<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
 								</a>
 							</li>
-						</ul> -->
+						</ul>
 					</div>
 					<div class="stepper-actions">
 						<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
 							<span class="material-icons">chevron_left</span>
 							<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
 						</div>
-						<div *ngIf="!isNewDataset && this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
+						<div *ngIf="this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
 							<span class="material-icons">chevron_right</span>
 							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
 						</div>
-						<div *ngIf="isNewDataset && this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep }" (click)="nextStep()">
+						<!-- <div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank"> -->
-							<span class="material-icons">chevron_right</span>
+						<div *ngIf="this.step >= 3 && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
-							<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
+							<!-- <mat-icon>add</mat-icon> -->
-						</div>
+							<div>{{'DMP-EDITOR.ACTIONS.SAVE' | translate}} & {{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</div>
-						<div *ngIf="!isNewDataset && this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
-							<mat-icon>add</mat-icon>
-							<div>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</div>
 						</div>
 					</div>
 				</div>
 				<div class="col-auto form">
-					<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></main-info>
+					<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></main-info>
-
+					<funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
-					<funding-info *ngIf="!isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
+					<license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></license-info>
-
+					<dataset-info [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
-					<license-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
-
-					<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
-					<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
 
 					<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
-						<dataset-editor-details [formGroup]="dataset" [isNewDataset]="isNewDataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
+						<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
 					</div>
 				</div>
 			</div>

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

@@ -351,6 +351,12 @@ mat-icon.size-16 {
   cursor: pointer;
 }
 
+.add-dataset-action {
+	display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
 .next {
   background: #129d99 0% 0% no-repeat padding-box;
   color: white;

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

@@ -67,7 +67,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	isFinalized = false;
 	hasChanges = false;
 	isDiscarded = false;
-	isNewDataset = false;
 	hasDmpId = false;
 	isUserOwner: boolean = true;
 
@@ -115,11 +114,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	}
 
 	ngOnInit() {
-		if (this.router.url.toString().includes('/new/dataset')) {
+		// if (this.router.url.toString().includes('/new/dataset')) {
-			this.isNewDataset = true;
+		// 	this.isNewDataset = true;
-			this.stepsBeforeDatasets = 2;
+		// 	this.stepsBeforeDatasets = 2;
-			this.maxStep = 2;
+		// 	this.maxStep = 2;
-		};
+		// };
 		this.route.params
 			.pipe(takeUntil(this._destroyed))
 			.subscribe((params: Params) => {
@@ -222,6 +221,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 								}
 								this.associatedUsers = data.associatedUsers;
 								this.people = data.users;
+								this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
+									.subscribe(x => {
+										this.formChanged();
+									});
 							})
 						});
 				} else if (publicId != null) {
@@ -276,46 +279,57 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							// 	});
 							// }
 							// })
-						});
+							this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
-				} else if (this.isNewDataset) {
+								.subscribe(x => {
-					this.dmp = new DmpEditorModel();
+									this.formChanged();
-					this.dmp.grant = new GrantTabModel();
-					this.dmp.project = new ProjectFormModel();
-					this.dmp.funder = new FunderFormModel();
-					this.dmp.extraProperties = new ExtraPropertiesFormModel();
-					this.dmp.extraProperties.visible = false;
-					this.dmp.extraProperties.contact = this.authService.current().id;
-					this.datasetWizardEditorModel = new DatasetWizardEditorModel();
-
-					if (dmpId) {
-						this.hasDmpId = true;
-						this.dmpService.getSingle(dmpId).pipe(map(data => data as DmpModel))
-							.pipe(takeUntil(this._destroyed))
-							.subscribe(data => {
-								setTimeout(() => {
-									this.dmpModel = data;
-									this.datasetWizardEditorModel.dmp = data;
-									this.dmp.datasets.push(this.datasetWizardEditorModel);
-									this.formGroup = this.dmp.buildForm();
-									this.formGroup.get('datasets')['controls'][0].get('dmp').disable();
-									this.datasets = this.formGroup.get('datasets') as FormArray;
-									this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
-									this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
-									// this.loadDatasetProfiles();
-									// this.registerFormListeners();
 								});
-							});
+						});
+				}
+				// else if (this.isNewDataset) {
+				// 	this.dmp = new DmpEditorModel();
+				// 	this.dmp.grant = new GrantTabModel();
+				// 	this.dmp.project = new ProjectFormModel();
+				// 	this.dmp.funder = new FunderFormModel();
+				// 	this.dmp.extraProperties = new ExtraPropertiesFormModel();
+				// 	this.dmp.extraProperties.visible = false;
+				// 	this.dmp.extraProperties.contact = this.authService.current().id;
+				// 	this.datasetWizardEditorModel = new DatasetWizardEditorModel();
 
-					} else {
+				// 	if (dmpId) {
-						this.dmp.datasets.push(this.datasetWizardEditorModel);
+				// 		this.hasDmpId = true;
-						this.formGroup = this.dmp.buildForm();
+				// 		this.dmpService.getSingle(dmpId).pipe(map(data => data as DmpModel))
-						this.datasets = this.formGroup.get('datasets') as FormArray;
+				// 			.pipe(takeUntil(this._destroyed))
-						this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+				// 			.subscribe(data => {
-						this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
+				// 				setTimeout(() => {
-					}
+				// 					this.dmpModel = data;
+				// 					this.datasetWizardEditorModel.dmp = data;
+				// 					this.dmp.datasets.push(this.datasetWizardEditorModel);
+				// 					this.formGroup = this.dmp.buildForm();
+				// 					this.formGroup.get('datasets')['controls'][0].get('dmp').disable();
+				// 					this.datasets = this.formGroup.get('datasets') as FormArray;
+				// 					this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+				// 					this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
+				// 					// this.loadDatasetProfiles();
+				// 					// this.registerFormListeners();
+				// 				});
+				// 			});
 
-					this.registerFormEventsForNewItem();
+				// 	} else {
-				} else {
+				// 		this.dmp.datasets.push(this.datasetWizardEditorModel);
+				// 		this.formGroup = this.dmp.buildForm();
+				// 		this.datasets = this.formGroup.get('datasets') as FormArray;
+				// 		this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+				// 		this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
+				// 		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
+				// 			.subscribe(x => {
+				// 				console.log(x);
+				// 				this.formChanged();
+				// 			});
+				// 	}
+
+				// 	this.registerFormEventsForNewItem();
+				// }
+				else {
 					this.dmp = new DmpEditorModel();
 					this.dmp.grant = new GrantTabModel();
 					this.dmp.project = new ProjectFormModel();
@@ -345,6 +359,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							]);
 						})
 					}
+					this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
+						.subscribe(x => {
+							this.formChanged();
+						});
 				}
 			});
 
@@ -424,20 +442,20 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 
 	formSubmit(addNew?: boolean, showAddDatasetDialog?: boolean): void {
 		this.formService.touchAllFormFields(this.formGroup);
-		if (this.isNewDataset) {
+		// if (this.isNewDataset) {
-			if (!this.isDatasetFormValid) {
+		// 	if (!this.isDatasetFormValid) {
-				this.showValidationErrorsDialog();
+		// 		this.showValidationErrorsDialog();
-				return;
+		// 		return;
-			}
+		// 	}
-			this.onDatasetSubmit();
+		// 	this.onDatasetSubmit();
-		}
+		// }
-		else {
+		// else {
 			if (!this.isFormValid()) {
 				this.showValidationErrorsDialog();
 				return;
 			}
 			this.onSubmit(addNew, showAddDatasetDialog);
-		}
+		// }
 	}
 
 	public isFormValid() {
@@ -823,22 +841,13 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	public discardChanges() {
 		this.isDiscarded = true;
 		this.hasChanges = false;
-		if (this.isNewDataset && !this.hasDmpId) {
+		if (!this.isNew) {
-			this.formGroup.get('datasets')['controls'].forEach(element => {
-				element.removeControl('datasetProfileDefinition');
-			});
-			this.formGroup.reset();
-		} else if (this.hasDmpId) {
-			Object.keys(this.formGroup.get('datasets')['controls'][0].controls).forEach((key: string) => {
-				if (key === 'datasetProfileDefinition') {
-					this.formGroup.get('datasets')['controls'][0].removeControl(key);
-				}
-				if (key !== 'dmp' && key !== 'datasetProfileDefinition') {
-					this.formGroup.get('datasets')['controls'][0].get(key).reset();
-				}
-			});
-		} else {
 			this.formGroup.patchValue(JSON.parse(JSON.stringify(this.formGroupRawValue)));
+		} else {
+			this.formGroup.reset();
+			this.formGroup.get('extraProperties').get('visible').setValue(false);
+			this.formGroup.get('extraProperties').get('contact').setValue(this.authService.current().id);
+			this.formGroup.get('associatedUsers').setValue([]);
 		}
 		this.isDiscarded = false;
 	}

dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.ts

@@ -81,7 +81,7 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
 		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
 			.subscribe(x => {
 				this.configureAutoCompletes();
-				this.onFormChanged.emit();
+				// this.onFormChanged.emit();
 			});
 	}
 

dmp-frontend/src/app/ui/dmp/editor/license-info/license-info.component.html

@@ -9,7 +9,7 @@
 				<div class="heading">4.1 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div>
 				<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
 				<div class="title-form">
-					<mat-form-field *ngIf="!isNewDataset">
+					<mat-form-field>
 						<mat-select [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}">
 							<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
 								{{ lang.name }}
@@ -24,7 +24,7 @@
 			</div>
 		</div>
 		<!-- Description field -->
-		<div class="row" *ngIf="!isNewDataset">
+		<div class="row">
 			<div class="col-12">
 				<div class="heading">4.2 {{'DMP-EDITOR.FIELDS.LICENSE' | translate}}</div>
 				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
@@ -41,7 +41,7 @@
 			</div>
 		</div>
 		<!-- Researchers field-->
-		<div class="row" *ngIf="!isNewDataset">
+		<div class="row">
 			<div class="col-12">
 				<div class="heading">4.3 {{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}</div>
 				<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
@@ -61,7 +61,7 @@
 			</div>
 		</div>
 		<!-- Organizations Field -->
-		<div class="row" *ngIf="!isNewDataset && formGroup.get('extraProperties').get('visible').value">
+		<div class="row" *ngIf="formGroup.get('extraProperties').get('visible').value">
 			<div class="col-12">
 				<div class="heading">4.4 {{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}</div>
 				<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
@@ -78,7 +78,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="row" *ngIf="!isNewDataset">
+		<div class="row">
 			<div class="col-12">
 				<div class="heading">4.5 {{'DMP-EDITOR.FIELDS.CONTACT' | translate}}</div>
 				<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
@@ -97,7 +97,7 @@
 				</div>
 			</div>
 		</div>
-		<!-- <div class="row" *ngIf="!isNewDataset">
+		<!-- <div class="row">
 			<div class="col-12">
 				<div class="heading">4.6 {{'DMP-EDITOR.FIELDS.COST' | translate}}</div>
 				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>

dmp-frontend/src/app/ui/dmp/editor/license-info/license-info.component.ts

@@ -30,7 +30,6 @@ export class LicenseInfoComponent extends BaseComponent implements OnInit {
 	@Input() formGroup: FormGroup = null;
 	// @Input() datasetFormGroup: FormGroup;
 	@Input() isNewVersion: boolean;
-	@Input() isNewDataset: boolean;
 	@Input() isUserOwner: boolean;
 	@Input() isClone: boolean;
 	@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
@@ -74,7 +73,7 @@ export class LicenseInfoComponent extends BaseComponent implements OnInit {
 
 		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
 			.subscribe(x => {
-				this.onFormChanged.emit();
+				// this.onFormChanged.emit();
 			});
 	}
 

dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html

@@ -9,23 +9,18 @@
 				<div class="heading">1.1 {{'DMP-EDITOR.FIELDS.NAME' | translate}}*</div>
 				<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
 				<div class="title-form">
-					<mat-form-field *ngIf="!isNewDataset">
+					<mat-form-field>
 						<input matInput placeholder="{{'DMP-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 *ngIf="isNewDataset">
-						<app-single-auto-complete [required]="true" [formControl]="this.formGroup.get('datasets')['controls'][0].get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration"></app-single-auto-complete>
-						<!-- <app-single-auto-complete [required]="true" [formControl]="formGroup" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
-						</app-single-auto-complete> -->
-					</mat-form-field>
 				</div>
 			</div>
 		</div>
 		<!-- Description field -->
-		<div class="row" *ngIf="!isNewDataset">
+		<div class="row">
 			<div class="col-12">
 				<div class="heading">1.2 {{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
 				<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
@@ -37,7 +32,7 @@
 			</div>
 		</div>
 		<!-- Researchers field-->
-		<div class="row" *ngIf="!isNewDataset">
+		<div class="row">
 			<div class="col-12">
 				<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}</div>
 				<div class="hint">
@@ -62,7 +57,7 @@
 			</div>
 		</div>
 		<!-- Organizations Field -->
-		<div class="row" *ngIf="!isNewDataset">
+		<div class="row">
 			<div class="col-12">
 				<div class="heading">1.4 {{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}</div>
 				<div class="hint">

dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts

@@ -29,7 +29,6 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
 	@Input() formGroup: FormGroup = null;
 	// @Input() datasetFormGroup: FormGroup;
 	@Input() isNewVersion: boolean;
-	@Input() isNewDataset: boolean;
 	@Input() isUserOwner: boolean;
 	@Input() isClone: boolean;
 	@Output() onFormChanged: EventEmitter<any> = new EventEmitter();

dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts

@@ -30,13 +30,13 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
 
 	ngOnInit() {
 		this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.form);
-		if (this.form) {
+		// if (this.form) {
-			this.form.valueChanges
+		// 	this.form.valueChanges
-				.pipe(takeUntil(this._destroyed))
+		// 		.pipe(takeUntil(this._destroyed))
-				.subscribe(val => {
+		// 		.subscribe(val => {
-					this.formChanged.emit(val);
+		// 			this.formChanged.emit(val);
-				});
+		// 		});
-		}
+		// }
 	}
 
 	ngOnChanges(changes: SimpleChanges) {

dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts

@@ -4,6 +4,7 @@ import { BaseComponent } from '@common/base/base.component';
 import { interval, Subject, Subscription } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { type } from 'os';
+import { SimpleChanges } from '@angular/core';
 
 interface Link {
 	/* id of the section*/
@@ -104,6 +105,15 @@ export class TableOfContents extends BaseComponent implements OnInit {
 			})
 	}
 
+	ngOnChanges(changes: SimpleChanges) {
+		if (!this.isActive && this.links && this.links.length > 0) {
+			this.links.forEach(link => {
+				link.selected = false;
+			})
+			this.links[0].selected = true;
+		}
+	}
+
 	goToStep(link: Link) {
 		// this.selectedLinkId = link.id;
 		this.stepFound.emit({

dmp-frontend/tsconfig.json

@@ -10,6 +10,7 @@
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
 		"importHelpers": true,
+		"skipLibCheck": true,
 		"target": "es2015",
 		"typeRoots": [
 			"node_modules/@types"