Adds functionality, remove dataset from dmp editor

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

@@ -115,7 +115,6 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
 			subtitleFn: (item) => item['description']
 		};
 
-
 		// if (this.datasetId) {
 		// 	this.datasetWizardService.getSingle(this.datasetId)
 		// 		.pipe(takeUntil(this._destroyed))

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

@@ -170,49 +170,48 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 		return false;
 	}
 
-	dmpValueChanged(dmp: DmpListingModel) {
+	// dmpValueChanged(dmp: DmpListingModel) {
-		if (dmp) {
+	// 	if (dmp) {
-			this.formGroup.get('profile').enable();
+	// 		this.formGroup.get('profile').enable();
-			this.loadDatasetProfiles();
+	// 		this.loadDatasetProfiles();
-		}
+	// 	}
-		else {
+	// 	else {
-			this.availableProfiles = [];
+	// 		this.availableProfiles = [];
-			this.formGroup.get('profile').reset();
+	// 		this.formGroup.get('profile').reset();
-			this.formGroup.get('profile').disable();
+	// 		this.formGroup.get('profile').disable();
-			this.formGroup.removeControl('datasetProfileDefinition');
+	// 		this.formGroup.removeControl('datasetProfileDefinition');
-		}
+	// 	}
-	}
+	// }
 
-	registerFormListeners() {
+	// registerFormListeners() {
-		// this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges
+	// 	this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges
-		// 	.pipe(takeUntil(this._destroyed))
+	// 		.pipe(takeUntil(this._destroyed))
-		// 	.subscribe(x => {
+	// 		.subscribe(x => {
-		// 		this.dmpValueChanged(x);
+	// 			this.dmpValueChanged(x);
-		// 	});
+	// 		});
-		// this.formGroup.get('profile').valueChanges
+	// 	this.formGroup.get('profile').valueChanges
-		// 	.pipe(takeUntil(this._destroyed))
+	// 		.pipe(takeUntil(this._destroyed))
-		// 	.subscribe(x => {
+	// 		.subscribe(x => {
-		// 		//this.datasetProfileValueChanged(x);
+	// 			//this.datasetProfileValueChanged(x);
-		// 	});
+	// 		});
-	}
+	// }
 
-	datasetProfileValueChanged(profiledId: string) {
+	// datasetProfileValueChanged(profiledId: string) {
-		if (profiledId && profiledId.length > 0) {
+	// 	if (profiledId && profiledId.length > 0) {
-			this.formGroup.removeControl('datasetProfileDefinition');
+	// 		this.formGroup.removeControl('datasetProfileDefinition');
-			this.getDefinition();
+	// 		this.getDefinition();
-		}
+	// 	}
-	}
+	// }
 
-	getDefinition() {
+	// getDefinition() {
-		// if (this.formGroup.invalid) { setTimeout(() => this.stepper.selectedIndex = 0); return; }
+	// 	this.datasetWizardService.getDefinition(this.formGroup.get('profile').value)
-		this.datasetWizardService.getDefinition(this.formGroup.get('profile').value)
+	// 		.pipe(takeUntil(this._destroyed))
-			.pipe(takeUntil(this._destroyed))
+	// 		.subscribe(item => {
-			.subscribe(item => {
+	// 			this.formGroup.get('datasets')['controls'][0].datasetProfileDefinition = new DatasetDescriptionFormEditorModel().fromModel(item);
-				this.formGroup.get('datasets')['controls'][0].datasetProfileDefinition = new DatasetDescriptionFormEditorModel().fromModel(item);
+	// 			this.datasetProfileDefinitionModel = this.formGroup.get('datasets')['controls'][0].datasetProfileDefinition;
-				this.datasetProfileDefinitionModel = this.formGroup.get('datasets')['controls'][0].datasetProfileDefinition;
+	// 			this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
-				this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
+	// 		});
-			});
+	// }
-	}
 
 	onRemoveTemplate(event) {
 		let found = false;

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

@@ -82,7 +82,10 @@
 							<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'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}">
-								<div>{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
+								<div class="d-flex flex-direction-row">
+									<div class="label">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
+									<mat-icon class="ml-auto remove-dataset" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">remove_circle_outline</mat-icon>
+								</div>
 								<span *ngIf="dataset.get('status').value === 1" class="finalized-label">
 									<mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
 								</span>
@@ -123,7 +126,7 @@
 					<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [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 datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
+					<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>
 					</div>
 				</div>

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

@@ -259,6 +259,11 @@ a:hover {
   max-width: 290px;
 }
 
+.stepper-list li:hover {
+  background-color: #ececec;
+  border-radius: 6px;
+}
+
 .stepper-list .active {
   color: #212121;
   font-weight: 700;
@@ -269,7 +274,7 @@ a:hover {
   color: #212121;
   font-weight: 700;
   opacity: 1;
-  div {
+  .label {
     width: 73px;
     height: 27px;
     background-color: #f7dd72;
@@ -283,6 +288,9 @@ a:hover {
   }
 }
 
+.remove-dataset:hover {
+  color: rgb(204, 0, 0);
+}
 .stepper-options {
   //   flex-grow: 1;
 }
@@ -307,7 +315,8 @@ a:hover {
   font-size: 14px;
 }
 
-.previous, .add-dataset-btn {
+.previous,
+.add-dataset-btn {
   color: #212121;
   background: #f5f5f5 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 6px #1e202029;
@@ -332,7 +341,8 @@ a:hover {
   cursor: pointer;
 }
 
-.previous-disabled, .add-dataset-btn-disabled {
+.previous-disabled,
+.add-dataset-btn-disabled {
   border: 1px solid #b5b5b5;
   color: #b5b5b5 !important;
   cursor: auto !important;
@@ -392,7 +402,7 @@ a:hover {
 }
 
 .add-dataset-option {
-	list-style-type: none;
+  list-style-type: none;
 }
 
 // ::ng-deep .mat-tab-labels {

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

@@ -49,6 +49,7 @@ import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-descript
 import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
 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';
 
 @Component({
 	selector: 'app-dmp-editor-component',
@@ -97,6 +98,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	constructor(
 		private dmpProfileService: DmpProfileService,
 		private datasetWizardService: DatasetWizardService,
+		private datasetService: DatasetService,
 		private dmpService: DmpService,
 		private route: ActivatedRoute,
 		private router: Router,
@@ -828,6 +830,40 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 		this.isDiscarded = false;
 	}
 
+	public removeDataset(datasetId: string, index: number) {
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+			maxWidth: '300px',
+			restoreFocus: false,
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: true
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				if (datasetId) {
+					this.datasetService.delete(datasetId)
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
+							complete => {
+								this.onDeleteCallbackSuccess();
+							},
+							error => this.onDeleteCallbackError(error)
+						);
+				}
+				this.formGroup.get('datasets')['controls'].splice(index, 1);
+				this.step = 0;
+			}
+		});
+	}
+
+	onDeleteCallbackSuccess(): void {
+		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-DELETE'), SnackBarNotificationLevel.Success);
+		this.dmp.id != null ? this.router.navigate(['/plans', 'edit', this.dmp.id]) : this.router.navigate(['/plans']);
+	}
+
 	// advancedClicked() {
 	// 	const dialogRef = this.dialog.open(ExportMethodDialogComponent, {
 	// 		maxWidth: '500px',

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

@@ -803,6 +803,7 @@
 			"SAVE": "Save",
 			"CANCEL": "Cancel",
 			"DELETE": "Delete",
+			"DELETE-DATASET": "Delete Dataset",
 			"DISCARD": "Discard",
 			"FINALISE": "Finalize",
 			"LOCK": "DMP is locked by another user",