MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Funder - Grant Selection in DMP at quick-wizard. (Issue #182)

This commit is contained in:
apapachristou 2019-10-04 19:11:52 +03:00
parent b08ac084c9
commit 77d2aa317e
10 changed files with 68 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts
View File

@ -24,6 +24,8 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
@Input() configuration: SingleAutoCompleteConfiguration; @Input() configuration: SingleAutoCompleteConfiguration;
// Selected Option Event // Selected Option Event
@Output() optionSelected: EventEmitter<any> = new EventEmitter(); @Output() optionSelected: EventEmitter<any> = new EventEmitter();
// Removed Option Event
@Output() optionRemoved: EventEmitter<any> = new EventEmitter();
id = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`; id = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`;
stateChanges = new Subject<void>(); stateChanges = new Subject<void>();
@ -231,6 +233,7 @@ export class SingleAutoCompleteComponent implements OnInit, MatFormFieldControl<
chipRemove(): void { chipRemove(): void {
this._setValue(null); this._setValue(null);
this.optionRemoved.emit();
} }
autoCompleteDisplayFn() { autoCompleteDisplayFn() {

2
dmp-frontend/src/app/ui/dmp/editor/grant-tab/funder-form-model.ts
View File

@ -36,7 +36,7 @@ export class FunderFormModel {
baseContext.validation.push({ key: 'id', validators: [] }); baseContext.validation.push({ key: 'id', validators: [] });
baseContext.validation.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'label')] }); baseContext.validation.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'label')] });
baseContext.validation.push({ key: 'status', validators: [] }); baseContext.validation.push({ key: 'status', validators: [] });
baseContext.validation.push({ key: 'existFunder', validators: [BackendErrorValidator(this.validationErrorModel, 'existFunder')] }); baseContext.validation.push({ key: 'existFunder', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'existFunder')] });
return baseContext; return baseContext;
} }

13
dmp-frontend/src/app/ui/quick-wizard/funder-editor/funder-editor-wizard.component.html
View File

@ -1,23 +1,24 @@
<div class="funder-editor"> <div class="funder-editor">
<form *ngIf="formGroup" [formGroup]="formGroup"> <form *ngIf="funderFormGroup" [formGroup]="funderFormGroup">
<mat-card> <mat-card>
<mat-card-header></mat-card-header> <mat-card-header></mat-card-header>
<mat-card-content> <mat-card-content>
<div class="row" *ngIf="!isNew"> <div class="row" *ngIf="!isNew">
<p class="col-md-12"><b>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.ABOUT-FUNDER' | translate}}</b></p> <p class="col-md-12"><b>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.ABOUT-FUNDER' | translate}}</b></p>
<mat-form-field class="col-md-12 mt-2"> <mat-form-field class="col-md-12 mt-2">
<app-single-auto-complete [formControl]="formGroup.get('existFunder')" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-FUNDER' | translate}}" [configuration]="funderAutoCompleteConfiguration"> <app-single-auto-complete required='true' [formControl]="funderFormGroup.get('existFunder')" (optionSelected)="onFunderSelected($event)" (optionRemoved)="onFunderRemoved($event)" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-FUNDER' | translate}}" [configuration]="funderAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
<mat-hint>{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</mat-hint>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row" *ngIf="isNew"> <div class="row" *ngIf="isNew">
<p class="col-md-12"><b>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.ABOUT-NEW-FUNDER' | translate}}</b></p> <p class="col-md-12"><b>{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.ABOUT-NEW-FUNDER' | translate}}</b></p>
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.FUNDER-LABEL' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required> <input matInput placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.FUNDER-LABEL' | translate}}" type="text" name="label" (ngModelChange)="controlModified($event)" [formControl]="funderFormGroup.get('label')" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> <mat-error *ngIf="funderFormGroup.get('label').hasError('backendError')">
{{formGroup.get('label').getError('backendError').message}}</mat-error> {{funderFormGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')"> <mat-error *ngIf="funderFormGroup.get('label').hasError('required')">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> {{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>

49
dmp-frontend/src/app/ui/quick-wizard/funder-editor/funder-editor-wizard.component.ts
View File

@ -5,6 +5,7 @@ import { FunderService } from '../../../core/services/funder/funder.service';
import { RequestItem } from '../../../core/query/request-item'; import { RequestItem } from '../../../core/query/request-item';
import { FunderCriteria } from '../../../core/query/funder/funder-criteria'; import { FunderCriteria } from '../../../core/query/funder/funder-criteria';
import { FunderFormModel } from '../../dmp/editor/grant-tab/funder-form-model'; import { FunderFormModel } from '../../dmp/editor/grant-tab/funder-form-model';
import { TranslateService } from '@ngx-translate/core';
@Component({ @Component({
selector: 'app-quick-wizard-funder-editor-component', selector: 'app-quick-wizard-funder-editor-component',
@ -15,11 +16,13 @@ export class FunderEditorWizardComponent implements OnInit {
isNew = false; isNew = false;
funder: FunderFormModel; funder: FunderFormModel;
@Input() formGroup: FormGroup; @Input() funderFormGroup: FormGroup;
@Input() grantformGroup: FormGroup;
funderAutoCompleteConfiguration: SingleAutoCompleteConfiguration; funderAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
constructor( constructor(
private funderService: FunderService private funderService: FunderService,
private language: TranslateService
) { } ) { }
ngOnInit() { ngOnInit() {
@ -28,16 +31,17 @@ export class FunderEditorWizardComponent implements OnInit {
filterFn: this.searchFunder.bind(this), filterFn: this.searchFunder.bind(this),
initialItems: (extraData) => this.searchFunder(''), initialItems: (extraData) => this.searchFunder(''),
displayFn: (item) => item['label'], displayFn: (item) => item['label'],
titleFn: (item) => item['label'] titleFn: (item) => item['label'],
subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')
}; };
if (!this.formGroup) { if (!this.funderFormGroup) {
this.funder = new FunderFormModel(); this.funder = new FunderFormModel();
this.formGroup = this.funder.buildForm(); this.funderFormGroup = this.funder.buildForm();
} }
this.formGroup.get('existFunder').enable(); this.funderFormGroup.get('existFunder').enable();
this.formGroup.get('label').disable(); this.funderFormGroup.get('label').disable();
} }
searchFunder(query: string) { searchFunder(query: string) {
@ -50,13 +54,32 @@ export class FunderEditorWizardComponent implements OnInit {
create() { create() {
this.isNew = !this.isNew; this.isNew = !this.isNew;
if (this.isNew) { if (this.isNew) {
this.formGroup.get('existFunder').disable(); this.funderFormGroup.get('existFunder').disable();
this.formGroup.get('existFunder').reset(); this.funderFormGroup.get('existFunder').reset();
this.formGroup.get('label').enable(); this.funderFormGroup.get('label').enable();
} else { } else {
this.formGroup.get('existFunder').enable(); this.funderFormGroup.get('existFunder').enable();
this.formGroup.get('label').disable(); this.funderFormGroup.get('label').disable();
this.formGroup.get('label').reset(); this.funderFormGroup.get('label').reset();
}
}
onFunderSelected(event: any) {
this.grantformGroup.get('existGrant').enable();
}
onFunderRemoved(event: any) {
this.grantformGroup.get('existGrant').disable();
this.grantformGroup.get('existGrant').reset();
}
controlModified(event: any) {
if (event) {
this.grantformGroup.get('existGrant').enable();
}
else {
this.grantformGroup.get('existGrant').disable();
this.grantformGroup.get('existGrant').reset();
} }
} }

3
dmp-frontend/src/app/ui/quick-wizard/grant-editor/grant-editor-wizard.component.html
View File

@ -12,6 +12,7 @@
<mat-form-field class="col-md-12 mt-2"> <mat-form-field class="col-md-12 mt-2">
<app-single-auto-complete required='true' [formControl]="grantformGroup.get('existGrant')" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-GRANT' | translate}}" [configuration]="grantAutoCompleteConfiguration"> <app-single-auto-complete required='true' [formControl]="grantformGroup.get('existGrant')" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-GRANT' | translate}}" [configuration]="grantAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
<mat-hint>{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</mat-hint>
<mat-error *ngIf="grantformGroup.hasError('backendError')"> <mat-error *ngIf="grantformGroup.hasError('backendError')">
{{grantformGroup.get('grant').getError('backendError').message}}</mat-error> {{grantformGroup.get('grant').getError('backendError').message}}</mat-error>
<mat-error *ngIf="grantformGroup.hasError('required')"> <mat-error *ngIf="grantformGroup.hasError('required')">
@ -53,7 +54,7 @@
<div class="row"> <div class="row">
<div class="col"></div> <div class="col"></div>
<button mat-raised-button class="col-auto" color="primary" type="button" *ngIf="!isNew" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-GRANT' | translate}}</button> <button mat-raised-button class="col-auto" color="primary" type="button" *ngIf="!isNew" [disabled]="isFunderFormInvalid()" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.CREATE-NEW-GRANT' | translate}}</button>
<button mat-raised-button class="col-auto" color="primary" type="button" *ngIf="isNew" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</button> <button mat-raised-button class="col-auto" color="primary" type="button" *ngIf="isNew" (click)="create()">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.EXIST-GRANT' | translate}}</button>
<div class="col"></div> <div class="col"></div>

12
dmp-frontend/src/app/ui/quick-wizard/grant-editor/grant-editor-wizard.component.ts
View File

@ -57,7 +57,7 @@ export class GrantEditorWizardComponent extends BaseComponent implements OnInit,
initialItems: (extraData) => this.searchGrant(''), initialItems: (extraData) => this.searchGrant(''),
displayFn: (item) => item['label'], displayFn: (item) => item['label'],
titleFn: (item) => item['label'], titleFn: (item) => item['label'],
subtitleFn: (item) => item ? item['source'] : null subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')
}; };
if (!this.grantformGroup) { if (!this.grantformGroup) {
@ -65,7 +65,11 @@ export class GrantEditorWizardComponent extends BaseComponent implements OnInit,
this.grantformGroup = this.grant.buildForm(); this.grantformGroup = this.grant.buildForm();
} }
this.grantformGroup.get('existGrant').enable(); if (this.funderFormGroup && this.funderFormGroup.get('funder')) {
this.grantformGroup.get('existGrant').enable();
} else {
this.grantformGroup.get('existGrant').disable();
}
this.grantformGroup.get('label').disable(); this.grantformGroup.get('label').disable();
this.grantformGroup.get('description').disable(); this.grantformGroup.get('description').disable();
@ -101,6 +105,10 @@ export class GrantEditorWizardComponent extends BaseComponent implements OnInit,
return this.grantformGroup.valid; return this.grantformGroup.valid;
} }
isFunderFormInvalid() {
return !this.funderFormGroup.get('existFunder').value && !this.funderFormGroup.get('label').valid;
}
public touchAllFormFields(formControl: AbstractControl) { public touchAllFormFields(formControl: AbstractControl) {
if (formControl instanceof FormControl) { if (formControl instanceof FormControl) {
formControl.markAsTouched(); formControl.markAsTouched();

1
dmp-frontend/src/app/ui/quick-wizard/project-editor/project-editor-wizard.component.html
View File

@ -9,6 +9,7 @@
<mat-form-field class="col-md-12 mt-2"> <mat-form-field class="col-md-12 mt-2">
<app-single-auto-complete [formControl]="formGroup.get('existProject')" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration"> <app-single-auto-complete [formControl]="formGroup.get('existProject')" placeholder="{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.FIELDS.SELECT-PROJECT' | translate}}" [configuration]="projectAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
<mat-hint>{{'DMP-EDITOR.FIELDS.EXTERNAL-SOURCE-HINT' | translate}}</mat-hint>
</mat-form-field> </mat-form-field>
</div> </div>

7
dmp-frontend/src/app/ui/quick-wizard/project-editor/project-editor-wizard.component.ts
View File

@ -5,6 +5,7 @@ import { ProjectService } from '../../../core/services/project/project.service';
import { RequestItem } from '../../../core/query/request-item'; import { RequestItem } from '../../../core/query/request-item';
import { ProjectCriteria } from '../../../core/query/project/project-criteria'; import { ProjectCriteria } from '../../../core/query/project/project-criteria';
import { ProjectFormModel } from '../../dmp/editor/grant-tab/project-form-model'; import { ProjectFormModel } from '../../dmp/editor/grant-tab/project-form-model';
import { TranslateService } from '@ngx-translate/core';
@Component({ @Component({
selector: 'app-quick-wizard-project-editor-component', selector: 'app-quick-wizard-project-editor-component',
@ -19,7 +20,8 @@ export class ProjectEditorWizardComponent implements OnInit {
projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration; projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
constructor( constructor(
private projectService: ProjectService private projectService: ProjectService,
private language: TranslateService
) { } ) { }
ngOnInit() { ngOnInit() {
@ -27,7 +29,8 @@ export class ProjectEditorWizardComponent implements OnInit {
filterFn: this.searchProject.bind(this), filterFn: this.searchProject.bind(this),
initialItems: (extraData) => this.searchProject(''), initialItems: (extraData) => this.searchProject(''),
displayFn: (item) => item['label'], displayFn: (item) => item['label'],
titleFn: (item) => item['label'] titleFn: (item) => item['label'],
subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')
}; };
if (!this.formGroup) { if (!this.formGroup) {

4
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.html
View File

@ -11,14 +11,14 @@
{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}} {{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.FIRST-STEP.TITLE' | translate}}
</ng-template> </ng-template>
<div *ngIf="formGroup.get('funder')"> <div *ngIf="formGroup.get('funder')">
<app-quick-wizard-funder-editor-component class="col-12" [formGroup]="formGroup.get('funder')"></app-quick-wizard-funder-editor-component> <app-quick-wizard-funder-editor-component class="col-12" [funderFormGroup]="formGroup.get('funder')" [grantformGroup]="formGroup.get('grant')"></app-quick-wizard-funder-editor-component>
</div> </div>
<app-quick-wizard-grant-editor-component class="col-12" [grantformGroup]="formGroup.get('grant')" [funderFormGroup]="formGroup.get('funder')"></app-quick-wizard-grant-editor-component> <app-quick-wizard-grant-editor-component class="col-12" [grantformGroup]="formGroup.get('grant')" [funderFormGroup]="formGroup.get('funder')"></app-quick-wizard-grant-editor-component>
<div *ngIf="formGroup.get('project')"> <div *ngIf="formGroup.get('project')">
<app-quick-wizard-project-editor-component class="col-12" [formGroup]="formGroup.get('project')"></app-quick-wizard-project-editor-component> <app-quick-wizard-project-editor-component class="col-12" [formGroup]="formGroup.get('project')"></app-quick-wizard-project-editor-component>
</div> </div>
<div class="navigation-buttons-container"> <div class="navigation-buttons-container">
<button class="float-right" [disabled]="formGroup.get('grant').invalid" matStepperNext mat-raised-button color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button> <button class="float-right" [disabled]="!isFormValid()" matStepperNext mat-raised-button color="primary">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.ACTIONS.NEXT' | translate}}</button>
</div> </div>
</mat-step> </mat-step>
<mat-step [stepControl]="formGroup.get('dmp')"> <mat-step [stepControl]="formGroup.get('dmp')">

2
dmp-frontend/src/app/ui/quick-wizard/quick-wizard-editor/quick-wizard-editor.component.ts
View File

@ -133,7 +133,7 @@ export class QuickWizardEditorComponent extends CheckDeactivateBaseComponent imp
} }
public isFormValid() { public isFormValid() {
return this.formGroup.get('grant').valid; return this.formGroup.get('grant').valid && this.formGroup.get('funder').valid;
} }
public touchAllFormFields(formControl: AbstractControl) { public touchAllFormFields(formControl: AbstractControl) {