import json rda ui changes

dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.html

@@ -30,22 +30,26 @@
 				<input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json">
 			</form>
 		</div>
+		<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup == null && files.length > 0 && files[0].type.includes('/json')">
+			{{ 'DMP-UPLOAD.ANALYZING-FILE' | translate }}
+			<b class="fa fa-spinner fa-spin" ></b>
+		</div>
 		<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')">
 			<mat-form-field class="w-100">
-				<input [formControl]="formGroup.get('label')" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
+				<input [formControl]="formGroup.get('label')" matInput required="true" placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
 			</mat-form-field>
 			<mat-form-field class="w-100">
 				<app-single-auto-complete [required]="true" [formControl]="formGroup.get('blueprintId')" placeholder="{{'DMP-UPLOAD.FIELDS.BLUEPRINT-PLACEHOLDER' | translate}}" [configuration]="dmpBlueprintService.singleAutocompleteBlueprintConfiguration" (optionSelected)="selectedBlueprintChanged($event)">
 				</app-single-auto-complete>
 			</mat-form-field>
 			<ng-container *ngIf="formGroup.get('blueprintId').value">
-				<div *ngFor="let description of formGroup.get('descriptions').controls; let fieldIndex=index;" class="row mb-3">
+				<div *ngFor="let description of formGroup.get('descriptions').controls; let descriptionIndex=index;" class="row mb-3">
 					<span *ngIf="description.get('label').value"  style="font-size: 1rem;">
 						{{ description.get('label').value }}
 					</span>
 					<mat-form-field class="w-100">
 						<mat-label>{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
-						<app-single-auto-complete placeholder="{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE-PLACHOLDER' | translate}}" [formControl]="description.get('templateId')" [configuration]="descriptionTemplateSingleAutocompleteConfiguration"></app-single-auto-complete>									
+						<app-single-auto-complete required="true" placeholder="{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE-PLACHOLDER' | translate}}" [formControl]="description.get('templateId')" [configuration]="descriptionTemplateSingleAutocompleteConfiguration"></app-single-auto-complete>									
 						<mat-error *ngIf="description.get('templateId').hasError('backendError')">{{description.get('templateId').getError('backendError').message}}</mat-error>
 						<mat-error *ngIf="description.get('templateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 					</mat-form-field>

dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.ts

@@ -6,9 +6,7 @@ import { DmpBlueprint, DmpBlueprintDefinitionSection } from '@app/core/model/dmp
 import { DmpBlueprintService } from '@app/core/services/dmp/dmp-blueprint.service';
 import { DmpService } from '@app/core/services/dmp/dmp.service';
 import { AnalyticsService } from '@app/core/services/matomo/analytics-service';
-import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { BaseComponent } from '@common/base/base.component';
-import { Observable } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { DmpImportRdaConfigEditorModel } from './dmp-common-model-config.editor.model';
 import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
@@ -18,6 +16,8 @@ import { DmpCommonModelConfig } from '@app/core/model/dmp/dmp-import';
 import { StorageFileService } from '@app/core/services/storage-file/storage-file.service';
 import { IsActive } from '@notification-service/core/enum/is-active.enum';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
+import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'dmp-upload-dialog',
@@ -54,6 +54,8 @@ export class DmpUploadDialogComponent extends BaseComponent {
 		public dmpBlueprintService: DmpBlueprintService,
 		private dmpService: DmpService,
 		private storageFileStorage: StorageFileService,
+		private uiNotificationService: UiNotificationService,
+		private language: TranslateService,
 
 		@Inject(MAT_DIALOG_DATA) public data: any,
 	) {
@@ -78,20 +80,27 @@ export class DmpUploadDialogComponent extends BaseComponent {
 		this.data.dmpTitle = this.dmpTitle;
 		this.data.dmpBlueprints = this.dmpBlueprints;
 
-		if (this.files.length > 0 && this.files[0].type.includes('/json') && this.formGroup && this.formGroup.valid){
+		if (this.files.length > 0 && this.files[0].type.includes('/json') && this.formGroup){
-			this.data.dmpCommonModelConfig = this.formService.getValue(this.formGroup.value) as DmpCommonModelConfig;
+			this.formService.removeAllBackEndErrors(this.formGroup);
-			this.data.dmpCommonModelConfig.file = this.files[0];
+			this.formService.touchAllFormFields(this.formGroup);
+			if (this.formGroup.valid){
+				this.data.dmpCommonModelConfig = this.formService.getValue(this.formGroup.value) as DmpCommonModelConfig;
+				this.data.dmpCommonModelConfig.file = this.files[0];
+			} else {
+				return;
+			}
 		}
 		this.dialogRef.close(this.data);
 	}
 
 	disableConfirmButton(){
 		if (this.data.fileList.length === 0 || this.files.length === 0) return true;
-		if (this.files.length > 0 && this.files[0].type.includes('/json') && this.formGroup && this.formGroup.invalid) return true;
+		if (this.files.length > 0 && this.files[0].type.includes('/json') && this.formGroup == null) return true;
 		return false;
 	}
 
 	uploadFile(event) {
+		this.formGroup = null;
 		const fileList: FileList = event.target.files
 		this.data.fileList = fileList;
 		if (this.data.fileList.length > 0) {
@@ -113,11 +122,13 @@ export class DmpUploadDialogComponent extends BaseComponent {
 						.subscribe(
 							(preprocessingData) => {
 								this.formGroup = new DmpImportRdaConfigEditorModel().fromModel(preprocessingData, storageFile[0].id,).buildForm();
-							}
+							},
+							(error) => this.onCallbackEror(error.error)
 						);
 					}
 					
-				}
+				},
+				(error) => this.onCallbackEror(error.error)
 			);
 			
 		}
@@ -138,6 +149,7 @@ export class DmpUploadDialogComponent extends BaseComponent {
 	onRemove(event) {
 		this.files.splice(0, 1);
 		this.dmpTitle = null;
+		this.formGroup = null;
 	}
 
 	selectedBlueprintChanged(item: DmpBlueprint): void{
@@ -153,4 +165,9 @@ export class DmpUploadDialogComponent extends BaseComponent {
 	hasFile(): boolean {
 		return this.files && this.files.length > 0;
 	}
+
+	private onCallbackEror(error: any) {
+		this.uiNotificationService.snackBarNotification(this.language.instant(error.error), SnackBarNotificationLevel.Error);
+		this.close();
+	}
 }

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

@@ -699,6 +699,7 @@
 	"DMP-UPLOAD": {
 		"TITLE": "Import Plan",
 		"UPLOAD-SUCCESS": "Import was Successful",
+		"ANALYZING-FILE": "Analyzing file",
 		"FIELDS": {
 			"BLUEPRINT-PLACEHOLDER": "Select Plan Blueprint",
 			"DESCRIPTION-TEMPLATE": "Description Template",