From a9a39db62203d81f23784610bc6f94418e7a0c47 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Fri, 30 Aug 2019 16:02:02 +0300
Subject: [PATCH] Restyles clone DMP page and adds funder and project fields on
 tab grant

---
 .../app/ui/dmp/clone/dmp-clone.component.html |  58 ++++++++++
 .../app/ui/dmp/clone/dmp-clone.component.scss |  41 +++++++
 .../app/ui/dmp/clone/dmp-clone.component.ts   | 105 ++++++++++++++++++
 dmp-frontend/src/app/ui/dmp/dmp.module.ts     |   4 +-
 dmp-frontend/src/app/ui/dmp/dmp.routing.ts    |   3 +-
 .../ui/dmp/editor/dmp-editor.component.html   |   2 +-
 .../editor/grant-tab/grant-tab.component.ts   |   1 -
 .../ui/dmp/wizard/dmp-wizard-editor.model.ts  |  18 ++-
 .../app/ui/dmp/wizard/dmp-wizard.component.ts |   9 +-
 .../dmp-wizard-dataset-listing.component.html |   4 +-
 dmp-frontend/src/assets/i18n/en.json          |   4 +
 11 files changed, 239 insertions(+), 10 deletions(-)
 create mode 100644 dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
 create mode 100644 dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.scss
 create mode 100644 dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts

diff --git a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
new file mode 100644
index 000000000..ad53b656a
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
@@ -0,0 +1,58 @@
+<div class="main-content">
+	<div class="container-fluid">
+		<div *ngIf="dmp" class="card">
+			<div class="card-header card-header-plain d-flex">
+				<div class="card-desc clone-dmp d-flex flex-column justify-content-center">
+					<h4 class="card-title">{{ formGroup.get('label').value }}</h4>
+				</div>
+				<div class="d-flex ml-auto p-2">
+					<span class="clone-mode">{{ 'DMP-LISTING.ACTIONS.CLONE' | translate}}</span> &nbsp;
+					<span class="clone-mode-text"> {{ 'GENERAL.PREPOSITIONS.OF' | translate}} {{ parentDmpLabel }}</span>
+				</div>
+			</div>
+			<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
+				<div class="d-flex flex-column">
+					<mat-tab-group [(selectedIndex)]="selectedTab" class="mt-3">
+						<mat-tab>
+							<ng-template mat-tab-label>
+								<i class="material-icons-outlined mr-2">view_agenda</i>
+								{{ 'SIDE-BAR.GENERAL' | translate }}
+							</ng-template>
+							<app-general-tab [formGroup]="formGroup"></app-general-tab>
+						</mat-tab>
+						<mat-tab>
+							<ng-template mat-tab-label>
+								<mat-icon class="mr-2">work_outline</mat-icon>
+								{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
+							</ng-template>
+							<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized"></app-grant-tab>
+						</mat-tab>
+						<mat-tab>
+							<ng-template mat-tab-label>
+								<mat-icon class="mr-2">library_books</mat-icon>
+								{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
+							</ng-template>
+							<app-dmp-wizard-dataset-listing-component *ngIf="formGroup" [formGroup]="formGroup" [dmpId]="formGroup.get('id').value"></app-dmp-wizard-dataset-listing-component>
+						</mat-tab>
+						<mat-tab>
+							<ng-template mat-tab-label></ng-template>
+						</mat-tab>
+					</mat-tab-group>
+
+					<div class="d-flex justify-content-end pt-2 pb-4 pl-2 pr-2">
+						<div>
+							<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button" class="text-uppercase mr-2">
+								{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
+							</button>
+						</div>
+						<div *ngIf="formGroup.enabled">
+							<button mat-raised-button type="button" (click)="formSubmit()" [disabled]="!isFormValid()" class="text-uppercase dark-theme mr-2" color="primary">
+								{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
+							</button>
+						</div>
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
diff --git a/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.scss b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.scss
new file mode 100644
index 000000000..0917e88e2
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.scss
@@ -0,0 +1,41 @@
+.menu-item {
+  width: 248px;
+}
+
+.more-horiz {
+  font-size: 28px;
+  color: #aaaaaa;
+}
+
+.clone-dmp {
+  height: 3.5em;
+}
+
+.clone-mode {
+  //   line-height: 2em;
+  text-transform: uppercase;
+  color: #4687e6;
+  font-weight: 400;
+  align-self: center;
+}
+
+.clone-mode-text {
+  color: black;
+  align-self: center;
+}
+
+.more-icon :hover {
+  color: #4687e6;
+}
+
+::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/dmp/clone/dmp-clone.component.ts b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts
new file mode 100644
index 000000000..9e7495f45
--- /dev/null
+++ b/dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts
@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core';
+import { DmpWizardEditorModel } from '../wizard/dmp-wizard-editor.model';
+import { FormGroup } from '@angular/forms';
+import { takeUntil } from 'rxjs/operators';
+import { BaseComponent } from '../../../core/common/base/base.component';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { DmpModel } from '../../../core/model/dmp/dmp';
+import { TranslateService } from '@ngx-translate/core';
+import { DmpService } from '../../../core/services/dmp/dmp.service';
+import { Observable } from 'rxjs';
+import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
+import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
+import { UiNotificationService, SnackBarNotificationLevel } from '../../../core/services/notification/ui-notification-service';
+import { FunderFormModel } from '../editor/grant-tab/funder-form-model';
+import { ProjectFormModel } from '../editor/grant-tab/project-form-model';
+import { GrantTabModel } from '../editor/grant-tab/grant-tab-model';
+
+@Component({
+	selector: 'app-dmp-clone',
+	templateUrl: './dmp-clone.component.html',
+	styleUrls: ['./dmp-clone.component.scss']
+})
+export class DmpCloneComponent extends BaseComponent implements OnInit {
+
+	breadCrumbs: Observable<BreadcrumbItem[]>;
+	dmp: DmpWizardEditorModel;
+	formGroup: FormGroup;
+	itemId: string;
+	isFinalized: false;
+	isPublic: false;
+	selectedTab = 0;
+	parentDmpLabel: string;
+
+	constructor(
+		private route: ActivatedRoute,
+		private router: Router,
+		private language: TranslateService,
+		private dmpService: DmpService,
+		private uiNotificationService: UiNotificationService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		this.route.params
+			.pipe(takeUntil(this._destroyed))
+			.subscribe((params: Params) => {
+				this.itemId = params['id'];
+				this.dmpService.getSingle(this.itemId).map(data => data as DmpModel)
+					.pipe(takeUntil(this._destroyed))
+					.subscribe(data => {
+						this.dmp = new DmpWizardEditorModel();
+						this.dmp.grant = new GrantTabModel();
+						this.dmp.project = new ProjectFormModel();
+						this.dmp.funder = new FunderFormModel();
+						this.dmp.fromModel(data);
+						this.formGroup = this.dmp.buildForm();
+
+						this.parentDmpLabel = this.formGroup.get('label').value;
+						const breadCrumbs = [];
+						breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/plans" });
+						breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/clone/' + this.dmp.id });
+						this.breadCrumbs = Observable.of(breadCrumbs);
+					});
+			});
+	}
+
+	public cancel(id: String): void {
+		if (id != null) {
+			this.router.navigate(['/plans/overview/' + id]);
+		} else {
+			this.router.navigate(['/plans']);
+		}
+	}
+
+	public isFormValid(): boolean {
+		return this.formGroup.valid;
+	}
+
+	formSubmit(): void {
+		if (!this.isFormValid()) { return; }
+		this.dmpService.clone(this.formGroup.getRawValue(), this.itemId)
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
+				complete => this.onCallbackSuccess(),
+				error => this.onCallbackError(error)
+			);
+	}
+
+	onCallbackSuccess(): void {
+		this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
+		this.router.navigate(['/plans']);
+	}
+
+	onCallbackError(error: any) {
+		this.setErrorModel(error.error);
+	}
+
+	public setErrorModel(validationErrorModel: ValidationErrorModel) {
+		Object.keys(validationErrorModel).forEach(item => {
+			(<any>this.dmp.validationErrorModel)[item] = (<any>validationErrorModel)[item];
+		});
+	}
+
+}
diff --git a/dmp-frontend/src/app/ui/dmp/dmp.module.ts b/dmp-frontend/src/app/ui/dmp/dmp.module.ts
index 10f4262fa..22702fe5b 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp.module.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp.module.ts
@@ -28,6 +28,7 @@ import { PeopleTabComponent } from './editor/people-tab/people-tab.component';
 import { GrantTabComponent } from './editor/grant-tab/grant-tab.component';
 import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.component';
 import { DmpOverviewModule } from './overview/dmp-overview.module';
+import { DmpCloneComponent } from './clone/dmp-clone.component';
 
 @NgModule({
 	imports: [
@@ -61,7 +62,8 @@ import { DmpOverviewModule } from './overview/dmp-overview.module';
 		GeneralTabComponent,
 		PeopleTabComponent,
 		GrantTabComponent,
-		DatasetsTabComponent
+		DatasetsTabComponent,
+		DmpCloneComponent
 	],
 	entryComponents: [
 		DmpInvitationDialogComponent,
diff --git a/dmp-frontend/src/app/ui/dmp/dmp.routing.ts b/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
index d9f11f623..5cef1d992 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
+++ b/dmp-frontend/src/app/ui/dmp/dmp.routing.ts
@@ -5,6 +5,7 @@ import { InvitationAcceptedComponent } from './invitation/accepted/dmp-invitatio
 import { DmpListingComponent } from './listing/dmp-listing.component';
 import { DmpWizardComponent } from './wizard/dmp-wizard.component';
 import { DmpOverviewComponent } from './overview/dmp-overview.component';
+import { DmpCloneComponent } from './clone/dmp-clone.component';
 
 const routes: Routes = [
 	{
@@ -73,7 +74,7 @@ const routes: Routes = [
 	},
 	{
 		path: 'clone/:id',
-		component: DmpWizardComponent,
+		component: DmpCloneComponent,
 		data: {
 			clone: false,
 			breadcrumb: true
diff --git a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
index e44f6f5b6..4d864aa8e 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
@@ -49,7 +49,7 @@
 								<mat-icon class="mr-2">work_outline</mat-icon>
 								{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
 							</ng-template>
-							<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isNew]="isNew" [isFinalized]="isFinalized"></app-grant-tab>
+							<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized"></app-grant-tab>
 						</mat-tab>
 						<mat-tab *ngIf="!isNew">
 							<ng-template mat-tab-label>
diff --git a/dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.ts b/dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.ts
index 3ae7b0f21..d356001c3 100644
--- a/dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/editor/grant-tab/grant-tab.component.ts
@@ -21,7 +21,6 @@ export class GrantTabComponent implements OnInit {
 	@Input() grantformGroup: FormGroup;
 	@Input() projectFormGroup: FormGroup;
 	@Input() funderFormGroup: FormGroup;
-	@Input() isNew: boolean;
 	@Input() isFinalized: boolean;
 	isCreateNew = false;
 	isCreateNewProject = false;
diff --git a/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard-editor.model.ts b/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard-editor.model.ts
index abb226430..1f42b1ab2 100644
--- a/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard-editor.model.ts
+++ b/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard-editor.model.ts
@@ -12,6 +12,9 @@ import { GrantListingModel } from "../../../core/model/grant/grant-listing";
 import { ResearcherModel } from "../../../core/model/researcher/researcher";
 import { UserModel } from "../../../core/model/user/user";
 import { ValidJsonValidator } from "../../../library/auto-complete/auto-complete-custom-validator";
+import { FunderFormModel } from "../editor/grant-tab/funder-form-model";
+import { ProjectFormModel } from "../editor/grant-tab/project-form-model";
+import { GrantTabModel } from "../editor/grant-tab/grant-tab-model";
 
 export class DmpWizardEditorModel {
 	public id: string;
@@ -23,7 +26,9 @@ export class DmpWizardEditorModel {
 	public creator: UserModel;
 	public status: Status = Status.Active;
 	public description: String;
-	public grant: GrantListingModel;
+	public grant: GrantTabModel;
+	public funder: FunderFormModel;
+	public project: ProjectFormModel;
 	public organisations: OrganizationModel[] = [];
 	public researchers: ResearcherModel[] = [];
 	public profiles: DmpProfile[] = [];
@@ -41,7 +46,9 @@ export class DmpWizardEditorModel {
 		this.status = item.status;
 		this.lockable = item.lockable;
 		this.description = item.description;
-		this.grant = item.grant;
+		this.grant.fromModel(item.grant);
+		this.project.fromModel(item.project);
+		this.funder.fromModel(item.funder);
 		this.organisations = item.organisations;
 		this.researchers = item.researchers;
 		this.profiles = item.profiles;
@@ -63,7 +70,10 @@ export class DmpWizardEditorModel {
 			version: [{ value: this.version, disabled: disabled }, context.getValidation('version').validators],
 			status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators],
 			description: [{ value: this.description, disabled: disabled }],
-			grant: [{ value: this.grant, disabled: disabled }, context.getValidation('grant').validators],
+			// grant: [{ value: this.grant, disabled: disabled }, context.getValidation('grant').validators],
+			grant: this.grant.buildForm(),
+			project: this.project.buildForm(),
+			funder: this.funder.buildForm(),
 			organisations: [{ value: this.organisations, disabled: disabled }, context.getValidation('organisations').validators],
 			researchers: [{ value: this.researchers, disabled: disabled }, context.getValidation('researchers').validators],
 			profiles: [{ value: this.profiles, disabled: disabled }, context.getValidation('profiles').validators],
@@ -88,6 +98,8 @@ export class DmpWizardEditorModel {
 		baseContext.validation.push({ key: 'status', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'status')] });
 		baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'description')] });
 		baseContext.validation.push({ key: 'grant', validators: [Validators.required, ValidJsonValidator, BackendErrorValidator(this.validationErrorModel, 'grant')] });
+		baseContext.validation.push({ key: 'project', validators: [BackendErrorValidator(this.validationErrorModel, 'project')] });
+		baseContext.validation.push({ key: 'funder', validators: [BackendErrorValidator(this.validationErrorModel, 'funder')] });
 		baseContext.validation.push({ key: 'organisations', validators: [BackendErrorValidator(this.validationErrorModel, 'organisations')] });
 		baseContext.validation.push({ key: 'researchers', validators: [BackendErrorValidator(this.validationErrorModel, 'researchers')] });
 		baseContext.validation.push({ key: 'profiles', validators: [Validators.required, ValidJsonValidator, BackendErrorValidator(this.validationErrorModel, 'profiles')] });
diff --git a/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.ts b/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.ts
index 95d0b5eb6..edef9da14 100644
--- a/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.ts
+++ b/dmp-frontend/src/app/ui/dmp/wizard/dmp-wizard.component.ts
@@ -14,6 +14,9 @@ import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCru
 import { DmpWizardEditorModel } from './dmp-wizard-editor.model';
 import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { GrantTabModel } from '../editor/grant-tab/grant-tab-model';
+import { ProjectFormModel } from '../editor/grant-tab/project-form-model';
+import { FunderFormModel } from '../editor/grant-tab/funder-form-model';
 
 @Component({
 	selector: 'app-dmp-wizard-component',
@@ -46,7 +49,11 @@ export class DmpWizardComponent extends BaseComponent implements OnInit, IBreadC
 				this.dmpService.getSingle(this.itemId).map(data => data as DmpModel)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(data => {
-						this.dmp = new DmpWizardEditorModel().fromModel(data);
+						this.dmp = new DmpWizardEditorModel();
+						this.dmp.grant = new GrantTabModel();
+						this.dmp.project = new ProjectFormModel();
+						this.dmp.funder = new FunderFormModel();
+						this.dmp.fromModel(data);
 						this.formGroup = this.dmp.buildForm();
 
 						if (this.route.routeConfig.path.startsWith('new_version/')) {
diff --git a/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.html b/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.html
index 6ac6c32e2..aea9d7ec5 100644
--- a/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.html
+++ b/dmp-frontend/src/app/ui/dmp/wizard/listing/dmp-wizard-dataset-listing.component.html
@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <h3>{{'DATASET-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
+    <h5 mat-subheader>{{'DATASET-LISTING.SELECT-DATASETS-TO-CLONE' | translate}} {{titlePrefix}}</h5>
     <mat-card class="mat-card">
         <mat-selection-list #selectedItems (selectionChange)="selectionChanged($event,selectedItems)">
             <mat-list-option *ngFor="let dataset of datasets;" [value]="dataset.id" >
@@ -7,4 +7,4 @@
             </mat-list-option>
         </mat-selection-list>
     </mat-card>
-</div>
\ No newline at end of file
+</div>
diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json
index 0ae040941..dc08d8ef0 100644
--- a/dmp-frontend/src/assets/i18n/en.json
+++ b/dmp-frontend/src/assets/i18n/en.json
@@ -52,6 +52,9 @@
 			"VIEW-ALL": "View All",
 			"SHOW-MORE": "Show more",
 			"LOG-IN": "Log in"
+		},
+		"PREPOSITIONS": {
+			"OF": "of"
 		}
 	},
 	"EMAIL-CONFIRMATION": {
@@ -404,6 +407,7 @@
 	},
 	"DATASET-LISTING": {
 		"TITLE": "Dataset Descriptions",
+		"SELECT-DATASETS-TO-CLONE": "Select which datasets to include in the new DMP. Selected datasets will be editable.",
 		"COLUMNS": {
 			"NAME": "Name",
 			"REFERNCE": "Reference",