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

dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts

@@ -64,7 +64,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, Aft
 		public dmpService: DmpService,
 		public dialog: MatDialog,
 		public externalSourcesConfigurationService: ExternalSourcesConfigurationService,
-		private uiNotificationService:UiNotificationService
+		private uiNotificationService: UiNotificationService
 	) {
 		super();
 	}
@@ -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();
+					}
+				
 				});
 		}
 	}

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

@@ -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>

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

@@ -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 { 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({
 	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,30 +287,27 @@ export class DmpEditorComponent extends BaseComponent implements AfterViewInit,
 		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) {
 		this.dmp.definition = null;
 		this.formGroup.get('profile').patchValue(option, { emitEvent: false });

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

@@ -146,4 +146,5 @@ export class DmpDynamicFieldDependencyEditorModel {
 			queryProperty: [this.queryProperty]
 		});
 	}
-}
+}
+

dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss

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

dmp-frontend/src/app/ui/project/editor/project-editor.component.html

@@ -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>

dmp-frontend/src/app/ui/project/editor/project-editor.model.ts

@@ -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;
+  }

dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.html

@@ -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>
@@ -27,4 +36,4 @@
 			</mat-select>
 		</mat-form-field>
 	</div>
-</mat-card>
+</mat-card>

dmp-frontend/src/app/ui/project/listing/criteria/project-criteria.component.ts

@@ -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));
+	}
+}

dmp-frontend/src/app/ui/project/listing/project-listing.component.scss

@@ -20,7 +20,7 @@
  		right: 20px !important;
  		bottom: 10px !important;
  		left: auto !important;
-		 position: fixed !important;
+		position: fixed !important;
-		 z-index: 5;
+		z-index: 5;
  	}
  }

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

@@ -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",