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

This commit is contained in:
gpapavgeri 2020-07-20 18:32:20 +03:00
commit 94d8151356
5 changed files with 75 additions and 38 deletions

View File

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

View File

@ -1,11 +1,11 @@
import { Component, OnInit, SimpleChanges } from '@angular/core'; 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 { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
import { DmpStatus } from '@app/core/common/enum/dmp-status'; import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request'; 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 { DmpProfileListing } from '@app/core/model/dmp-profile/dmp-profile-listing';
import { DmpModel } from '@app/core/model/dmp/dmp'; import { DmpModel } from '@app/core/model/dmp/dmp';
import { UserModel } from '@app/core/model/user/user'; 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 { Principal } from "@app/core/model/auth/principal";
import { Role } from "@app/core/common/enum/role"; import { Role } from "@app/core/common/enum/role";
import { LockService } from '@app/core/services/lock/lock.service'; import { LockService } from '@app/core/services/lock/lock.service';
import { Location } from '@angular/common';
import { LockModel } from '@app/core/model/lock/lock.model'; import { LockModel } from '@app/core/model/lock/lock.model';
import { Guid } from '@common/types/guid'; 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 { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.model'; 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.extraProperties = new ExtraPropertiesFormModel();
this.dmp.fromModel(data); this.dmp.fromModel(data);
this.formGroup = this.dmp.buildForm(); this.formGroup = this.dmp.buildForm();
this.formGroupRawValue = this.formGroup.getRawValue();
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
this.setIsUserOwner(); this.setIsUserOwner();
if (!this.isUserOwner) { if (!this.isUserOwner) {
this.isFinalized = true; this.isFinalized = true;
@ -200,7 +199,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.dmp.extraProperties = new ExtraPropertiesFormModel(); this.dmp.extraProperties = new ExtraPropertiesFormModel();
this.dmp.fromModel(data); this.dmp.fromModel(data);
this.formGroup = this.dmp.buildForm(); 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.registerFormEventsForDmpProfile(this.dmp.definition);
this.formGroup.disable(); this.formGroup.disable();
// if (!this.isAuthenticated) { // if (!this.isAuthenticated) {
@ -237,7 +238,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.dmp.extraProperties.visible = false; this.dmp.extraProperties.visible = false;
this.dmp.extraProperties.contact = this.authService.current().id; this.dmp.extraProperties.contact = this.authService.current().id;
this.formGroup = this.dmp.buildForm(); this.formGroup = this.dmp.buildForm();
this.formGroupRawValue = this.formGroup.getRawValue();
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
this.registerFormEventsForNewItem(); this.registerFormEventsForNewItem();
if (this.isAuthenticated) { if (this.isAuthenticated) {
this.language.get('NAV-BAR.MY-DMPS').pipe(takeUntil(this._destroyed)).subscribe(x => { 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() { public formChanged() {
this.hasChanges = true; this.hasChanges = true;
} }
@ -604,7 +625,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
} }
public discardChanges() { public discardChanges() {
this.formGroup.patchValue(this.formGroupRawValue); // this.formGroup.reset();
this.formGroup.patchValue(JSON.parse(JSON.stringify(this.formGroupRawValue)));
this.hasChanges = false; this.hasChanges = false;
} }

View File

@ -64,6 +64,28 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
const grantRequestItem: RequestItem<GrantCriteria> = new RequestItem(); const grantRequestItem: RequestItem<GrantCriteria> = new RequestItem();
grantRequestItem.criteria = new GrantCriteria(); 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 = { this.funderAutoCompleteConfiguration = {
filterFn: this.searchFunder.bind(this), filterFn: this.searchFunder.bind(this),
initialItems: () => this.searchFunder(''), initialItems: () => this.searchFunder(''),
@ -87,23 +109,6 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
titleFn: (item) => item['label'], 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')) 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) { searchGrant(query: any) {

View File

@ -31,17 +31,17 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Authors field--> <!-- Researchers field-->
<div class="row"> <div class="row">
<div class="col-12"> <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="hint">
<div class="pb-1">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> <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><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
</div> </div>
<div class="author-form"> <div class="author-form">
<mat-form-field appearance="outline"> <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> </app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('researchers').hasError('backendError')"> <mat-error *ngIf="formGroup.get('researchers').hasError('backendError')">
{{formGroup.get('researchers').getError('backendError').message}}</mat-error> {{formGroup.get('researchers').getError('backendError').message}}</mat-error>

View File

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