From 11911bd16e9bf6645ca8c32825b9d36d766e366b Mon Sep 17 00:00:00 2001
From: Diamantis Tziotzios <dtziotzios@cite.gr>
Date: Thu, 21 Mar 2024 10:32:59 +0200
Subject: [PATCH] ui changes

---
 .gitignore                                    |   2 +
 .../dmp-blueprint-editor.component.html       | 175 +++++++++---------
 .../dmp/user-field/user-field.component.html  |   2 +-
 .../dmp/user-field/user-field.component.scss  |   7 -
 4 files changed, 95 insertions(+), 91 deletions(-)

diff --git a/.gitignore b/.gitignore
index 36c9e0ee4..428b1bf45 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,3 +52,5 @@ openDMP/dmp-backend/tmp/
 logs/
 dmp-backend/web/src/main/resources/certificates/
 /storage/
+dmp-backend/target/classes/
+dmp-backend/core/target/maven-archiver/
diff --git a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
index 85d65a7fd..2cb60227c 100644
--- a/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
+++ b/dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
@@ -93,7 +93,7 @@
 												<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
 													<ng-container *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="" [cdkDragDisabled]="formGroup.disabled">
 														<div class="section-fields-wrapper row" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
-															
+
 															<div class="col-auto section-options-vertical">
 																<div class="row justify-content-center">
 																	<div class="col-auto">
@@ -113,88 +113,97 @@
 																	<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
 																</div>
 															</div>
-															<div class="col-auto section-field">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
-																	<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
-																		<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option>
-																	</mat-select>
-																	<mat-error *ngIf="field.get('category').hasError('backendError')">{{field.get('category').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
+															<div class="col">
+																<div class="row">
+																	
+																	<div class="col-4 section-field">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
+																			<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
+																				<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option>
+																			</mat-select>
+																			<mat-error *ngIf="field.get('category').hasError('backendError')">{{field.get('category').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
+																			<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
+																				<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
+																			</mat-select>
+																			<mat-error *ngIf="field.get('systemFieldType').hasError('backendError')">{{field.get('systemFieldType').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
+																			<mat-select [formControl]="field.get('dataType')">
+																				<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
+																					{{enumUtils.toDmpBlueprintExtraFieldDataTypeString(extraFieldDataType)}}
+																				</mat-option>
+																			</mat-select>
+																			<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																	<div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
+																			<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
+																			<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
+																			<input matInput type="text" name="label" [formControl]="field.get('label')">
+																			<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																	<div class="col-4  section-field" *ngIf="field.get('category').value != null">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
+																			<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
+																			<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																	<div class="col-4 auto section-field" *ngIf="field.get('category').value != null">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
+																			<input matInput type="text" name="description" [formControl]="field.get('description')">
+																			<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																	<div class="col-4 section-field" *ngIf="field.get('category').value != null">
+																		<mat-form-field class="mt-3 w-100">
+																			<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
+																			<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
+																			</app-multiple-auto-complete>
+																			<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
+																			<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																		</mat-form-field>
+																	</div>
+																</div>
 															</div>
-															<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
-																	<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
-																		<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
-																	</mat-select>
-																	<mat-error *ngIf="field.get('systemFieldType').hasError('backendError')">{{field.get('systemFieldType').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
-															</div>
-															<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
-																	<mat-select [formControl]="field.get('dataType')">
-																		<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
-																			{{enumUtils.toDmpBlueprintExtraFieldDataTypeString(extraFieldDataType)}}
-																		</mat-option>
-																	</mat-select>
-																	<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
-															</div>
-															<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
-																	<app-single-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
-																	<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
-															</div>
-															<div class="col-auto section-field" *ngIf="field.get('category').value != null">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
-																	<input matInput type="text" name="label" [formControl]="field.get('label')">
-																	<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
-															</div>
-															<div class="col-auto  section-field" *ngIf="field.get('category').value != null">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
-																	<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
-																	<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
-															</div>
-															<div class="col-auto section-field" *ngIf="field.get('category').value != null">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
-																	<input matInput type="text" name="description" [formControl]="field.get('description')">
-																	<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
-															</div>
-															<div class="col section-field" *ngIf="field.get('category').value != null">
-																<mat-form-field class="mt-3 w-100">
-																	<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
-																	<app-multiple-auto-complete placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
-																	</app-multiple-auto-complete>
-																	<mat-error *ngIf="field.get('semantics').hasError('backendError')">{{field.get('semantics').getError('backendError').message}}</mat-error>
-																	<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																</mat-form-field>
-															</div>
-															<div class="col-auto section-field" *ngIf="field.get('category').value != null">
-																<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
-																<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</div>
-															<div [hidden]="viewOnly" class="col-auto section-field section-options-horizontal">
-																<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
-																	<mat-icon>delete</mat-icon>
-																</button>
+															<div class="col-auto">
+																<div class="row">
+																	<div class="col-auto section-field" *ngIf="field.get('category').value != null">
+																		<mat-checkbox [disabled]="field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Title || field.get('systemFieldType')?.value === dmpBlueprintSystemFieldType.Description" [formControl]="field.get('required')"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
+																		<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
+																		<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																	</div>
+																	<div [hidden]="viewOnly" class="col-auto section-field section-options-horizontal">
+																		<button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
+																			<mat-icon>delete</mat-icon>
+																		</button>
+																	</div>
+																</div>
 															</div>
 														</div>
 													</ng-container>
@@ -310,4 +319,4 @@
 			</mat-card>
 		</form>
 	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
index 9a16661ef..80ffb7718 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
+++ b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.html
@@ -17,7 +17,7 @@
 </div>
 
 <ng-template #userForm>
-	<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="mb-4 user-fields-wrapper" [cdkDragDisabled]="form.disabled">
+	<div *ngFor="let user of form.get('users').controls; let userIndex=index;" cdkDrag class="mb-4 row user-fields-wrapper" [cdkDragDisabled]="form.disabled">
 		<!-- <div class="pb-2 col-auto">
 			<span style="font-size: 15px;">{{userIndex + 1}}</span>
 		</div> -->
diff --git a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
index 8f388a7cb..909b9e9ce 100644
--- a/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/user-field/user-field.component.scss
@@ -15,12 +15,5 @@
 }
 
 .user-fields-wrapper {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: baseline;
 	
-	@media (width <= 1350px) {
-		flex-direction: column;
-	}	
 }