json import ui

dmp-frontend/src/app/core/services/dmp/dmp-blueprint.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { IsActive } from '@app/core/common/enum/is-active.enum';
-import { DmpBlueprint, DmpBlueprintDefinitionSection, DmpBlueprintPersist, NewVersionDmpBlueprintPersist } from '@app/core/model/dmp-blueprint/dmp-blueprint';
+import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, DmpBlueprintDefinitionSection, DmpBlueprintPersist, NewVersionDmpBlueprintPersist } from '@app/core/model/dmp-blueprint/dmp-blueprint';
 import { DmpBlueprintLookup } from '@app/core/query/dmp-blueprint.lookup';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
@@ -18,13 +18,15 @@ import { BaseHttpV2Service } from '../http/base-http-v2.service';
 import { DmpBlueprintStatus } from '@app/core/common/enum/dmp-blueprint-status';
 import { error } from 'console';
 import { DmpBlueprintVersionStatus } from '@app/core/common/enum/dmp-blueprint-version-status';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable()
 export class DmpBlueprintService {
 
 	private headers = new HttpHeaders();
 
-	constructor(private http: BaseHttpV2Service, private httpClient: HttpClient, private configurationService: ConfigurationService, private filterService: FilterService) {
+	constructor(private http: BaseHttpV2Service, private httpClient: HttpClient, private configurationService: ConfigurationService, private filterService: FilterService, private language: TranslateService,
+	) {
 	}
 
 	private get apiBase(): string { return `${this.configurationService.server}dmp-blueprint`; }
@@ -141,6 +143,41 @@ export class DmpBlueprintService {
 		return lookup;
 	}
 
+	// Finalized Blueprint with definitions Single AutoComplete 
+	singleAutocompleteBlueprintConfiguration: SingleAutoCompleteConfiguration = {
+		initialItems: (data?: any) => this.query(this.buildAutocompleteWithDefinitonLookup(null, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)),
+		filterFn: (searchQuery: string, data?: any) => this.query(this.buildAutocompleteWithDefinitonLookup(searchQuery, null, null, [DmpBlueprintStatus.Finalized])).pipe(map(x => x.items)),
+		getSelectedItem: (selectedItem: any) => this.query(this.buildAutocompleteWithDefinitonLookup(null, null, [selectedItem])).pipe(map(x => x.items[0])),
+		displayFn: (item: DmpBlueprint) => item.label,
+		subtitleFn: (item: DmpBlueprint) => this.language.instant('DMP-EDITOR.FIELDS.DMP-BLUEPRINT-VERSION') + ' '+ item.version,
+		titleFn: (item: DmpBlueprint) => item.label,
+		valueAssign: (item: DmpBlueprint) => item.id,
+	};
+
+	public buildAutocompleteWithDefinitonLookup(like?: string, excludedIds?: Guid[], ids?: Guid[], statuses?: DmpBlueprintStatus[]): DmpBlueprintLookup {
+		const lookup: DmpBlueprintLookup = new DmpBlueprintLookup();
+		lookup.page = { size: 100, offset: 0 };
+		if (excludedIds && excludedIds.length > 0) { lookup.excludedIds = excludedIds; }
+		if (ids && ids.length > 0) { lookup.ids = ids; }
+		lookup.isActive = [IsActive.Active];
+		lookup.statuses = statuses;
+		lookup.project = {
+			fields: [
+				nameof<DmpBlueprint>(x => x.id),
+				nameof<DmpBlueprint>(x => x.label),
+				nameof<DmpBlueprint>(x => x.version),
+				[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.id)].join('.'),
+				[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.label)].join('.'),
+				[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.hasTemplates)].join('.'),
+				[nameof<DmpBlueprint>(x => x.definition), nameof<DmpBlueprintDefinition>(x => x.sections), nameof<DmpBlueprintDefinitionSection>(x => x.descriptionTemplates), nameof<DescriptionTemplatesInSection>(x => x.descriptionTemplateGroupId)].join('.'),
+			]
+		};
+		lookup.order = { items: [nameof<DmpBlueprint>(x => x.label)] };
+		lookup.versionStatuses = [DmpBlueprintVersionStatus.Previous, DmpBlueprintVersionStatus.Current];
+		if (like) { lookup.like = this.filterService.transformLike(like); }
+		return lookup;
+	}
+
 	//
 	//
 	// UI Helpers

dmp-frontend/src/app/core/services/dmp/dmp.service.ts

@@ -20,6 +20,7 @@ import { AuthService } from '../auth/auth.service';
 import { ConfigurationService } from '../configuration/configuration.service';
 import { BaseHttpV2Service } from '../http/base-http-v2.service';
 import { DmpValidationResult } from '@app/ui/dmp/dmp-finalize-dialog/dmp-finalize-dialog.component';
+import { DmpCommonModelConfig, PreprocessingDmpModel } from '@app/core/model/dmp/dmp-import';
 
 @Injectable()
 export class DmpService {
@@ -197,26 +198,25 @@ export class DmpService {
 			catchError((error: any) => throwError(error)));;
 	}
 
-	uploadJson(file: File, label: string, repositoryId: string, format: string, reqFields: string[] = []): Observable<Dmp> {
+	preprocessingDmp(fileId: Guid, repositoryId: string): Observable<PreprocessingDmpModel> {
-		const url = `${this.apiBase}/json/import`;
+		const url = `${this.apiBase}/json/preprocessing`;
 		const params = new BaseHttpParams();
 
 		params.interceptorContext = {
 			excludedInterceptors: [InterceptorType.JSONContentType]
 		};
 		const formData = new FormData();
-		formData.append('file', file);
+		formData.append('fileId', fileId.toString());
-		formData.append('label', label);
 		formData.append('repositoryId', repositoryId);
-		formData.append('format', format);
-
-		if (reqFields.length > 0){
-			for (var i = 0; i < reqFields.length; i++) {
-				formData.append('field[]', reqFields[i]);
-			}
-		}
 		
-		return this.http.post<Dmp>(url, formData, { params: params }).pipe(catchError((error: any) => throwError(error)));
+		return this.http.post<PreprocessingDmpModel>(url, formData, { params: params }).pipe(catchError((error: any) => throwError(error)));
+	}
+
+	uploadJson(item: DmpCommonModelConfig, reqFields: string[] = []): Observable<Dmp> {
+		const url = `${this.apiBase}/json/import`;
+
+		return this.http.post<Dmp>(url, item).pipe(catchError((error: any) => throwError(error)));
+
 	}
 
 	//

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

@@ -79,8 +79,8 @@ export class StartNewDmpDialogComponent extends BaseComponent {
 							},
 							(error) => this.onCallbackImportFail(error.error)
 						);
-				} else if (file?.type.includes('/json')){
+				} else if (file?.type.includes('/json') && result.dmpCommonModelConfig){
-					this.dmpService.uploadJson(result.fileList[0], result.dmpTitle, 'rda-file-transformer', 'json')
+					this.dmpService.uploadJson(result.dmpCommonModelConfig)	
 						.pipe(takeUntil(this._destroyed))
 						.subscribe(
 							(complete) => {

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

@@ -9,8 +9,8 @@
 	</div>
 	<div class="">
 		<div class="upload-form col-12 pr-0 pl-0">
-			<mat-form-field class="w-100">
+			<mat-form-field class="w-100" *ngIf="files?.length == 0 || files[0].type.includes('/xml')">
-				<input class="uploadInput" [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}" name="uploadFileInput">
+				<input [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
 			</mat-form-field>
 		</div>
 		<div class="col-12 pr-0 pl-0">
@@ -30,14 +30,38 @@
 				<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-sm-12 col-md-12">
+		<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')">
-			<mat-form-field>
+			<mat-form-field class="w-100">
-				<mat-label>{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}</mat-label>
+				<input [formControl]="formGroup.get('label')" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
-				<app-multiple-auto-complete [(ngModel)]="dmpBlueprints" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
-				<app-multiple-auto-complete required='true' [(ngModel)]="dmpBlueprints" placeholder="{{'DMP-EDITOR.FIELDS.DATASET-TEMPLATES' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionActionClicked)="onPreviewTemplate($event)">
-				</app-multiple-auto-complete>
 			</mat-form-field>
-		</div> -->
+			<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">
+					<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>									
+						<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>
+					<mat-form-field class="w-100">
+						<mat-label>{{'DMP-UPLOAD.FIELDS.SECTION' | translate}}</mat-label>
+						<mat-select [formControl]="description.get('sectionId')" placeholder="{{'DMP-UPLOAD.FIELDS.SECTION-PLACEHOLDER' | translate}}">			
+							<mat-option *ngFor="let section of selectedBlueprintSections" [value]="section.id">
+								<span style="font-size: 1rem;">
+									{{ section.label }}
+								</span>
+							</mat-option>
+						</mat-select>						
+					</mat-form-field>
+				</div>
+			</ng-container>
+		</div>
 	</div>
 	<div class="d-flex justify-content-between">
 		<div></div>
@@ -46,7 +70,7 @@
 				<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
 			</div>
 			<div class="col-auto">
-				<button mat-button type="button" (click)="confirm()" [disabled]="data.fileList.length === 0 || files.length === 0" class="next-btn">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
+				<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="next-btn">{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
 			</div>
 		</div>
 	</div>

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

@@ -2,12 +2,22 @@ import { HttpClient } from '@angular/common/http';
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
+import { DmpBlueprint, DmpBlueprintDefinitionSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
+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 } from 'rxjs/operators';
+import { map, takeUntil } from 'rxjs/operators';
+import { DmpImportRdaConfigEditorModel } from './dmp-common-model-config.editor.model';
+import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
+import { DescriptionTemplateService } from '@app/core/services/description-template/description-template.service';
+import { FormService } from '@common/forms/form-service';
+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';
 
 @Component({
 	selector: 'dmp-upload-dialog',
@@ -18,13 +28,17 @@ export class DmpUploadDialogComponent extends BaseComponent {
 	dmpTitle: string;
 	dmpBlueprints: any[] = [];
 	files: File[] = [];
+	selectedBlueprintSections: DmpBlueprintDefinitionSection[];
+	formGroup: UntypedFormGroup;
 
-	profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
+	descriptionTemplateSingleAutocompleteConfiguration: SingleAutoCompleteConfiguration = {
-		filterFn: this.filterProfiles.bind(this),
+		initialItems: (data?: any) => this.descriptionTemplateService.query(this.descriptionTemplateService.buildDescriptionTempalteGroupAutocompleteLookup([IsActive.Active])).pipe(map(x => x.items)),
-		initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
+		filterFn: (searchQuery: string, data?: any) => this.descriptionTemplateService.query(this.descriptionTemplateService.buildDescriptionTempalteGroupAutocompleteLookup([IsActive.Active], searchQuery)).pipe(map(x => x.items)),
-		displayFn: (item) => item['label'],
+		getSelectedItem: (selectedItem: any) => this.descriptionTemplateService.query(this.descriptionTemplateService.buildDescriptionTempalteGroupAutocompleteLookup([IsActive.Active, IsActive.Inactive], null, null, [selectedItem])).pipe(map(x => x.items[0])),
-		titleFn: (item) => item['label'],
+		displayFn: (item: DescriptionTemplate) => item.label,
-		subtitleFn: (item) => item['description'],
+		titleFn: (item: DescriptionTemplate) => item.label,
+		subtitleFn: (item: DescriptionTemplate) => item.description,
+		valueAssign: (item: DescriptionTemplate) => item.id,
 		popupItemActionIcon: 'visibility'
 	};
 
@@ -35,6 +49,11 @@ export class DmpUploadDialogComponent extends BaseComponent {
 		private dialog: MatDialog,
 		private httpClient: HttpClient,
 		private analyticsService: AnalyticsService,
+		private formService: FormService,
+		public descriptionTemplateService: DescriptionTemplateService,
+		public dmpBlueprintService: DmpBlueprintService,
+		private dmpService: DmpService,
+		private storageFileStorage: StorageFileService,
 
 		@Inject(MAT_DIALOG_DATA) public data: any,
 	) {
@@ -58,9 +77,20 @@ export class DmpUploadDialogComponent extends BaseComponent {
 		this.data.success = true;
 		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){
+			this.data.dmpCommonModelConfig = this.formService.getValue(this.formGroup.value) as DmpCommonModelConfig;
+			this.data.dmpCommonModelConfig.file = this.files[0];
+		}
 		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;
+		return false;
+	}
+
 	uploadFile(event) {
 		const fileList: FileList = event.target.files
 		this.data.fileList = fileList;
@@ -71,6 +101,26 @@ export class DmpUploadDialogComponent extends BaseComponent {
 			this.files.splice(0, 1);
 		}
 		this.files.push(...event.target.files);
+
+		if (this.files.length > 0 && this.files[0].type.includes('/json')){
+			this.storageFileStorage.uploadTempFiles(fileList[0])
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(
+				(storageFile) => {
+					if (storageFile.length >0 ){
+						this.dmpService.preprocessingDmp(storageFile[0].id, 'rda-file-transformer')
+						.pipe(takeUntil(this._destroyed))
+						.subscribe(
+							(preprocessingData) => {
+								this.formGroup = new DmpImportRdaConfigEditorModel().fromModel(preprocessingData, storageFile[0].id,).buildForm();
+							}
+						);
+					}
+					
+				}
+			);
+			
+		}
 	}
 
 	selectFile(event) {
@@ -90,14 +140,14 @@ export class DmpUploadDialogComponent extends BaseComponent {
 		this.dmpTitle = null;
 	}
 
-	filterProfiles(value: string): Observable<DescriptionTemplate[]> {
+	selectedBlueprintChanged(item: DmpBlueprint): void{
-		// TODO refactor
+		this.selectedBlueprintSections = item.definition?.sections?.filter(x => x.hasTemplates) || null;
-		// const request = new DataTableRequest<DatasetProfileCriteria>(null, null, { fields: ['+label'] });
+		if (this.formGroup){
-		// const criteria = new DatasetProfileCriteria();
+			const descriptionsFormArray = this.formGroup.get('descriptions') as UntypedFormArray;
-		// criteria.like = value;
+			descriptionsFormArray.controls.forEach( control =>{
-		// request.criteria = criteria;
+				control.get('sectionId').patchValue(null);
-		// return this._service.searchDmpBlueprints(request);
+			})
-		return null;
+		}
 	}
 
 	hasFile(): boolean {

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

@@ -4,12 +4,16 @@ import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { NgxDropzoneModule } from 'ngx-dropzone';
 import { DmpUploadDialogComponent } from './dmp-upload-dialog.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
 
 @NgModule({
 	imports: [
 		CommonUiModule,
 		CommonFormsModule,
 		FormattingModule,
+		ReactiveFormsModule, 
+		AutoCompleteModule,
 		NgxDropzoneModule
 	],
 	declarations: [

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

@@ -699,6 +699,13 @@
 	"DMP-UPLOAD": {
 		"TITLE": "Import Plan",
 		"UPLOAD-SUCCESS": "Import was Successful",
+		"FIELDS": {
+			"BLUEPRINT-PLACEHOLDER": "Select Plan Blueprint",
+			"DESCRIPTION-TEMPLATE": "Description Template",
+			"DESCRIPTION-TEMPLATE-PLACHOLDER": "Select description template",
+			"SECTION": "Plan Section",
+			"SECTION-PLACEHOLDER": "Select plan section"
+		},
 		"ACTIONS": {
 			"IMPORT": "Import",
 			"CANCEL": "Cancel"