Merge branch 'dmp-refactoring' of code-repo.d4science.org:MaDgiK-CITE/argos into dmp-refactoring

dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/radio-box/description-template-editor-radio-box-field.component.html

@@ -2,11 +2,10 @@
 	<div class="col-12">
 		<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-RADIO-BOX-TITLE'
 			| translate}}</h5>
-			<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+			<ng-container *ngIf="form.get('data').get('options').dirty && form.get('data').get('options').hasError('required')">
 				<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
 				<small class="text-danger">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED'| translate}}</small>
 			</ng-container>
-			<mat-error *ngIf="form.get('data').get('options').dirty && form.get('data').get('options').hasError('required')">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
 			<mat-error *ngIf="form.get('data').get('options').hasError('backendError')">{{form.get('data').get('options').getError('backendError').message}}</mat-error>
 	</div>
 

dmp-frontend/src/app/ui/admin/description-template/editor/components/field-type/select/description-template-editor-select-field.component.html

@@ -3,7 +3,7 @@
 
 		<h5 style="font-weight: bold; display: inline-block; margin-right: 2em;">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.FIELD-SELECT-TITLE' | translate}}</h5>
 
-		<ng-container *ngIf="form.get('data').errors?.emptyArray && form.get('data').touched">
+		<ng-container *ngIf="form.get('data').get('options').dirty && form.get('data').get('options').hasError('required')">
 			<mat-icon class="text-danger translateY-3">warning_amber</mat-icon>
 			<small class="text-danger">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</small>
 		</ng-container>
@@ -36,7 +36,6 @@
 			</button>
 		</div>
 	</div>
-	<mat-error *ngIf="form.get('data').get('options').dirty && form.get('data').get('options').hasError('required')">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-RADIO-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
 	<mat-error *ngIf="form.get('data').get('options').hasError('backendError')">{{form.get('data').get('options').getError('backendError').message}}</mat-error>
 	<div class="col-auto"><button mat-icon-button (click)="addNewRow()">
 			<mat-icon>add</mat-icon>

dmp-frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.html

@@ -1,4 +1,3 @@
-{{validationRootPath}}
 <ng-container *ngIf="expandView">
 
 	<!-- ACTIONS PER FIELD -->
@@ -132,7 +131,7 @@
 
 		<mat-form-field class="col-6">
 			<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}</mat-label>
-			<app-multiple-auto-complete placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" required='false' [separatorKeysCodes]="separatorKeysCodes" [formControl]="this.form.get('schematics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
+			<app-multiple-auto-complete placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="this.form.get('schematics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
 			</app-multiple-auto-complete>
 			<mat-error *ngIf="form.get('schematics').hasError('backendError')">{{form.get('schematics').getError('backendError').message}}</mat-error>
 		</mat-form-field>

dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html

@@ -307,7 +307,7 @@
 	<div>
 		<button mat-raised-button class="template_action_btn mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
 		<!-- <button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1" [disabled]="!formGroup.valid" mat-raised-button class="template_action_btn save-btn" type="button"> -->
-		<button *ngIf="!formGroup.disabled && formGroup.get('status').value!=1" mat-raised-button class="template_action_btn save-btn" type="button">
+		<button *ngIf="!formGroup.disabled && formGroup.get('status').value!=finalized" mat-raised-button class="template_action_btn save-btn" type="button">
 			<span class="d-flex flex-row row">
 				<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
 				<mat-divider [vertical]="true"></mat-divider>

dmp-frontend/src/app/ui/admin/description-template/editor/description-template-editor.model.ts

@@ -312,7 +312,7 @@ export class DescriptionTemplatePageEditorModel implements DescriptionTemplatePa
 		baseValidationArray.push({ key: 'id', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}id`)] });
 		baseValidationArray.push({ key: 'ordinal', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}ordinal`)] });
 		baseValidationArray.push({ key: 'title', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}title`)] });
-		baseValidationArray.push({ key: 'sections', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}sections`)] });
+		baseValidationArray.push({ key: 'sections', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}sections`)] });
 
 		baseContext.validation = baseValidationArray;
 		return baseContext;
@@ -930,10 +930,10 @@ export class DescriptionTemplateRuleEditorModel implements DescriptionTemplateRu
 
 		const baseContext: ValidationContext = new ValidationContext();
 		const baseValidationArray: Validation[] = new Array<Validation>();
-		baseValidationArray.push({ key: 'target', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}target`)] });
+		baseValidationArray.push({ key: 'target', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}target`)] });
-		baseValidationArray.push({ key: 'textValue', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}textValue`)] });
+		baseValidationArray.push({ key: 'textValue', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}textValue`)] });
-		baseValidationArray.push({ key: 'textListValue', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}textListValue`)] });
+		baseValidationArray.push({ key: 'textListValue', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}textListValue`)] });
-		baseValidationArray.push({ key: 'dateValue', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}dateValue`)] });
+		baseValidationArray.push({ key: 'dateValue', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}dateValue`)] });
 
 		baseContext.validation = baseValidationArray;
 		return baseContext;
@@ -1283,7 +1283,7 @@ export class DescriptionTemplateRadioBoxDataEditorModel extends DescriptionTempl
 	}): ValidationContext {
 		const { rootPath = '', validationErrorModel } = params;
 		const baseContext: ValidationContext = super.createValidationContext({ rootPath, validationErrorModel });
-		baseContext.validation.push({ key: 'options', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}options`)] });
+		baseContext.validation.push({ key: 'options', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}options`)] });
 		return baseContext;
 	}
 
@@ -1428,8 +1428,8 @@ export class DescriptionTemplateSelectDataEditorModel extends DescriptionTemplat
 	}): ValidationContext {
 		const { rootPath = '', validationErrorModel } = params;
 		const baseContext: ValidationContext = super.createValidationContext({ rootPath, validationErrorModel });
-		baseContext.validation.push({ key: 'options', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}options`)] });
+		baseContext.validation.push({ key: 'options', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}options`)] });
-		baseContext.validation.push({ key: 'multipleSelect', validators: [BackendErrorValidator(validationErrorModel, `${rootPath}multipleSelect`)] });
+		baseContext.validation.push({ key: 'multipleSelect', validators: [Validators.required, BackendErrorValidator(validationErrorModel, `${rootPath}multipleSelect`)] });
 		return baseContext;
 	}
 

dmp-frontend/src/app/ui/admin/entity-locks/lock-listing.component.scss

@@ -1,12 +1,3 @@
-::ng-deep datatable-header-cell {
-  width: fit-content !important;
-  padding: 0.9rem 0.7rem !important;
-}
-
-::ng-deep .datatable-header-cell-template-wrap {
-  width: fit-content !important;
-}
-
 .lock-listing {
   // margin-top: 1.3rem;
   // margin-left: 1rem;

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

@@ -29,7 +29,7 @@
 						<mat-card-title *ngIf="isNew">{{'LANGUAGE-EDITOR.NEW' | translate}}</mat-card-title>
 					</mat-card-header>
 					<mat-card-content>
-						<div class="row">
+						<div class="row mt-3">
 							<div class="col-4" *ngIf="isNew">
 								<mat-form-field class="w-100">
 									<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label>

dmp-frontend/src/app/ui/admin/notification-template/editor/notification-template-editor.component.html

@@ -42,7 +42,7 @@
 									<mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 								</mat-form-field>
 							</div>
-							<div class="col-4">
+							<div class="col-12 col-lg-4">
 								<mat-form-field class="w-100">
 									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
 									<mat-select [formControl]="formGroup.get('languageId')" name="language" required>
@@ -54,7 +54,7 @@
 									<mat-error *ngIf="formGroup.get('languageId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 								</mat-form-field>
 							</div>
-							<div class="col-4">
+							<div class="col-12 col-lg-4">
 								<mat-form-field class="w-100">
 									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label>
 									<mat-select name="kind" [formControl]="formGroup.get('kind')" required>
@@ -66,7 +66,7 @@
 									<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 								</mat-form-field>
 							</div>
-							<div class="col-4">
+							<div class="col-12 col-lg-4">
 								<mat-form-field class="w-100">
 									<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label>
 									<mat-select name="channel" [formControl]="formGroup.get('channel')" required>

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

@@ -1,12 +1,3 @@
-::ng-deep datatable-header-cell {
-  width: fit-content !important;
-  padding: 0.9rem 0.7rem !important;
-}
-
-::ng-deep .datatable-header-cell-template-wrap {
-  width: fit-content !important;
-}
-
 .notification-listing {
   // margin-top: 1.3rem;
   // margin-left: 1rem;

dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html

@@ -1,4 +1,5 @@
 <form class="row user-role-editor" *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
+	<div class="row align-items-center">
 	<div *ngIf="!this.nowEditing"class="roles col">
 		<ng-container *ngFor="let role of this.formGroup.get('roles').value">
 			<div>
@@ -8,7 +9,8 @@
 			</div>
 		</ng-container>
 	</div>
-	<mat-form-field *ngIf="this.nowEditing" class="select-role roles-width-180 col-auto">
+	<div class="col-8">
+		<mat-form-field *ngIf="this.nowEditing" class="w-100">
 			<mat-select formControlName="roles" multiple required>
 				<ng-container *ngFor="let role of appRoleEnumValues">
 					<mat-option [value]="role">{{enumUtils.toAppRoleString(role)}}</mat-option>
@@ -16,12 +18,15 @@
 			</mat-select>
 			<mat-error *ngIf="formGroup.get('roles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 		</mat-form-field>
+	</div>
 
-	<button *ngIf="!this.nowEditing" class="col-auto" mat-icon-button color="primary" type="button" (click)="editItem()">
+	<button *ngIf="!this.nowEditing" class="col" mat-icon-button color="primary" type="button" (click)="editItem()">
 		<mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.EDIT' | translate}}">edit</mat-icon>
 		<span class="row-action"></span>
 	</button>
 	<button *ngIf="this.nowEditing" class="col-auto save-button" mat-icon-button color="primary" type="submit">
 		<mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.SAVE' | translate}}">save</mat-icon>
 	</button>
+	</div>
+
 </form>

dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.html

@@ -85,8 +85,8 @@
 									<div class="row">
 										<div class="col-12">
 											<div class="row h-100">
-												<div class="col-auto pr-0">
+												<div class="col-auto pr-0 account-icon-wrapper">
-													<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
+													<mat-icon class="account-icon">account_circle</mat-icon>
 												</div>
 												<div class="col">
 													<div class="row">
@@ -127,8 +127,8 @@
 																	<div class="row">
 																		<div class="col-12">
 																			<div class="row h-100">
-																				<div class="col-auto p-0">
+																				<div class="col-auto p-0 account-icon-wrapper">
-																					<img class="profile-picture" src="/assets/images/annotations/user-profile-2.png" alt="profile-picture">
+																					<mat-icon class="account-icon">account_circle</mat-icon>
 																				</div>
 																				<div class="col">
 																					<div class="row">

dmp-frontend/src/app/ui/annotations/annotation-dialog-component/annotation-dialog.component.scss

@@ -75,11 +75,14 @@ $mat-card-header-size: 40px !default;
 	text-align: center;
 }
 
-.profile-picture {
+.account-icon-wrapper {
-  height: $mat-card-header-size;
+  color: #d5d5d5;
-  width: $mat-card-header-size;
+}
-  border-radius: 50%;
+
-  flex-shrink: 0;
+.account-icon {
+  font-size: 2.5em;
+  height: auto;
+  width: auto;
 }
 
 .comment-wrapper {

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

@@ -4,7 +4,7 @@
 			<!-- Description Header -->
 			<div class="fixed-editor-header">
 				<div class="card description-editor-header">
-					<div class="col">
+					<div class="col-12">
 						<div class="row">
 							<div class="col info">
 								<ng-container *ngIf="!viewOnly else viewOnlyTemplate">
@@ -25,7 +25,9 @@
 									</div>
 								</div>
 							</div>
-							<div class="row">
+							<div class="col-auto">
+								<div class="row h-100">
+
 									<div class="col-auto d-flex align-items-center">
 										<button *ngIf="formGroup.get('id').value" [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="description-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DATASET-EDITOR.ACTIONS.DISABLED-EXPORT' | translate">
 											{{ 'DESCRIPTION-EDITOR.ACTIONS.EXPORT' | translate }}
@@ -39,6 +41,7 @@
 										</mat-menu>
 									</div>
 
+
 									<mat-divider *ngIf="formGroup.get('id').value && (!viewOnly || (!isLocked && !viewOnly) || isLocked || (hasReversableStatus() && !isLocked))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
 
 									<div *ngIf="isDirty() && !viewOnly" class="col-auto d-flex align-items-center pr-0">
@@ -74,6 +77,7 @@
 						</div>
 					</div>
 				</div>
+			</div>
 			<div class="row editor-content">
 				<div class="col-auto description-stepper">
 					<div class="stepper-back d-flex flex-direction-row">

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

@@ -165,8 +165,8 @@
 														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
 															<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
 																<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
-																	<div class="col-12 col-xl-auto pb-1">
+																	<div class="col-12 col-xl-auto pr-0">
-																		<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.435rem 0 0.435rem;">{{contactIndex + 1}}</span>
+																		<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
 																		<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 																	</div>
 																	<div class="col-12 col-xl-auto">
@@ -176,7 +176,7 @@
 																			</div>
 																		</mat-button-toggle-group>
 																	</div>
-																	<div class="col pt-4">
+																	<div class="col pt-3">
 																		<div class="row">
 																			<div class="col d-flex" *ngIf="contact.get('contactType').value == dmpContactTypeEnum.Internal">
 																				<mat-form-field class="w-100">

dmp-frontend/src/app/ui/inapp-notification/listing-dialog/mine-inapp-notification-listing-dialog.component.ts

@@ -1,5 +1,6 @@
+import { fromEvent, Observable, Subscription } from "rxjs";
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AuthService } from '@app/core/services/auth/auth.service';
@@ -19,10 +20,13 @@ import { IsActive } from '@app/core/common/enum/is-active.enum';
 	templateUrl: './mine-inapp-notification-listing-dialog.component.html',
 	styleUrls: ['./mine-inapp-notification-listing-dialog.component.scss']
 })
-export class MineInAppNotificationListingDialogComponent extends BaseComponent implements OnInit {
+export class MineInAppNotificationListingDialogComponent extends BaseComponent implements OnInit, OnDestroy {
 	public inappNotifications = new Array<InAppNotification>();
 	public notificationInAppTrackingEnum = NotificationInAppTracking;
 
+	resizeObservable: Observable<Event>;
+	resizeSubscription: Subscription;
+
 	constructor(
 		public dialogRef: MatDialogRef<MineInAppNotificationListingDialogComponent>,
 		@Inject(MAT_DIALOG_DATA) public dialogData: any,
@@ -56,6 +60,17 @@ export class MineInAppNotificationListingDialogComponent extends BaseComponent i
 				},
 				error => this.onCallbackError(error),
 			);
+
+			this.resizeObservable = fromEvent(window, 'resize');
+			this.resizeSubscription = this.resizeObservable
+				.subscribe(evt =>{
+					this.dialogRef.close();
+				});
+
+	}
+
+	ngOnDestroy(): void {
+		this.resizeSubscription.unsubscribe();
 	}
 
 	private onCallbackError(errorResponse: HttpErrorResponse) {

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

@@ -29,7 +29,7 @@
 						<mat-icon>arrow_drop_down</mat-icon>
 					</button>
 					<mat-menu #languageMenu="matMenu" class="lang-parent">
-						<app-language (languageChange)="getLanguage($event)"></app-language>
+						<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
 					</mat-menu>
 				</div>
 				<div class="col-auto" *ngIf="isAuthenticated() && authentication.hasPermission(authentication.permissionEnum.ViewMineInAppNotificationPage)">

dmp-frontend/src/app/ui/navbar/user-dialog/user-dialog.component.ts

@@ -1,18 +1,22 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { AuthService } from '../../../core/services/auth/auth.service';
+import { Observable, Subscription, fromEvent } from 'rxjs';
 
 @Component({
 	selector: 'app-user-dialog-component',
 	templateUrl: 'user-dialog.component.html',
 	styleUrls: ['user-dialog.component.scss']
 })
-export class UserDialogComponent implements OnInit {
+export class UserDialogComponent implements OnInit, OnDestroy  {
 
 	public formGroup: UntypedFormGroup;
 
+	resizeObservable: Observable<Event>;
+	resizeSubscription: Subscription;
+
 	constructor(
 		private authentication: AuthService,
 		private router: Router,
@@ -21,6 +25,15 @@ export class UserDialogComponent implements OnInit {
 	) { }
 
 	ngOnInit(): void {
+		this.resizeObservable = fromEvent(window, 'resize');
+		this.resizeSubscription = this.resizeObservable
+			.subscribe(evt =>{
+				this.dialogRef.close();
+			});
+	}
+
+	ngOnDestroy(): void {
+		this.resizeSubscription.unsubscribe();
 	}
 
 	public logout(): void {

dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.html

@@ -0,0 +1,38 @@
+<form *ngIf="formGroup" [formGroup]="formGroup">
+	<div class="row d-flex flex-row">
+		<div mat-dialog-title class="col-auto">
+			{{'REFERENCE-FIELD.REFERENCE-DIALOG-EDITOR.TITLE' | translate}} {{label}}
+		</div>
+		<div class="col-auto ml-auto close-btn" (click)="close()">
+			<mat-icon>close</mat-icon>
+		</div>
+	</div>
+	<div mat-dialog-content class="row">
+		<div *ngFor="let field of systemFields;">
+			<div class="col">
+				<mat-form-field class="w-100">
+					<mat-label>{{field}}</mat-label>
+					<input matInput type="text" [name]="field" [formControl]="formGroup.get(field)" required>
+					<mat-error *ngIf="formGroup.get(field).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+				</mat-form-field>
+			</div>
+		</div>
+		<ng-container *ngIf="referenceType && referenceType.definition && referenceType.definition.fields && referenceType.definition.fields.length > 0">
+			<div *ngFor="let field of referenceType.definition.fields;">
+				<div class="col">
+					<mat-form-field class="w-100">
+						<mat-label>{{field.label}}</mat-label>
+						<input matInput type="text" [name]="field.code" [formControl]="formGroup.get(field.code)" required>
+						<mat-error *ngIf="formGroup.get(field.code).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+					</mat-form-field>
+				</div>
+			</div>
+		</ng-container>
+		
+		{{formGroup.value | json}}
+	</div>
+	<div mat-dialog-actions class="row">
+		<div class="ml-auto col-auto"><button mat-raised-button type="button" mat-dialog-close>Cancel</button></div>
+		<div class="col-auto"><button mat-button color="primary" [disabled]="!formGroup.valid" (click)="send()" type="button">Save</button></div>
+	</div>
+</form>

dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.scss

@@ -0,0 +1,3 @@
+.close-btn {
+  cursor: pointer;
+}

dmp-frontend/src/app/ui/reference/reference-field/editor/reference-dialog-editor.component.ts

@@ -0,0 +1,115 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
+import { ReferenceType, ReferenceTypeDefinition, ReferenceTypeField } from '@app/core/model/reference-type/reference-type';
+import { DefinitionPersist, FieldPersist, ReferencePersist } from '@app/core/model/reference/reference';
+import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
+import { BaseComponent } from '@common/base/base.component';
+import { FormService } from '@common/forms/form-service';
+import { takeUntil } from 'rxjs/operators';
+import { nameof } from 'ts-simple-nameof';
+
+@Component({
+	templateUrl: 'reference-dialog-editor.component.html',
+	styleUrls: ['./reference-dialog-editor.component.scss']
+})
+export class ReferenceDialogEditorComponent extends BaseComponent implements OnInit {
+	formGroup: UntypedFormGroup;
+	referenceType: ReferenceType;
+	systemFields: string[];
+	label: string = null
+
+	constructor(
+		private referenceTypeService: ReferenceTypeService,
+		private fb: UntypedFormBuilder,
+		public dialogRef: MatDialogRef<ReferenceDialogEditorComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: any,
+		private formService: FormService
+	) { 
+		super(); 
+		this.label = data.label;
+		this.formGroup = this.fb.group({});
+	}
+
+	ngOnInit(): void {
+		this.systemFields = this.referenceTypeService.getSystemFields([]);
+
+		this.referenceTypeService.getSingle(this.data.referenceTypeId, this.lookupFields())
+		.pipe(takeUntil(this._destroyed))
+		.subscribe(
+			referenceType => {
+				this.referenceType = referenceType;
+				this.buildForm(referenceType.definition?.fields);
+			}
+		);
+	}
+
+	buildForm(fields: ReferenceTypeField[]) {
+	
+		this.systemFields.forEach(systemField => {
+			this.formGroup.setControl(systemField, new FormControl({ value: null, disabled: false }, Validators.required));
+		})
+
+		if (fields != null && fields.length >= 0){
+			fields.forEach(x => {
+				this.formGroup.setControl(x.code, new FormControl({ value: null, disabled: false }, Validators.required));
+			})
+		}
+
+	}
+
+	send() {
+		this.formService.touchAllFormFields(this.formGroup);
+		if (!this.formGroup.valid) { return; }
+		
+		this.dialogRef.close(this.buildReferencePersist());
+
+	}
+
+	buildReferencePersist() : ReferencePersist{
+		return {
+			label: this.formGroup.get(this.systemFields[1]).value,
+			description: this.formGroup.get(this.systemFields[2]).value,
+			typeId: this.data.referenceTypeId,
+			reference: this.formGroup.get(this.systemFields[0]).value,
+			abbreviation: "",
+			source: "Internal",
+			sourceType: ReferenceSourceType.Internal,
+			definition: this.buildDefinitionPersist(this.referenceType.definition.fields),
+		}
+		
+	}
+
+	buildDefinitionPersist(fields: ReferenceTypeField[]): DefinitionPersist{
+		if(fields == null || fields.length == 0) return null;
+		return {
+			fields: fields.map(x => this.buildFieldPersist(x))
+		} 
+	}
+
+	buildFieldPersist(field: ReferenceTypeField): FieldPersist{
+		return {
+			code: field.code,
+			dataType: field.dataType,
+			value: this.formGroup.get(field.code).value,
+		}
+	}
+
+	close() {
+		this.dialogRef.close(false);
+	}
+
+	private lookupFields(): string[] {
+		return [
+			nameof<ReferenceType>(x => x.id),
+			nameof<ReferenceType>(x => x.name),
+			nameof<ReferenceType>(x => x.code),
+
+			[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.code)].join('.'),
+			[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.label)].join('.'),
+			[nameof<ReferenceType>(x => x.definition), nameof<ReferenceTypeDefinition>(x => x.fields), nameof<ReferenceTypeField>(x => x.dataType)].join('.')
+		]
+	}
+
+}

dmp-frontend/src/app/ui/reference/reference-field/reference-field.component.ts

@@ -1,11 +1,15 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 import { ReferenceType } from '@app/core/model/reference-type/reference-type';
 import { ReferenceService } from '@app/core/services/reference/reference.service';
 import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
 import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
 import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
 import { BaseComponent } from '@common/base/base.component';
+import { takeUntil } from 'rxjs/operators';
+import { ReferenceDialogEditorComponent } from './editor/reference-dialog-editor.component';
+import { ReferencePersist } from '@app/core/model/reference/reference';
 
 @Component({
 	selector: 'app-reference-field-component',
@@ -28,6 +32,7 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit {
 	constructor(
 		private referenceService: ReferenceService,
 		public enumUtils: EnumUtils,
+		private dialog: MatDialog,
 	) { super(); }
 
 	ngOnInit() {
@@ -39,17 +44,25 @@ export class ReferenceFieldComponent extends BaseComponent implements OnInit {
 	}
 
 	addReference() {
-		// const dialogRef = this.dialog.open(DatasetExternalDataRepositoryDialogEditorComponent, {
+		const dialogRef = this.dialog.open(ReferenceDialogEditorComponent, {
-		// 	width: '500px',
+			width: '500px',
-		// 	restoreFocus: false,
+			restoreFocus: false,
-		// 	data: {}
+			data: {
-		// });
+				referenceTypeId: this.referenceType.id,
-		// dialogRef.afterClosed()
+				label: this.label ?? this.referenceType.name
-		// 	.pipe(takeUntil(this._destroyed))
+			},
-		// 	.subscribe(result => {
+		});
-		// 		if (!result) { return; }
+		dialogRef.afterClosed()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(newResult => {
+				if (!newResult) { return; }
 				// const dataRepositoryModel = new ExternalDataRepositoryEditorModel(result.id, result.name, result.abbreviation, result.uri, result.pid, result.source);
 				// (<UntypedFormArray>this.formGroup.get('dataRepositories')).push(dataRepositoryModel.buildForm());
-		// 	});
+
+				let results = this.form.value as ReferencePersist[];
+				if (results == undefined) results = [];
+				results.push(newResult);
+				this.form.setValue(results);
+			});
 	}
 }

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

@@ -5,6 +5,7 @@ import { DescriptionRoutingModule } from '@app/ui/description/description.routin
 import { CommonFormsModule } from '@common/forms/common-forms.module';
 import { CommonUiModule } from '@common/ui/common-ui.module';
 import { ReferenceFieldComponent } from './reference-field.component';
+import { ReferenceDialogEditorComponent } from './editor/reference-dialog-editor.component';
 
 @NgModule({
 	imports: [
@@ -15,10 +16,12 @@ import { ReferenceFieldComponent } from './reference-field.component';
 		AutoCompleteModule
 	],
 	declarations: [
-		ReferenceFieldComponent
+		ReferenceFieldComponent,
+		ReferenceDialogEditorComponent
 	],
 	exports: [
-		ReferenceFieldComponent
+		ReferenceFieldComponent,
+		ReferenceDialogEditorComponent
 	]
 })
 export class ReferenceFieldModule { }

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

@@ -1352,6 +1352,9 @@
 		"COULD-NOT-FIND-MESSAGE": "Couldn't find it?",
 		"ACTIONS": {
 			"INSERT-MANUALLY": "Insert it manually"
+		},
+		"REFERENCE-DIALOG-EDITOR": {
+			"TITLE": "Add a"
 		}
 	},
 	"DMP-CLONE-DIALOG": {