Merge branch 'ui-redesign' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-redesign

dmp-backend/elastic/src/main/java/eu/eudat/elastic/entities/Tag.java

@@ -13,6 +13,14 @@ public class Tag implements ElasticEntity {
     private String id;
     private String name;
 
+    public Tag() {
+    }
+
+    public Tag(String id, String name) {
+        this.id = id;
+        this.name = name;
+    }
+
     public String getId() {
         return id;
     }

dmp-backend/web/src/main/java/eu/eudat/logic/managers/DataManagementPlanManager.java

@@ -220,7 +220,11 @@ public class DataManagementPlanManager {
         datasetEnities.stream()
                       .filter(dataset -> !dataset.getStatus().equals(Dataset.Status.DELETED) && !dataset.getStatus().equals(Dataset.Status.CANCELED))
                       .forEach(dataset -> {
-                          dataManagementPlan.getDatasets().stream().filter(datasetWizardModel -> datasetWizardModel.getId().equals(dataset.getId())).forEach(datasetWizardModel -> datasetWizardModel.setDatasetProfileDefinition(datasetManager.getPagedProfile(datasetWizardModel, dataset)));
+                          dataManagementPlan.getDatasets().stream().filter(datasetWizardModel -> datasetWizardModel.getId().equals(dataset.getId())).forEach(datasetWizardModel -> {
+                              DatasetWizardModel wizardModel = datasetManager.getSingle(datasetWizardModel.getId().toString(), principal);
+                              datasetWizardModel.setDatasetProfileDefinition(wizardModel.getDatasetProfileDefinition());
+                              datasetWizardModel.setTags(wizardModel.getTags());
+                          });
                       });
         if (isPublic) {
             dataManagementPlan.setDatasets(dataManagementPlan.getDatasets().stream().filter(dataset -> dataset.getStatus() == Dataset.Status.FINALISED.getValue()).collect(Collectors.toList()));

dmp-backend/web/src/main/java/eu/eudat/logic/mapper/elastic/DatasetMapper.java

@@ -37,6 +37,9 @@ public class DatasetMapper {
 				tags.forEach(tag -> tag.setId(UUID.randomUUID().toString()));
 				elastic.setTags(tags);
 			} else {
+				if (tags1.size() < tags.size()) {
+					tags.stream().filter(tag -> tag.getId() == null || tag.getId().equals("")).forEach(tag -> tags1.add(new Tag(UUID.randomUUID().toString(), tag.getName())));
+				}
 				elastic.setTags(tags1);
 			}
 		}

dmp-backend/web/src/main/java/eu/eudat/logic/proxy/fetching/RemoteFetcher.java

@@ -278,11 +278,28 @@ public class RemoteFetcher {
                                 + "," + jsonDataPath.getFieldsUrlConfiguration().getId() + "]"),
                                 new HashMap<>(1, 1));
                         List<Map<String, String>> fixedResults = results.getResults().stream().map(item -> {
-                            String id = jsonDataPath.getFieldsUrlConfiguration().getId().replace("'", "");
+                            for (int i = 0; i < 2; i++) {
-                            if (! (item.get(id) instanceof String)) {
+                                String id;
+                                if (i == 0) {
+                                    id = jsonDataPath.getFieldsUrlConfiguration().getId().replace("'", "");
+                                } else {
+                                    id = jsonDataPath.getFieldsUrlConfiguration().getName().replace("'", "");
+                                }
+                                if (!(item.get(id) instanceof String)) {
                                     Object obj = item.get(id);
+                                    if (obj instanceof JSONArray) {
                                         JSONArray jarr = (JSONArray) obj;
+                                        if (jarr.get(0) instanceof String) {
                                             item.put(id, jarr.get(0).toString());
+                                        } else {
+                                            for (int j = 0; j < jarr.size(); j++) {
+                                                mapToMap(id, (Map<String, String>)jarr.get(j), item, i == 1);
+                                            }
+                                        }
+                                    } else {
+                                        mapToMap(id, (Map<String, String>)obj, item, i == 1);
+                                    }
+                                }
                             }
                             return item;
                         }).collect(Collectors.toList());
@@ -472,4 +489,16 @@ public class RemoteFetcher {
             this.pagination = pagination;
         }
     }
+
+    private void mapToMap(String key, Map<String, String> source, Map<String, String> destination, boolean isTitle) {
+        String content = source.get("content");
+        if (isTitle) {
+            String classId = source.get("classid");
+            if (classId.equals("main title")) {
+                destination.put(key, content);
+            }
+        } else {
+            destination.put(key, content);
+        }
+    }
 }

dmp-backend/web/src/main/java/eu/eudat/models/data/external/ResearchersExternalSourcesModel.java

@@ -11,7 +11,13 @@ public class ResearchersExternalSourcesModel extends ExternalListingItem<Researc
             ExternalSourcesItemModel model = new ExternalSourcesItemModel();
             model.setRemoteId(item.get("pid"));
             model.setUri(item.get("uri"));
+            switch (item.get("tag")) {
+                case "ORCID":
+                    model.setName(item.get("name") + " (orcid:" + item.get("pid") + ")");
+                    break;
+                default:
                     model.setName(item.get("name"));
+            }
             model.setTag(item.get("tag"));
             model.setKey(item.get("key"));
             this.add(model);

dmp-backend/web/src/main/resources/externalUrls/ExternalUrls.xml

@@ -897,6 +897,24 @@
                 </data>
                 <paginationpath>$['meta']['pagination']['page','pages','count']</paginationpath>
             </urlConfig>
+            <urlConfig>
+                <key>openaire</key>
+                <label>OpenAIRE</label>
+                <ordinal>2</ordinal>
+                <type>External</type>
+                <url>https://services.openaire.eu/search/v2/api/datasets/?q={like}&amp;page={page}&amp;size={pageSize}&amp;format=json</url>
+                <firstPage>0</firstPage>
+                <contenttype>application/json; charset=utf-8</contenttype>
+                <data>
+                    <path>$['results'][*]['result']['metadata']['oaf:entity']['oaf:result']</path>
+                    <fields>
+                        <id>'originalId'</id>
+                        <name>'title'</name>
+                        <count>'count'</count>
+                    </fields>
+                </data>
+                <paginationpath>$['meta']['pagination']['page','pages','count']</paginationpath>
+            </urlConfig>
 <!--            <urlConfig>
                 <key>openAire</key>
                 <label>OpenAIRE</label>

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

@@ -61,7 +61,7 @@ export class DatasetWizardEditorModel {
 			description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators],
 			dmp: [{ value: this.dmp, disabled: disabled }, context.getValidation('dmp').validators],
 			//externalDatasets: [{ value: this.externalDatasets, disabled: disabled }, context.getValidation('externalDatasets').validators],
-			// tags: [{ value: this.tags, disabled: disabled }, context.getValidation('tags').validators],
+			tags: [{ value: this.tags, disabled: disabled }, context.getValidation('tags').validators],
 			//registries: [{ value: this.registries, disabled: disabled }, context.getValidation('registries').validators],
 			//dataRepositories: [{ value: this.dataRepositories, disabled: disabled }, context.getValidation('dataRepositories').validators],
 			//services: [{ value: this.services, disabled: disabled }, context.getValidation('services').validators],
@@ -119,11 +119,11 @@ export class DatasetWizardEditorModel {
 		// }
 		formGroup.addControl('services', formBuilder.array(servicesFormArray));
 
-		const tagsFormArray = new Array<FormGroup>();
+		// const tagsFormArray = new Array<FormGroup>();
-		this.tags.forEach(item => {
+		// this.tags.forEach(item => {
-			tagsFormArray.push(item.buildForm(context.getValidation('tags').descendantValidations, disabled));
+		// 	tagsFormArray.push(item.buildForm(context.getValidation('tags').descendantValidations, disabled));
-		});
+		// });
-		formGroup.addControl('tags', formBuilder.array(tagsFormArray));
+		// formGroup.addControl('tags', formBuilder.array(tagsFormArray));
 
 		if (this.datasetProfileDefinition) { formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinition.buildForm()); }
 		// formGroup.addControl('profile', this.profile.buildForm());

dmp-frontend/src/app/ui/dataset/dataset-wizard/external-references/dataset-external-references-editor.component.html

@@ -6,37 +6,14 @@
 				<h4 class="col-auto heading">1.4 {{'DATASET-EDITOR.FIELDS.TAGS' | translate}}</h4>
 			</div>
 		</div>
-		<app-external-item-listing *ngIf="formGroup.get('tags') && tagsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.tags" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}" [parentTemplate]='tagsTemplate' [formArray]="formGroup.get('tags')" [autoCompleteConfiguration]="tagsAutoCompleteConfiguration" (onItemChange)="tagsOnItemChange($event)">
+		<div class="tags-form">
-		</app-external-item-listing>
-		<!-- <div class="tags-form">
 			<mat-form-field appearance="outline">
-				<mat-chip-list #chipList [disabled]="viewOnly">
+				<app-multiple-auto-complete [configuration]="tagsAutoCompleteConfiguration" [formControl]="formGroup.get('tags')" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"></app-multiple-auto-complete>
-					<mat-chip *ngFor="let tag of formGroup.get('tags').value" [removable]="true" (removed)="removeTag(tag)">
-						{{tag.name}}
-						<mat-icon matChipRemove *ngIf="!viewOnly">cancel</mat-icon>
-					</mat-chip>
-					<input matInput [disabled]="viewOnly" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addTag($event)">
-				</mat-chip-list>
 			</mat-form-field>
-		</div> -->
-
-		<ng-template #tagsTemplate let-suggestion let-i="index" let-callback="function">
-			<div class="col-12 row align-items-center">
-				<div class="col">
-					<p>
-						{{i+1}}) {{suggestion.get('name').value}}
-					</p>
 		</div>
-				<div class="col-auto">
-					<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
-						<mat-icon>close</mat-icon>
-					</button>
-				</div>
-			</div>
-		</ng-template>
 	</div>
 	<!-- Data Repositories -->
-	<div class="pt-2">
+	<!-- <div class="pt-2">
 		<div class="row">
 			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
 				<h4 class="col-auto heading">1.5 {{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}</h4>
@@ -87,9 +64,9 @@
 				</div>
 			</div>
 		</ng-template>
-	</div>
+	</div> -->
 	<!-- External Datasets -->
-	<div class="pt-2">
+	<!-- <div class="pt-2">
 		<div class="row">
 			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
 				<h4 class="col-auto heading">1.6 {{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}</h4>
@@ -150,9 +127,9 @@
 				</div>
 			</div>
 		</ng-template>
-	</div>
+	</div> -->
 	<!-- Registries -->
-	<div class="pt-2">
+	<!-- <div class="pt-2">
 		<div class="row">
 			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
 				<h4 class="col-auto heading">1.7 {{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}</h4>
@@ -200,9 +177,9 @@
 				</div>
 			</div>
 		</ng-template>
-	</div>
+	</div> -->
 	<!-- Services -->
-	<div class="pt-2">
+	<!-- <div class="pt-2">
 		<div class="row">
 			<div class="col-12 pl-0 pr-0 pb-2 d-flex flex-row">
 				<h4 class="col-auto heading">1.8 {{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}</h4>
@@ -251,7 +228,7 @@
 				</div>
 			</div>
 		</ng-template>
-	</div>
+	</div> -->
 </form>
 
 <!-- <form *ngIf="formGroup" [formGroup]="formGroup" class="dataset-external-references-editor">

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

@@ -21,7 +21,7 @@ import { DatasetExternalServiceDialogEditorComponent } from '@app/ui/dataset/dat
 import { BaseComponent } from '@common/base/base.component';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, map } from 'rxjs/operators';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { isNullOrUndefined } from 'util';
@@ -29,6 +29,7 @@ import { ExternalDataRepositoryService } from '@app/core/services/external-sourc
 import { ExternalDatasetService } from '@app/core/services/external-sources/dataset/external-dataset.service';
 import { ExternalRegistryService } from '@app/core/services/external-sources/registry/external-registry.service';
 import { ExternalServiceService } from '@app/core/services/external-sources/service/external-service.service';
+import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 
 @Component({
 	selector: 'app-dataset-external-references-editor-component',
@@ -41,6 +42,9 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
 	@Input() viewOnly = false;
 	@Output() formChanged: EventEmitter<any> = new EventEmitter();
 
+	public filteringTagsAsync = false;
+	public filteredTags: ExternalSourceItemModel[];
+
 	readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
 	externalDatasetAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
@@ -75,12 +79,12 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
 		subtitleFn: (item) => item.source ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.source : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')
 	};
 
-	tagsAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
+	tagsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
-		filterFn: this.searchDatasetTags.bind(this),
+		filterFn: this.filterTags.bind(this),
-		initialItems: (type) => this.searchDatasetTags('', type),
+		initialItems: (excludedItems: any[]) => this.filterTags('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
-		displayFn: (item) => item ? item.name : null,
+		displayFn: (item) => this.showTag(item),
-		titleFn: (item) => item ? item.name : null,
+		titleFn: (item) => item['name'],
-		subtitleFn: (item) => item.tag ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item.tag : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')
+		valueAssign: (item) => this.addTag(item)
 	};
 
 	externalSourcesConfiguration: ExternalSourcesConfiguration;
@@ -257,11 +261,17 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
 		(<FormArray>this.formGroup.get('tags')).removeAt(((<FormArray>this.formGroup.get('tags')).value as any[]).indexOf(tag));
 	}
 
-	addTag(ev: MatChipInputEvent) {
+	addTag(ev: any) {
-		if (ev.value !== '' && isNullOrUndefined(((<FormArray>this.formGroup.get('tags')).value as ExternalTagEditorModel[]).find(tag => tag.name === ev.value))) {
+		let item: ExternalTagEditorModel;
-			(<FormArray>this.formGroup.get('tags')).push(new ExternalTagEditorModel('', ev.value).buildForm());
+		//this.filteredTags = this.formGroup.get('tags').value;
+		if (typeof ev === 'string') {
+			item = new ExternalTagEditorModel('', ev);
+		} else {
+			item = ev;
+		}
+		if (item.name !== '' ) {
+			return item;
 		}
-		ev.input.value = '';
 	}
 
 	isInternal(element: any): boolean {
@@ -310,4 +320,22 @@ export class DatasetExternalReferencesEditorComponent extends BaseComponent impl
 				}
 			);
 	}
+
+	filterTags(value: string): Observable<ExternalSourceItemModel[]> {
+		this.filteringTagsAsync = true;
+
+		const requestItem: RequestItem<TagCriteria> = new RequestItem();
+		const criteria: TagCriteria = new TagCriteria();
+		criteria.like = value;
+		requestItem.criteria = criteria;
+		return this.externalSourcesService.searchDatasetTags(requestItem);
+	}
+
+	showTag(ev: any) {
+		if (typeof ev === 'string') {
+			return ev;
+		} else {
+			return ev.name;
+		}
+	}
 }

dmp-frontend/src/app/ui/dmp/dmp.module.ts

@@ -42,6 +42,7 @@ import { DatasetInfoComponent } from './editor/dataset-info/dataset-info.compone
 import { DatasetEditorDetailsModule } from './editor/dataset-editor-details/dataset-editor-details.module';
 import { DatasetEditorDetailsComponent } from './editor/dataset-editor-details/dataset-editor-details.component';
 import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/dataset-description-form.module';
+import { LicenseInfoComponent } from './editor/license-info/license-info.component';
 
 @NgModule({
 	imports: [
@@ -88,7 +89,8 @@ import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/d
 		StartNewDmpDialogComponent,
 		MainInfoComponent,
 		FundingInfoComponent,
-		DatasetInfoComponent
+		DatasetInfoComponent,
+		LicenseInfoComponent
 	],
 	entryComponents: [
 		DmpInvitationDialogComponent,

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

@@ -81,6 +81,8 @@
 
 							<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
 
+							<li *ngIf="!isNewDataset" (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
+
 							<li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
 								<div class="d-flex flex-direction-row">
 									<div class="label">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
@@ -126,6 +128,8 @@
 					<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
 					<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
 
+					<license-info [hidden]="this.step !== 3" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
+
 					<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
 						<dataset-editor-details [formGroup]="dataset" [isNewDataset]="isNewDataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
 					</div>

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

@@ -92,8 +92,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
 
 	selectedTab = 0;
 	step: number = 0;
-	stepsBeforeDatasets: number = 3;
+	stepsBeforeDatasets: number = 4;
-	maxStep: number = 3;
+	maxStep: number = 4;
 
 	constructor(
 		private dmpProfileService: DmpProfileService,

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

@@ -0,0 +1,113 @@
+<div class="main-info" [formGroup]="formGroup">
+	<div class="col-12 intro">
+		{{'DMP-EDITOR.LICENSE-INFO.INTRO' | translate}}
+	</div>
+	<div class="col-12 card">
+		<!-- Title Field -->
+		<div class="row">
+			<div class="col-12">
+				<div class="heading">4.1 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div>
+				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
+				<div class="title-form">
+					<mat-form-field *ngIf="!isNewDataset">
+						<mat-select [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}">
+							<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
+								{{ lang.name }}
+							</mat-option>
+						</mat-select>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('language').hasError('backendError')">
+							{{formGroup.get('extraProperties').get('language').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('language').hasError('required')">
+							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<!-- Description field -->
+		<div class="row" *ngIf="!isNewDataset">
+			<div class="col-12">
+				<div class="heading">4.2 {{'DMP-EDITOR.FIELDS.LICENSE' | translate}}</div>
+				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
+				<div class="description-form">
+					<mat-form-field>
+						<app-single-auto-complete [formControl]="formGroup.get('extraProperties').get('license')" placeholder="{{'DMP-EDITOR.FIELDS.LICENSE' | translate}}" [configuration]="licenseAutoCompleteConfiguration">
+						</app-single-auto-complete>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('license').hasError('backendError')">
+							{{formGroup.get('extraProperties').get('license').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('license').hasError('required')">
+							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<!-- Researchers field-->
+		<div class="row" *ngIf="!isNewDataset">
+			<div class="col-12">
+				<div class="heading">4.3 {{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}</div>
+				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
+				<div class="author-form">
+					<mat-form-field>
+						<mat-select [formControl]="formGroup.get('extraProperties').get('visible')" placeholder="{{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}">
+							<mat-option *ngFor="let vis of visibles" [value]="vis.value">
+								{{vis.name | translate}}
+							</mat-option>
+						</mat-select>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('visible').hasError('backendError')">
+							{{formGroup.get('extraProperties').get('visible').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('visible').hasError('required')">
+							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<!-- Organizations Field -->
+		<div class="row" *ngIf="!isNewDataset && formGroup.get('extraProperties').get('visible').value">
+			<div class="col-12">
+				<div class="heading">4.4 {{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}</div>
+				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
+				<div class="organizations-form">
+					<mat-form-field>
+						<input matInput [matDatepicker]="picker" [formControl]="formGroup.get('extraProperties').get('publicDate')" placeholder="{{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}">
+  					<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  					<mat-datepicker #picker></mat-datepicker>
+					<mat-error *ngIf="formGroup.get('extraProperties').get('publicDate').hasError('backendError')">
+						{{formGroup.get('extraProperties').get('publicDate').getError('backendError').message}}</mat-error>
+					<mat-error *ngIf="formGroup.get('extraProperties').get('publicDate').hasError('required')">
+						{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<div class="row" *ngIf="!isNewDataset">
+			<div class="col-12">
+				<div class="heading">4.5 {{'DMP-EDITOR.FIELDS.CONTACT' | translate}}</div>
+				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
+				<div class="organizations-form">
+					<mat-form-field>
+						<mat-select [formControl]="formGroup.get('extraProperties').get('contact')" placeholder="{{'DMP-EDITOR.FIELDS.CONTACT' | translate}}">
+							<mat-option *ngFor="let vis of getAssociates()" [value]="vis.id">
+								{{vis.name | translate}}
+							</mat-option>
+						</mat-select>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('contact').hasError('backendError')">
+							{{formGroup.get('extraProperties').get('contact').getError('backendError').message}}</mat-error>
+						<mat-error *ngIf="formGroup.get('extraProperties').get('contact').hasError('required')">
+							{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</div>
+		<div class="row" *ngIf="!isNewDataset">
+			<div class="col-12">
+				<div class="heading">4.6 {{'DMP-EDITOR.FIELDS.COST' | translate}}</div>
+				<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
+				<div class="organizations-form">
+					<app-cost-listing [form] = "formGroup.get('extraProperties').get('costs')"></app-cost-listing>
+					<button class="input-btn cost-add" matSuffix class="input-btn" type="button" (click)="addCost($event)">
+						<mat-icon class="icon-btn">add_circle</mat-icon>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

dmp-frontend/src/app/ui/dmp/editor/license-info/license-info.component.scss

@@ -0,0 +1,105 @@
+.main-info {
+  //   position: relative;
+  //   left: 362px;
+  //   width: calc(100% - 366px);
+
+  .intro {
+    text-align: left;
+    font-weight: 400;
+    letter-spacing: 0px;
+    color: #212121;
+    opacity: 1;
+    margin: 3rem 0rem 3rem 0rem;
+  }
+
+  .heading {
+    text-align: left;
+    font-weight: 700;
+    font-size: 18px;
+    letter-spacing: 0px;
+    color: #212121;
+    opacity: 0.81;
+    margin-top: 1.625rem;
+    margin-bottom: 0.625rem;
+  }
+
+  .hint {
+    text-align: left;
+    font-weight: 400;
+    font-size: 16px;
+    letter-spacing: 0px;
+    color: #212121;
+    opacity: 0.81;
+    margin-bottom: 2.125rem;
+  }
+
+  .title-form,
+  .description-form {
+    text-align: left;
+    font-weight: 400;
+    font-size: 16px;
+    letter-spacing: 0.15px;
+    color: #7d7d7d;
+    opacity: 1;
+    margin-bottom: 1rem;
+  }
+
+  //   textarea::placeholder {
+  //     font-style: oblique;
+  //   }
+
+  .input-btn {
+    border: none;
+    color: #aaaaaa;
+    background-color: #ffffff00;
+    cursor: pointer;
+  }
+
+  .input-btn :hover {
+    color: #00b29f !important;
+  }
+}
+
+::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-outline {
+  background: #fafafa !important;
+}
+
+::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+::ng-deep .organizations-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+::ng-deep .author-form .mat-form-field-appearance-outline .mat-form-field-infix {
+  font-size: 1rem;
+  padding: 0.6em 0 1em 0 !important;
+}
+
+.cost-placeholder {
+	text-decoration: underline;
+}
+
+.cost-add {
+	margin-top: 1em;
+}

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

@@ -0,0 +1,115 @@
+import { BaseComponent } from '@common/base/base.component';
+import { OnInit, Component, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormControl, FormArray } from '@angular/forms';
+import { map, takeUntil } from 'rxjs/operators';
+import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
+import { Observable } from 'rxjs';
+import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
+import { isNullOrUndefined } from 'util';
+import { MatDialog } from '@angular/material';
+import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
+import { LanguageInfo } from '@app/core/model/language-info';
+import { LanguageInfoService } from '@app/core/services/culture/language-info-service';
+import { RequestItem } from '@app/core/query/request-item';
+import { LicenseCriteria } from '@app/core/query/license/license-criteria';
+import { AddCostComponent } from '../cost-editor/add-cost/add-cost.component';
+import { CostEditorModel } from '../cost-editor/add-cost/add-cost.model';
+
+interface Visible {
+	value: boolean;
+	name: string;
+}
+
+@Component({
+	selector: 'license-info',
+	templateUrl: './license-info.component.html',
+	styleUrls: ['./license-info.component.scss']
+})
+export class LicenseInfoComponent extends BaseComponent implements OnInit {
+
+	@Input() formGroup: FormGroup = null;
+	// @Input() datasetFormGroup: FormGroup;
+	@Input() isNewVersion: boolean;
+	@Input() isNewDataset: boolean;
+	@Input() isUserOwner: boolean;
+	@Input() isClone: boolean;
+	@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
+
+	visibles: Visible[] = [
+		{ value: true, name: 'DMP-EDITOR.VISIBILITY.PUBLIC' },
+		{ value: false, name: 'DMP-EDITOR.VISIBILITY.RESTRICTED' }
+	]
+
+	public formControl = new FormControl();
+
+	licenseAutoCompleteConfiguration: SingleAutoCompleteConfiguration = {
+		filterFn: this.licenseSearch.bind(this),
+		initialItems: (excludedItems: any[]) => this.licenseSearch('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
+		displayFn: (item) => item['name'],
+		titleFn: (item) => item['name']
+	};
+
+	constructor(
+		private externalSourcesService: ExternalSourcesService,
+		private dialog: MatDialog,
+		private languageInfoService: LanguageInfoService
+	) {
+		super();
+	}
+
+	ngOnInit() {
+		// if (this.formGroup.get('definition')) { this.selectedDmpProfileDefinition = this.formGroup.get('definition').value; }
+		// this.registerFormEventsForDmpProfile();
+
+		if (this.isNewVersion) {
+			this.formGroup.get('label').disable();
+		}
+
+		if (!this.isUserOwner && !this.isClone) {
+			this.formGroup.disable();
+		}
+		if (isNullOrUndefined(this.formGroup.get('extraProperties').get('publicDate').value)) {
+			this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date());
+		}
+
+		this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
+			.subscribe(x => {
+				this.onFormChanged.emit();
+			});
+	}
+
+	getLanguageInfos(): LanguageInfo[] {
+		return this.languageInfoService.getLanguageInfoValues();
+	}
+
+	licenseSearch(query: string): Observable<ExternalSourceItemModel[]> {
+		const request = new RequestItem<LicenseCriteria>();
+		request.criteria = new LicenseCriteria();
+		request.criteria.like = query;
+		request.criteria.type = '';
+		return this.externalSourcesService.searchLicense(request);
+	}
+
+	getAssociates(): any[] {
+		let associates: any[] = [];
+		//associates = (this.formGroup.get('researchers').value as any[]);
+		associates = associates.concat(this.formGroup.get('associatedUsers').value);
+		return associates;
+	}
+
+	addCost(event: MouseEvent) {
+		event.stopPropagation();
+		const dialogRef = this.dialog.open(AddCostComponent, {
+			data: this.formGroup.get('extraProperties').get('costs')
+		});
+		dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
+			if (result) {
+				const costsArray = this.formGroup.get('extraProperties').get('costs').value || [];
+				costsArray.push(result);
+				let costeditModel: CostEditorModel = new CostEditorModel();
+				costeditModel = costeditModel.fromModel(result);
+				(<FormArray>this.formGroup.get('extraProperties').get('costs')).push(costeditModel.buildForm(null, true));
+			}
+		});
+	}
+}

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

@@ -794,6 +794,7 @@
 			"VISIBILITY": "Visibility",
 			"PUBLICATION": "Publication Date",
 			"CONTACT": "Contact",
+			"COST": "Costs",
 			"DATASETS": "Datasets"
 		},
 		"ACTIONS": {
@@ -837,6 +838,7 @@
 			"FUNDING-INFO": "Funding info",
 			"DATASET-SELECTION": "Dataset selection",
 			"DATASET-INFO": "Dataset info",
+			"LICENSE-INFO": "License info",
 			"DATASET": "Dataset",
 			"PREVIOUS": "Previous",
 			"NEXT": "Next"
@@ -855,6 +857,11 @@
 			"SECOND-INTRO": "Datasets are documented following pre-defined templates which set the content of dataset descriptions. In Argos, a DMP can contain as many dataset descriptions as the datasets it documents.",
 			"FIND": "Couldn't find a suitable one?"
 		},
+		"LICENSE-INFO": {
+			"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
+			"HINT": "A brief description of what license the DMP is using, it’s type and when it will open.",
+			"TYPING": "Type more letters of the name so its more possible to find the correct one."
+		},
 		"CHANGES": "unsaved changes",
 		"CLONE-DIALOG": {
 			"CLONE": "Clone",