ui changes

This commit is contained in:
Diamantis Tziotzios 2024-03-21 10:32:59 +02:00
parent ba33b29e41
commit 11911bd16e
4 changed files with 95 additions and 91 deletions

2
.gitignore vendored
View File

@ -52,3 +52,5 @@ openDMP/dmp-backend/tmp/
logs/ logs/
dmp-backend/web/src/main/resources/certificates/ dmp-backend/web/src/main/resources/certificates/
/storage/ /storage/
dmp-backend/target/classes/
dmp-backend/core/target/maven-archiver/

View File

@ -113,7 +113,10 @@
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon> <mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
</div> </div>
</div> </div>
<div class="col-auto section-field"> <div class="col">
<div class="row">
<div class="col-4 section-field">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
<mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)"> <mat-select [formControl]="field.get('category')" [disabled]="field.disabled" (selectionChange)="fieldCategoryChanged(sectionIndex, fieldIndex)">
@ -123,7 +126,7 @@
<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System"> <div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled"> <mat-select [formControl]="field.get('systemFieldType')" [disabled]="field.disabled">
@ -133,7 +136,7 @@
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra"> <div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('dataType')"> <mat-select [formControl]="field.get('dataType')">
@ -145,7 +148,7 @@
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType"> <div class="col-4 section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label> <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> <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>
@ -153,7 +156,7 @@
<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto section-field" *ngIf="field.get('category').value != null"> <div class="col-4 section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')"> <input matInput type="text" name="label" [formControl]="field.get('label')">
@ -161,7 +164,7 @@
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto section-field" *ngIf="field.get('category').value != null"> <div class="col-4 section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')"> <input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
@ -169,7 +172,7 @@
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto section-field" *ngIf="field.get('category').value != null"> <div class="col-4 auto section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label> <mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')"> <input matInput type="text" name="description" [formControl]="field.get('description')">
@ -177,7 +180,7 @@
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col section-field" *ngIf="field.get('category').value != null"> <div class="col-4 section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label> <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 placeholder="{{'DMP-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
@ -186,6 +189,10 @@
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</div>
</div>
<div class="col-auto">
<div class="row">
<div class="col-auto section-field" *ngIf="field.get('category').value != null"> <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-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('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
@ -197,6 +204,8 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</div>
</ng-container> </ng-container>
<mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error> <mat-error *ngIf="section.get('fields').dirty && section.get('fields').hasError('required')">{{'DMP-BLUEPRINT-EDITOR.FIELDS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error> <mat-error *ngIf="section.get('fields').hasError('backendError')">{{section.get('fields').getError('backendError').message}}</mat-error>

View File

@ -17,7 +17,7 @@
</div> </div>
<ng-template #userForm> <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"> <!-- <div class="pb-2 col-auto">
<span style="font-size: 15px;">{{userIndex + 1}}</span> <span style="font-size: 15px;">{{userIndex + 1}}</span>
</div> --> </div> -->

View File

@ -15,12 +15,5 @@
} }
.user-fields-wrapper { .user-fields-wrapper {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: baseline;
@media (width <= 1350px) {
flex-direction: column;
}
} }