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
.pipe(takeUntil(this._destroyed))
.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="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-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="dmp.lockable && this.formGroup.enabled"><button type="button" mat-raised-button color="primary" (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}</button></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 { MatDialog, MatSnackBar } from '@angular/material';
import { ActivatedRoute, Params, Router } from '@angular/router';
@ -6,6 +6,7 @@ import { TranslateService } from '@ngx-translate/core';
import * as FileSaver from 'file-saver';
import { Observable } from 'rxjs';
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 { DmpStatus } from '../../../core/common/enum/dmp-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 { DmpModel } from '../../../core/model/dmp/dmp';
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 { BaseCriteria } from '../../../core/query/base-criteria';
import { DatasetProfileCriteria } from '../../../core/query/dataset-profile/dataset-profile-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 { DmpService } from '../../../core/services/dmp/dmp.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 { MultipleAutoCompleteConfiguration } from '../../../library/auto-complete/multiple/multiple-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 { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
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 { DmpEditorModel } from './dmp-editor.model';
import { DmpFinalizeDialogComponent } from './dmp-finalize-dialog/dmp-finalize-dialog.component';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
import { ProjectModel } from '../../../core/model/project/project';
import { ConfirmationDialogComponent } from '../../../library/confirmation-dialog/confirmation-dialog.component';
@Component({
selector: 'app-dmp-editor-component',
templateUrl: 'dmp-editor.component.html',
styleUrls: ['./dmp-editor.component.scss']
})
export class DmpEditorComponent extends BaseComponent implements AfterViewInit, IBreadCrumbComponent {
export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
editMode = false;
@ -85,7 +86,7 @@ export class DmpEditorComponent extends BaseComponent implements AfterViewInit,
// this.filteredOptions = dmpProfileService.getAll({ criteria: new DmpProfileCriteria() });
}
ngAfterViewInit() {
ngOnInit() {
this.route.params
.pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => {
@ -286,29 +287,26 @@ export class DmpEditorComponent extends BaseComponent implements AfterViewInit,
return false;
}
openConfirm(dmpLabel, id): void {
// this._dialogService.openConfirm({
// message: 'Are you sure you want to delete the "' + dmpLabel + '"',
// disableClose: true || false,
// viewContainerRef: this._viewContainerRef,
// title: 'Confirm',
// cancelButton: 'No',
// acceptButton: 'Yes'
// }).afterClosed()
// .pipe(takeUntil(this._destroyed))
// .subscribe((accept: boolean) => {
// if (accept) {
// this.dmpService.delete(id)
// .pipe(takeUntil(this._destroyed))
// .subscribe(() => {
// this.router.navigate(['/plans']);
// });
// } else {
// // DO SOMETHING ELSE
// }
// });
public delete(): void {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
data: {
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CONFIRM'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL')
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
this.dmpService.delete(this.dmp.id)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => { this.onCallbackSuccess() },
error => this.onCallbackError(error)
);
}
});
}
selectOption(option: any) {
this.dmp.definition = null;

View File

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

View File

@ -22,5 +22,6 @@
bottom: 10px !important;
left: auto !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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</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">
<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 { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
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],
endDate: [{ value: this.endDate, disabled: disabled }, context.getValidation('endDate').validators],
files: [{ value: this.files, disabled: disabled }, context.getValidation('files').validators]
});
},{ validator: startEndValidator });
return formGroup;
}
@ -72,3 +72,13 @@ export class ProjectEditorModel {
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">
<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
<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 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 #periodStartPicker></mat-datepicker>
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
</mat-form-field>
<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 #periodEndPicker></mat-datepicker>
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
</mat-form-field>
<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">
{{ 'CRITERIA.PROJECTS.TYPES.ON-GOING' | translate}}
</mat-option>

View File

@ -1,18 +1,19 @@
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 { ValidationErrorModel } from '../../../../common/forms/validation/error-model/validation-error-model';
import { ProjectStateType } from '../../../../core/common/enum/project-state-type';
import { ProjectCriteria } from '../../../../core/query/project/project-criteria';
import { LanguageResolverService } from '../../../../services/language-resolver/language-resolver.service';
import { BaseCriteriaComponent } from '../../../misc/criteria/base-criteria.component';
import { ErrorStateMatcher } from '@angular/material';
@Component({
selector: 'app-project-criteria-component',
templateUrl: './project-criteria.component.html',
styleUrls: ['./project-criteria.component.scss']
})
export class ProjectCriteriaComponent extends BaseCriteriaComponent implements OnInit {
export class ProjectCriteriaComponent extends BaseCriteriaComponent implements OnInit, ErrorStateMatcher {
public ProjectStateType = ProjectStateType;
public criteria: ProjectCriteria = new ProjectCriteria();
@ -46,4 +47,10 @@ export class ProjectCriteriaComponent extends BaseCriteriaComponent implements O
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": {
"VALIDATION": {
"REQUIRED": "Required"
"REQUIRED": "Required",
"PROJECT-START-AFTER-END":"Project start date cannot be after the end date"
},
"DELETE-CONFIRMATION": {
"TITLE": "Warning",