Dmp Editor Delete Fix , project editor & Critiria Start End Date validator

This commit is contained in:
Diamantis Tziotzios 2019-01-24 17:30:23 +02:00
parent 5ff63f3ce9
commit c991da090b
11 changed files with 79 additions and 46 deletions

View File

@ -193,7 +193,12 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, Aft
this.formGroup.get('dmp').valueChanges this.formGroup.get('dmp').valueChanges
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(x => { .subscribe(x => {
this.loadDatasetProfiles(); if (x) { this.loadDatasetProfiles(); }
else{
this.availableProfiles=[];
this.formGroup.get('profile').reset();
}
}); });
} }
} }

View File

@ -131,7 +131,7 @@
<div class="row"> <div class="row">
<div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button></div> <div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col"></div> <div class="col"></div>
<div class="col-auto" *ngIf="!isNew && this.formGroup.enabled"><button mat-raised-button color="primary" type="button" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button></div> <div class="col-auto" *ngIf="!isNew && this.formGroup.enabled"><button mat-raised-button color="primary" type="button" (click)="delete()">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
<div class="col-auto" *ngIf="this.formGroup.enabled"><button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button></div> <div class="col-auto" *ngIf="this.formGroup.enabled"><button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
<div class="col-auto" *ngIf="dmp.lockable && this.formGroup.enabled"><button type="button" mat-raised-button color="primary" (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}</button></div> <div class="col-auto" *ngIf="dmp.lockable && this.formGroup.enabled"><button type="button" mat-raised-button color="primary" (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}</button></div>
</div> </div>

View File

@ -1,4 +1,4 @@
import { AfterViewInit, Component, ViewContainerRef } from '@angular/core'; import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'; import { FormControl, FormGroup } from '@angular/forms';
import { MatDialog, MatSnackBar } from '@angular/material'; import { MatDialog, MatSnackBar } from '@angular/material';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
@ -6,6 +6,7 @@ import { TranslateService } from '@ngx-translate/core';
import * as FileSaver from 'file-saver'; import * as FileSaver from 'file-saver';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { BaseComponent } from '../../../core/common/base/base.component'; import { BaseComponent } from '../../../core/common/base/base.component';
import { DmpStatus } from '../../../core/common/enum/dmp-status'; import { DmpStatus } from '../../../core/common/enum/dmp-status';
import { Status } from '../../../core/common/enum/Status'; import { Status } from '../../../core/common/enum/Status';
@ -13,17 +14,19 @@ import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing
import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile'; import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile';
import { DmpModel } from '../../../core/model/dmp/dmp'; import { DmpModel } from '../../../core/model/dmp/dmp';
import { ExternalSourceItemModel } from '../../../core/model/external-sources/external-source-item'; import { ExternalSourceItemModel } from '../../../core/model/external-sources/external-source-item';
import { ProjectModel } from '../../../core/model/project/project';
import { UserModel } from '../../../core/model/user/user'; import { UserModel } from '../../../core/model/user/user';
import { BaseCriteria } from '../../../core/query/base-criteria'; import { BaseCriteria } from '../../../core/query/base-criteria';
import { DatasetProfileCriteria } from '../../../core/query/dataset-profile/dataset-profile-criteria'; import { DatasetProfileCriteria } from '../../../core/query/dataset-profile/dataset-profile-criteria';
import { ProjectCriteria } from '../../../core/query/project/project-criteria'; import { ProjectCriteria } from '../../../core/query/project/project-criteria';
import { RequestItem } from '../../../core/query/request-item';
import { DmpProfileService } from '../../../core/services/dmp/dmp-profile.service'; import { DmpProfileService } from '../../../core/services/dmp/dmp-profile.service';
import { DmpService } from '../../../core/services/dmp/dmp.service'; import { DmpService } from '../../../core/services/dmp/dmp.service';
import { ExternalSourcesService } from '../../../core/services/external-sources/external-sources.service'; import { ExternalSourcesService } from '../../../core/services/external-sources/external-sources.service';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
import { ProjectService } from '../../../core/services/project/project.service'; import { ProjectService } from '../../../core/services/project/project.service';
import { MultipleAutoCompleteConfiguration } from '../../../library/auto-complete/multiple/multiple-auto-complete-configuration'; import { MultipleAutoCompleteConfiguration } from '../../../library/auto-complete/multiple/multiple-auto-complete-configuration';
import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration'; import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration';
import { RequestItem } from '../../../core/query/request-item';
import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service'; import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item'; import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent'; import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
@ -31,16 +34,14 @@ import { AddResearcherComponent } from './add-researcher/add-researcher.componen
import { AvailableProfilesComponent } from './available-profiles/available-profiles.component'; import { AvailableProfilesComponent } from './available-profiles/available-profiles.component';
import { DmpEditorModel } from './dmp-editor.model'; import { DmpEditorModel } from './dmp-editor.model';
import { DmpFinalizeDialogComponent } from './dmp-finalize-dialog/dmp-finalize-dialog.component'; import { DmpFinalizeDialogComponent } from './dmp-finalize-dialog/dmp-finalize-dialog.component';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model'; import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
import { ProjectModel } from '../../../core/model/project/project';
@Component({ @Component({
selector: 'app-dmp-editor-component', selector: 'app-dmp-editor-component',
templateUrl: 'dmp-editor.component.html', templateUrl: 'dmp-editor.component.html',
styleUrls: ['./dmp-editor.component.scss'] styleUrls: ['./dmp-editor.component.scss']
}) })
export class DmpEditorComponent extends BaseComponent implements AfterViewInit, IBreadCrumbComponent { export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
editMode = false; editMode = false;
@ -85,7 +86,7 @@ export class DmpEditorComponent extends BaseComponent implements AfterViewInit,
// this.filteredOptions = dmpProfileService.getAll({ criteria: new DmpProfileCriteria() }); // this.filteredOptions = dmpProfileService.getAll({ criteria: new DmpProfileCriteria() });
} }
ngAfterViewInit() { ngOnInit() {
this.route.params this.route.params
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => { .subscribe((params: Params) => {
@ -286,29 +287,26 @@ export class DmpEditorComponent extends BaseComponent implements AfterViewInit,
return false; return false;
} }
openConfirm(dmpLabel, id): void { public delete(): void {
// this._dialogService.openConfirm({ const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
// message: 'Are you sure you want to delete the "' + dmpLabel + '"', maxWidth: '300px',
// disableClose: true || false, data: {
// viewContainerRef: this._viewContainerRef, message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
// title: 'Confirm', confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
// cancelButton: 'No', cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
// acceptButton: 'Yes' }
// }).afterClosed() });
// .pipe(takeUntil(this._destroyed)) dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
// .subscribe((accept: boolean) => { if (result) {
// if (accept) { this.dmpService.delete(this.dmp.id)
// this.dmpService.delete(id) .pipe(takeUntil(this._destroyed))
// .pipe(takeUntil(this._destroyed)) .subscribe(
// .subscribe(() => { complete => { this.onCallbackSuccess() },
// this.router.navigate(['/plans']); error => this.onCallbackError(error)
// }); );
// } else { }
// // DO SOMETHING ELSE });
// }
// });
} }
selectOption(option: any) { selectOption(option: any) {
this.dmp.definition = null; this.dmp.definition = null;

View File

@ -147,3 +147,4 @@ export class DmpDynamicFieldDependencyEditorModel {
}); });
} }
} }

View File

@ -22,5 +22,6 @@
bottom: 10px !important; bottom: 10px !important;
left: auto !important; left: auto !important;
position: fixed !important; position: fixed !important;
z-index: 5;
} }
} }

View File

@ -73,6 +73,7 @@
<mat-error *ngIf="formGroup.get('endDate').hasError('backendError')">{{formGroup.get('endDate').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('endDate').hasError('backendError')">{{formGroup.get('endDate').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('endDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('endDate').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-error *ngIf="formGroup.hasError('startAfterEndError')"class="col-md-12">{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description" required></textarea> <textarea matInput class="description-area" placeholder="{{'PROJECT-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description" required></textarea>

View File

@ -1,4 +1,4 @@
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { BackendErrorValidator } from '../../../common/forms/validation/custom-validator'; import { BackendErrorValidator } from '../../../common/forms/validation/custom-validator';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model'; import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { ValidationContext } from '../../../common/forms/validation/validation-context'; import { ValidationContext } from '../../../common/forms/validation/validation-context';
@ -51,7 +51,7 @@ export class ProjectEditorModel {
startDate: [{ value: this.startDate, disabled: disabled }, context.getValidation('startDate').validators], startDate: [{ value: this.startDate, disabled: disabled }, context.getValidation('startDate').validators],
endDate: [{ value: this.endDate, disabled: disabled }, context.getValidation('endDate').validators], endDate: [{ value: this.endDate, disabled: disabled }, context.getValidation('endDate').validators],
files: [{ value: this.files, disabled: disabled }, context.getValidation('files').validators] files: [{ value: this.files, disabled: disabled }, context.getValidation('files').validators]
}); },{ validator: startEndValidator });
return formGroup; return formGroup;
} }
@ -72,3 +72,13 @@ export class ProjectEditorModel {
return baseContext; return baseContext;
} }
} }
export function startEndValidator(formGroup: FormGroup) {
const start = formGroup.get('startDate').value;
const end = formGroup.get('endDate').value;
if(start!=null && end != null && end<start)
{
return { 'startAfterEndError': { } };
}
return null;
}

View File

@ -2,22 +2,31 @@
<div class="row"> <div class="row">
<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> --> <!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like" (ngModelChange)="controlModified()"> <input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like"
(ngModelChange)="controlModified()">
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder=" {{this.languageResolver.getBy('criteriaStart')| translate}}" [matDatepicker]="periodStartPicker" name="projectCriteriaPeriodStart" [(ngModel)]="criteria.periodStart" (ngModelChange)="controlModified()"> <input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder=" {{this.languageResolver.getBy('criteriaStart')| translate}}"
[matDatepicker]="periodStartPicker" name="projectCriteriaPeriodStart" [(ngModel)]="criteria.periodStart"
(ngModelChange)="controlModified()" [errorStateMatcher]="this">
<mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle>
<mat-datepicker #periodStartPicker></mat-datepicker> <mat-datepicker #periodStartPicker></mat-datepicker>
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="projectCriteriaPeriodEnd" placeholder=" {{this.languageResolver.getBy('criteriaEnd')| translate}}" [matDatepicker]="periodEndPicker" [(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()"> <input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="projectCriteriaPeriodEnd"
placeholder=" {{this.languageResolver.getBy('criteriaEnd')| translate}}" [matDatepicker]="periodEndPicker"
[(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
<mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle>
<mat-datepicker #periodEndPicker></mat-datepicker> <mat-datepicker #periodEndPicker></mat-datepicker>
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-3"> <mat-form-field class="col-md-3">
<mat-select placeholder=" {{ 'CRITERIA.PROJECTS.PROJECT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.projectStateType" (ngModelChange)="controlModified()"> <mat-select placeholder=" {{ 'CRITERIA.PROJECTS.PROJECT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.projectStateType"
(ngModelChange)="controlModified()">
<mat-option [value]="ProjectStateType.OnGoing"> <mat-option [value]="ProjectStateType.OnGoing">
{{ 'CRITERIA.PROJECTS.TYPES.ON-GOING' | translate}} {{ 'CRITERIA.PROJECTS.TYPES.ON-GOING' | translate}}
</mat-option> </mat-option>

View File

@ -1,18 +1,19 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { ValidationErrorModel } from '../../../../common/forms/validation/error-model/validation-error-model'; import { ValidationErrorModel } from '../../../../common/forms/validation/error-model/validation-error-model';
import { ProjectStateType } from '../../../../core/common/enum/project-state-type'; import { ProjectStateType } from '../../../../core/common/enum/project-state-type';
import { ProjectCriteria } from '../../../../core/query/project/project-criteria'; import { ProjectCriteria } from '../../../../core/query/project/project-criteria';
import { LanguageResolverService } from '../../../../services/language-resolver/language-resolver.service'; import { LanguageResolverService } from '../../../../services/language-resolver/language-resolver.service';
import { BaseCriteriaComponent } from '../../../misc/criteria/base-criteria.component'; import { BaseCriteriaComponent } from '../../../misc/criteria/base-criteria.component';
import { ErrorStateMatcher } from '@angular/material';
@Component({ @Component({
selector: 'app-project-criteria-component', selector: 'app-project-criteria-component',
templateUrl: './project-criteria.component.html', templateUrl: './project-criteria.component.html',
styleUrls: ['./project-criteria.component.scss'] styleUrls: ['./project-criteria.component.scss']
}) })
export class ProjectCriteriaComponent extends BaseCriteriaComponent implements OnInit { export class ProjectCriteriaComponent extends BaseCriteriaComponent implements OnInit, ErrorStateMatcher {
public ProjectStateType = ProjectStateType; public ProjectStateType = ProjectStateType;
public criteria: ProjectCriteria = new ProjectCriteria(); public criteria: ProjectCriteria = new ProjectCriteria();
@ -46,4 +47,10 @@ export class ProjectCriteriaComponent extends BaseCriteriaComponent implements O
this.refreshCallback(); this.refreshCallback();
} }
} }
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
const isDateInvalid = this.criteria.periodStart != null && this.criteria.periodEnd != null && this.criteria.periodStart > this.criteria.periodEnd
return !!(control && isDateInvalid && (control.dirty || control.touched || isSubmitted));
}
} }

View File

@ -1,7 +1,8 @@
{ {
"GENERAL": { "GENERAL": {
"VALIDATION": { "VALIDATION": {
"REQUIRED": "Required" "REQUIRED": "Required",
"PROJECT-START-AFTER-END":"Project start date cannot be after the end date"
}, },
"DELETE-CONFIRMATION": { "DELETE-CONFIRMATION": {
"TITLE": "Warning", "TITLE": "Warning",