Adds dialog to specify transition from dmp editor to dataset editor

dmp-frontend/src/app/ui/dmp/dmp-to-dataset/dmp-to-dataset-dialog.component.html

@@ -0,0 +1,24 @@
+<div class="form-container">
+	<div mat-dialog-title class="row d-flex justify-content-end m-0" (click)="closeDialog()">
+		<mat-icon class="close-icon">close</mat-icon>
+	</div>
+	<div  class="row d-flex pt-2 pb-2">
+		<div class="col">
+			<div mat-dialog-content class="row">
+				<div  class="col-auto">
+					<span>{{'GENERAL.DMP-TO-DATASET-DIALOG.FROM-DMP' | translate}} </span>
+					<span class="color-green">{{'GENERAL.DMP-TO-DATASET-DIALOG.DMP' | translate}}</span>.
+					<span> {{'GENERAL.DMP-TO-DATASET-DIALOG.TO-DATASET' | translate}} </span>
+					<span class="color-yellow">{{'GENERAL.DMP-TO-DATASET-DIALOG.DATASET' | translate}} </span>
+					<span>{{'GENERAL.DMP-TO-DATASET-DIALOG.EDITOR' | translate}}.</span>
+				</div>
+			</div>
+			<div mat-mat-dialog-actions class="row mt-4 pl-3">
+				<div class="col-auto">
+					<button mat-raised-button type="button" class="start-btn" (click)="start()">{{'GENERAL.DMP-TO-DATASET-DIALOG.START' | translate}}</button>
+				</div>
+			</div>
+		</div>
+		<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/2_Sign_in/Png/Sign In - Copy.png" width="116" height="139">
+	</div>
+</div>

dmp-frontend/src/app/ui/dmp/dmp-to-dataset/dmp-to-dataset-dialog.component.scss

@@ -0,0 +1,50 @@
+.form-container {
+}
+
+.close-icon {
+	cursor: pointer;
+}
+
+.title {
+	font-size: 2.375em;
+	font-weight: lighter;
+	color: #000000;
+	opacity: 0.8;
+	margin-bottom: 0.842em;
+}
+
+.content {
+	width: 31em;
+	margin: 0px;
+	padding: 0px;
+}
+
+::ng-deep .mat-dialog-container {
+	border-radius: 8px;
+}
+
+.laptop-img {
+	padding-left: 0;
+    margin-top: 1.5rem;
+}
+
+.start-btn {
+	background: #129d99 0% 0% no-repeat padding-box;
+	border: 1px solid #129d99;
+	border-radius: 30px;
+	opacity: 1;
+	width: 101px;
+	height: 43px;
+	color: #ffffff;
+	font-weight: 500;
+}
+
+.color-green {
+	color: #129d99;
+	font-weight: 500;
+}
+
+.color-yellow {
+	color: #FCD431;
+    font-weight: 500;
+}

dmp-frontend/src/app/ui/dmp/dmp-to-dataset/dmp-to-dataset-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+	selector: 'app-to-dataset-dialog-component',
+	templateUrl: 'dmp-to-dataset-dialog.component.html',
+	styleUrls: ['./dmp-to-dataset-dialog.component.scss'],
+})
+export class DmpToDatasetDialogComponent implements OnInit {
+
+	constructor(
+		public dialogRef: MatDialogRef<DmpToDatasetDialogComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: any
+	) {	}
+
+	ngOnInit(): void {
+	}
+
+	start(): void {
+		this.dialogRef.close(true);
+	}
+
+	closeDialog(): void {
+		this.dialogRef.close();
+	}
+
+}

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

@@ -45,6 +45,7 @@ import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/d
 import { LicenseInfoComponent } from './editor/license-info/license-info.component';
 import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/start-new-dataset-dialog.component';
 import { NgxDropzoneModule } from 'ngx-dropzone';
+import { DmpToDatasetDialogComponent } from './dmp-to-dataset/dmp-to-dataset-dialog.component';
 
 @NgModule({
 	imports: [
@@ -69,6 +70,7 @@ import { NgxDropzoneModule } from 'ngx-dropzone';
 		DmpEditorComponent,
 		DmpInvitationDialogComponent,
 		InvitationAcceptedComponent,
+		DmpToDatasetDialogComponent,
 		DmpWizardComponent,
 		DmpWizardEditorComponent,
 		DmpWizardDatasetListingComponent,
@@ -98,6 +100,7 @@ import { NgxDropzoneModule } from 'ngx-dropzone';
 	],
 	entryComponents: [
 		DmpInvitationDialogComponent,
+		DmpToDatasetDialogComponent,
 		AddResearcherComponent,
 		AvailableProfilesComponent,
 		DmpFinalizeDialogComponent,

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

@@ -39,7 +39,7 @@
 							<li (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'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)="editDataset(dataset.get('id').value)" class="active-dataset">
+							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="editDataset(dataset.get('id').value, false)" 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" 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>

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

@@ -50,6 +50,7 @@ import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-
 import { CloneDialogComponent } from '../clone/clone-dialog/clone-dialog.component';
 import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard';
 import { DatasetService } from '@app/core/services/dataset/dataset.service';
+import { DmpToDatasetDialogComponent } from '../dmp-to-dataset/dmp-to-dataset-dialog.component';
 
 @Component({
 	selector: 'app-dmp-editor-component',
@@ -167,6 +168,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 								this.dmp.extraProperties = new ExtraPropertiesFormModel();
 								this.dmp.fromModel(data);
 								this.formGroup = this.dmp.buildForm();
+								// console.log(this.formGroup);
 
 								this.datasets = this.formGroup.get('datasets') as FormArray;
 
@@ -400,6 +402,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		// 	this.onDatasetSubmit();
 		// }
 		// else {
+		// console.log("update ", this.formGroup);
 		if (!this.isFormValid()) {
 			this.showValidationErrorsDialog();
 			return;
@@ -479,6 +482,19 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 
 	onCallbackSuccess(dmp?: DmpModel, datasetId?: string): void {
 		this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+		// console.log(dmp)
+		// if (dmp) {
+		// 	let dmpEditorModel: DmpEditorModel;
+		// 	dmpEditorModel = new DmpEditorModel();
+		// 	dmpEditorModel.grant = new GrantTabModel();
+		// 	dmpEditorModel.project = new ProjectFormModel();
+		// 	dmpEditorModel.funder = new FunderFormModel();
+		// 	dmpEditorModel.extraProperties = new ExtraPropertiesFormModel();
+		// 	dmpEditorModel.fromModel(dmp);
+		// 	this.formGroup = dmpEditorModel.buildForm();
+		// } else {
+		// 	this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); });
+		// }
 		if (dmp.id != null) {
 			datasetId ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', dmp.id], { queryParams: { dataset: datasetId } }); }) : this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', dmp.id]); })
 		} else {
@@ -495,6 +511,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	onCallbackSuccessAddNew(dmp?: DmpModel) {
 		// this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
 		this.router.navigate(['/datasets', 'new', dmp.id]);
+		// this.editDataset(dmp.id, true);
 	}
 
 	public setErrorModel(validationErrorModel: ValidationErrorModel) {
@@ -726,9 +743,22 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		});
 	}
 
-	editDataset(id: string) {
+	editDataset(id: string, isNew: boolean) {
+		const dialogRef = this.dialog.open(DmpToDatasetDialogComponent, {
+			width: '500px',
+			autoFocus: false,
+			restoreFocus: false,
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				if (isNew) {
+					this.router.navigate(['/datasets', 'new', id]);
+				} else {
 					this.router.navigate(['/datasets', 'edit', id]);
 				}
+			}
+		});
+	}
 
 	saveAndFinalize() {
 		const dialogInputModel: DmpFinalizeDialogInput = {

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

@@ -91,6 +91,14 @@
 			"SUCCESS": "Invitation successfully sent",
 			"ERROR": "Invitation sent failed"
 		},
+		"DMP-TO-DATASET-DIALOG": {
+			"FROM-DMP": "You have successfully created your",
+			"DMP": "DMP",
+			"TO-DATASET": "You will be transferred to the",
+			"DATASET": "Dataset",
+			"EDITOR": "editor",
+			"START": "let's start"
+		},
 		"ACTIONS": {
 			"VIEW-ALL": "View All",
 			"SHOW-MORE": "Show more",