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

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

@@ -35,15 +35,8 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 	@Input() isClone: boolean;
 	@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
 
-	profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
-		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))),
-		displayFn: (item) => item['label'],
-		titleFn: (item) => item['label'],
-		subtitleFn: (item) => item['description']
-	};
-
 	selectedDmpProfileDefinition: DmpProfileDefinition;
+	profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
 
 	constructor(
 		private language: TranslateService,
@@ -58,6 +51,14 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 	}
 
 	ngOnInit() {
+		this.profilesAutoCompleteConfiguration = {
+			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))),
+			displayFn: (item) => item['label'],
+			titleFn: (item) => item['label'],
+			subtitleFn: (item) => item['description']
+		};
+
 		if (this.formGroup.get('definition')) { this.selectedDmpProfileDefinition = this.formGroup.get('definition').value; }
 		this.registerFormEventsForDmpProfile();
 
@@ -74,6 +75,13 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
 
 		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
 			.subscribe(x => {
+				this.profilesAutoCompleteConfiguration = {
+					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))),
+					displayFn: (item) => item['label'],
+					titleFn: (item) => item['label'],
+					subtitleFn: (item) => item['description']
+				};
 				this.onFormChanged.emit();
 			});
 	}

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

@@ -1,11 +1,11 @@
 
 import { Component, OnInit, SimpleChanges } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, AbstractControl, FormControl, FormArray } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { DmpStatus } from '@app/core/common/enum/dmp-status';
 import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
-import { DmpProfileDefinition } from '@app/core/model/dmp-profile/dmp-profile';
+import { DmpProfileDefinition, DmpProfile } from '@app/core/model/dmp-profile/dmp-profile';
 import { DmpProfileListing } from '@app/core/model/dmp-profile/dmp-profile-listing';
 import { DmpModel } from '@app/core/model/dmp/dmp';
 import { UserModel } from '@app/core/model/user/user';
@@ -37,11 +37,8 @@ import { map, takeUntil } from 'rxjs/operators';
 import { Principal } from "@app/core/model/auth/principal";
 import { Role } from "@app/core/common/enum/role";
 import { LockService } from '@app/core/services/lock/lock.service';
-import { Location } from '@angular/common';
 import { LockModel } from '@app/core/model/lock/lock.model';
 import { Guid } from '@common/types/guid';
-import { isNullOrUndefined } from 'util';
-import { environment } from 'environments/environment';
 import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
 import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.model';
 
@@ -142,7 +139,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 								this.dmp.extraProperties = new ExtraPropertiesFormModel();
 								this.dmp.fromModel(data);
 								this.formGroup = this.dmp.buildForm();
-								this.formGroupRawValue = this.formGroup.getRawValue();
+
+								this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+
 								this.setIsUserOwner();
 								if (!this.isUserOwner) {
 									this.isFinalized = true;
@@ -200,7 +199,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 							this.dmp.extraProperties = new ExtraPropertiesFormModel();
 							this.dmp.fromModel(data);
 							this.formGroup = this.dmp.buildForm();
-							this.formGroupRawValue = this.formGroup.getRawValue();
+
+							this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+
 							//this.registerFormEventsForDmpProfile(this.dmp.definition);
 							this.formGroup.disable();
 							// if (!this.isAuthenticated) {
@@ -237,7 +238,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 					this.dmp.extraProperties.visible = false;
 					this.dmp.extraProperties.contact = this.authService.current().id;
 					this.formGroup = this.dmp.buildForm();
-					this.formGroupRawValue = this.formGroup.getRawValue();
+
+					this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
+
 					this.registerFormEventsForNewItem();
 					if (this.isAuthenticated) {
 						this.language.get('NAV-BAR.MY-DMPS').pipe(takeUntil(this._destroyed)).subscribe(x => {
@@ -266,6 +269,24 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 			});
 	}
 
+	copyFormControl(control: AbstractControl) {
+		if (control instanceof FormControl) {
+			return new FormControl(control.value);
+		} else if (control instanceof FormGroup) {
+			const copy = new FormGroup({});
+			Object.keys(control.getRawValue()).forEach(key => {
+				copy.addControl(key, this.copyFormControl(control.controls[key]));
+			});
+			return copy;
+		} else if (control instanceof FormArray) {
+			const copy = new FormArray([]);
+			control.controls.forEach(control => {
+				copy.push(this.copyFormControl(control));
+			})
+			return copy;
+		}
+	}
+
 	public formChanged() {
 		this.hasChanges = true;
 	}
@@ -604,7 +625,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 	}
 
 	public discardChanges() {
-		this.formGroup.patchValue(this.formGroupRawValue);
+		// this.formGroup.reset();
+		this.formGroup.patchValue(JSON.parse(JSON.stringify(this.formGroupRawValue)));
+
 		this.hasChanges = false;
 	}
 

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

@@ -64,6 +64,28 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
 		const grantRequestItem: RequestItem<GrantCriteria> = new RequestItem();
 		grantRequestItem.criteria = new GrantCriteria();
 
+		this.configureAutoCompletes();
+
+		this.isCreateNew = (this.grantformGroup.get('label').value != null && this.grantformGroup.get('label').value.length > 0);
+		this.isCreateNewProject = (this.projectFormGroup.get('label').value != null && this.projectFormGroup.get('label').value.length > 0);
+		this.isCreateNewFunder = (this.funderFormGroup.get('label').value != null && this.funderFormGroup.get('label').value.length > 0);
+		this.setGrantValidators();
+		this.setProjectValidators();
+		this.setFunderValidators();
+		this.registerFormListeners();
+		if (this.isNew && !this.isClone) {
+			this.grantformGroup.reset();
+			this.grantformGroup.disable();
+		}
+
+		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
+			.subscribe(x => {
+				this.configureAutoCompletes();
+				this.onFormChanged.emit();
+			});
+	}
+
+	configureAutoCompletes(): void {
 		this.funderAutoCompleteConfiguration = {
 			filterFn: this.searchFunder.bind(this),
 			initialItems: () => this.searchFunder(''),
@@ -87,23 +109,6 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
 			titleFn: (item) => item['label'],
 			subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE'))
 		}
-
-		this.isCreateNew = (this.grantformGroup.get('label').value != null && this.grantformGroup.get('label').value.length > 0);
-		this.isCreateNewProject = (this.projectFormGroup.get('label').value != null && this.projectFormGroup.get('label').value.length > 0);
-		this.isCreateNewFunder = (this.funderFormGroup.get('label').value != null && this.funderFormGroup.get('label').value.length > 0);
-		this.setGrantValidators();
-		this.setProjectValidators();
-		this.setFunderValidators();
-		this.registerFormListeners();
-		if (this.isNew && !this.isClone) {
-			this.grantformGroup.reset();
-			this.grantformGroup.disable();
-		}
-
-		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
-			.subscribe(x => {
-				this.onFormChanged.emit();
-			});
 	}
 
 	searchGrant(query: any) {

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

@@ -31,17 +31,17 @@
 				</div>
 			</div>
 		</div>
-		<!-- Authors field-->
+		<!-- Researchers field-->
 		<div class="row">
 			<div class="col-12">
-				<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.AUTHORS' | translate}}</div>
+				<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}</div>
 				<div class="hint">
 					<div class="pb-1">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div>
 					<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
 				</div>
 				<div class="author-form">
 					<mat-form-field appearance="outline">
-						<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.AUTHORS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
+						<app-multiple-auto-complete [formControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.PLACEHOLDER.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
 						</app-multiple-auto-complete>
 						<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
 							{{formGroup.get('researchers').getError('backendError').message}}</mat-error>

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

@@ -796,7 +796,8 @@
 		"PLACEHOLDER": {
 			"DESCRIPTION": "Fill with description",
 			"ORGANIZATION": "Select organization",
-			"AUTHORS": "Select authors"
+			"AUTHORS": "Select authors",
+			"RESEARCHERS": "Select researchers"
 		},
 		"SNACK-BAR": {
 			"UNSUCCESSFUL-DOI": "Unsuccessful DOI creation",