Add confirmation dialogue on DMP's overview "Publish" button. - (Issue #158)

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

@@ -44,7 +44,7 @@
 					<button mat-raised-button color="primary" (click)="downloadPDF(dmp.id)" class="lightblue-btn ml-2">
 						<mat-icon>save_alt</mat-icon> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}
 					</button>
-					<button *ngIf="showPublishButton(dmp)" mat-raised-button color="primary" (click)="publish(dmp.id)" class="lightblue-btn ml-2">
+					<button *ngIf="showPublishButton(dmp)" mat-raised-button (click)="publish(dmp.id)" class="lightblue-btn ml-2">
 						<mat-icon>public</mat-icon> {{ 'DMP-LISTING.ACTIONS.PUBLISH' | translate }}
 					</button>
 					<button *ngIf="isDraftDmp(dmp)" mat-raised-button color="primary" (click)="finalize(dmp)" class="lightblue-btn ml-2">

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

@@ -124,7 +124,8 @@
 }
 
 .finalized-bookmark {
-  color: #92d050;
+  color: #08bd63;
+  //   color: #92d050;
   display: inline;
   position: absolute;
   margin-top: 0.5em;

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

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
-import { MatDialog } from '@angular/material';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import * as FileSaver from 'file-saver';
@@ -20,7 +19,6 @@ import { ConfirmationDialogComponent } from '../../../library/confirmation-dialo
 import { ExportMethodDialogComponent } from '../../../library/export-method-dialog/export-method-dialog.component';
 import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
 import { DmpFinalizeDialogComponent, DmpFinalizeDialogInput, DmpFinalizeDialogOutput } from '../editor/dmp-finalize-dialog/dmp-finalize-dialog.component';
-import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
 import { DatasetsToBeFinalized } from '../../../core/model/dataset/datasets-toBeFinalized';
 
 @Component({
@@ -133,8 +131,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 				this.dmpService.delete(this.dmp.id)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(
-					complete => { this.onCallbackSuccess() },
+						complete => { this.onCallbackSuccess() },
-					error => this.onDeleteCallbackError(error)
+						error => this.onDeleteCallbackError(error)
 					);
 			}
 		});
@@ -308,11 +306,11 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 				this.dmpService.getDoi(dmp.id)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(
-					complete => {
+						complete => {
-						this.onDOICallbackSuccess();
+							this.onDOICallbackSuccess();
-						this.dmp.doi = complete;
+							this.dmp.doi = complete;
-					},
+						},
-					error => this.onDeleteCallbackError(error)
+						error => this.onDeleteCallbackError(error)
 					);
 			}
 		});
@@ -331,9 +329,22 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 	}
 
 	publish(dmpId: String) {
-		this.dmpService.publish(dmpId)
+		const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-			.pipe(takeUntil(this._destroyed))
+			maxWidth: '300px',
-			.subscribe(() => { this.hasPublishButton = false });
+			data: {
+				message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.PUBLISH-ITEM'),
+				confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
+				cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
+				isDeleteConfirmation: false
+			}
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				this.dmpService.publish(dmpId)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(() => { this.hasPublishButton = false });
+			}
+		});
 	}
 
 	finalize(dmp: DmpOverviewModel) {
@@ -363,11 +374,11 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
 				this.dmpService.finalize(datasetsToBeFinalized, this.dmp.id)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(
-					complete => {
+						complete => {
-						this.dmp.status = DmpStatus.Finalized;
+							this.dmp.status = DmpStatus.Finalized;
-						this.onCallbackSuccess()
+							this.onCallbackSuccess()
-					},
+						},
-					error => this.onFinalizeCallbackError(error)
+						error => this.onFinalizeCallbackError(error)
 					);
 			}
 		});

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

@@ -38,6 +38,7 @@
 			"DELETE-ITEM": "Delete this item?",
 			"DELETE-USER": "Remove this collaborator?",
 			"FINALIZE-ITEM": "Finalize this item?",
+			"PUBLISH-ITEM": "Publish this item?",
 			"ADD-DATASET": "Do you want to continue by adding a Dataset Description to your DMP? You can always add more Dataset Descriptions using \"Add Dataset Description (Wizard)\" menu.",
 			"ZENODO-DOI": "Would you like to create digital object identifier (DOI) for the DMP?",
 			"ACTIONS": {

dmp-frontend/src/styles.scss

@@ -34,6 +34,7 @@
 
 .lightblue-btn {
   background-color: rgb(0, 178, 159) !important;
+  color: white !important;
   //   background-color: rgba(0, 112, 192, 1) !important;
 }