MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling changes 

*dmp blueprint editor > sections
This commit is contained in:
Sofia Papacharalampous 2024-03-20 17:06:26 +02:00
parent 8e5c6e3579
commit 09351701ab
3 changed files with 106 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.html
View File

@ -91,14 +91,30 @@
</div> </div>
<div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)"> <div cdkDropList class="col-12 mt-3" (cdkDropListDropped)="dropFields($event, sectionIndex)">
<div *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="d-flex align-items-center" [cdkDragDisabled]="formGroup.disabled"> <ng-container *ngFor="let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag class="" [cdkDragDisabled]="formGroup.disabled">
<div class="section-fields-wrapper"> <div class="section-fields-wrapper row" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
<div class="section-field-index">
<span style="font-size: 18px;">{{fieldIndex + 1}}</span> <div class="col-auto section-options-vertical">
<div class="row justify-content-center">
<div class="col-auto">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.42rem 0 0.45rem;">{{fieldIndex + 1}}</span>
<mat-icon *ngIf="isSectionSelected(fieldIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle" style="margin-top: 0.9rem;">drag_indicator</mat-icon>
</div> </div>
<div class="section-field-sortable"><mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon></div> <div class="col-auto">
<div class="section-field-category"> <button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-form-field class="w-100"> <mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<div class="col-auto section-field section-options-horizontal">
<div class="w-1">
<span *ngIf="!isSectionSelected(fieldIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.85rem 0.45rem;">{{fieldIndex + 1}}</span>
<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-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)">
<mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option> <mat-option *ngFor="let fieldCategory of dmpBlueprintFieldCategoryEnum" [value]="fieldCategory">{{enumUtils.toDmpBlueprintFieldCategoryString(fieldCategory)}}</mat-option>
@ -107,8 +123,8 @@
<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="section-field-system-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System"> <div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.System">
<mat-form-field class="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">
<mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option> <mat-option *ngFor="let systemFieldType of dmpBlueprintSystemFieldTypeEnum" [disabled]="systemFieldDisabled(systemFieldType)" [value]="systemFieldType">{{enumUtils.toDmpBlueprintSystemFieldTypeString(systemFieldType)}}</mat-option>
@ -117,8 +133,8 @@
<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="section-field-data-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra"> <div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.Extra">
<mat-form-field class="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')">
<mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType"> <mat-option *ngFor="let extraFieldDataType of dmpBlueprintExtraFieldDataTypeEnum" [value]="extraFieldDataType">
@ -129,40 +145,40 @@
<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="section-field-reference-type" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType"> <div class="col-auto section-field" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
<mat-form-field class="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>
<mat-error *ngIf="field.get('referenceTypeId').hasError('backendError')">{{field.get('referenceTypeId').getError('backendError').message}}</mat-error> <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-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="section-field-label" *ngIf="field.get('category').value != null"> <div class="col-auto section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="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')">
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error> <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-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="section-field-placeholder" *ngIf="field.get('category').value != null"> <div class="col-auto section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="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')">
<mat-error *ngIf="field.get('placeholder').hasError('backendError')">{{field.get('placeholder').getError('backendError').message}}</mat-error> <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-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="section-field-description" *ngIf="field.get('category').value != null"> <div class="col-auto section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="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')">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error> <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-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="section-field-semantics" *ngIf="field.get('category').value != null"> <div class="col section-field" *ngIf="field.get('category').value != null">
<mat-form-field class="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">
</app-multiple-auto-complete> </app-multiple-auto-complete>
@ -170,18 +186,18 @@
<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 class="section-field-required" *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>
<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div> </div>
<div [hidden]="viewOnly" class="section-field-delete"> <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"> <button mat-icon-button matTooltip="{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(sectionIndex, fieldIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</div> </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>
</div> </div>

221
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.scss
View File

@ -142,140 +142,62 @@
flex-wrap: wrap; // ?? flex-wrap: wrap; // ??
align-items: center; align-items: center;
@media (max-width: 1470px) { .section-options-vertical {
display: none;
}
.section-options-horizontal {
display: initial;
}
@media (min-width: 2060px) and (max-width:2215px) {
.section-field {
padding-left: 0;
}
}
@media (min-width: 2000px) and (max-width: 2060px) {
.section-field {
padding-left: 0;
padding-right: 0.6rem;
}
}
@media (min-width: 1950px) and (max-width: 2000px) {
.section-field {
padding-left: 0;
padding-right: 0.3rem;
}
}
// @media (min-width: 1900px) and (max-width: 1950px) {
// .section-field {
// padding-left: 0;
// padding-right: 0.05rem;
// }
// }
@media (max-width: 1900px) {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
.section-options-horizontal {
display: none;
} }
.section-field-index { .section-options-vertical {
width: auto;
margin-top: 0.2rem;
@media (max-width: 1470px) {
margin-left: 1.1rem;
// margin-left: 1.6rem;
}
}
.section-field-delete {
width: auto;
@media (max-width: 1470px) {
// margin-left: 0.5rem;
}
}
.section-field-sortable {
width: auto;
margin-top: 0.5rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0.7rem;
// margin-left: 1.2rem;
}
}
.section-field-category {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%; width: 100%;
} display: initial;
} }
.section-field-system-type { .section-field {
width: 9.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-data-type {
width: 9.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-reference-type {
width: 9.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-label {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
width: 100%;
}
}
.section-field-placeholder {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-description {
width: 10.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-semantics {
width: 12.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.section-field-required {
width: 10.0rem;
margin-left: 0.5rem;
@media (max-width: 1470px) {
margin-top: 0;
width: 100%; width: 100%;
max-width: initial;
} }
} }
} }
.description-fields-wrapper { .description-fields-wrapper {
width: 100%; width: 100%;
margin-top: 1.0rem; margin-top: 1.0rem;
@ -287,58 +209,5 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.description-field-index {
width: auto;
margin-top: 0.2rem;
@media (max-width: 1470px) {
margin-left: 1.1rem;
// margin-left: 1.6rem;
}
}
.description-field-delete {
width: auto;
@media (max-width: 1470px) {
// margin-left: 0.5rem;
}
}
.description-field-sortable {
width: auto;
margin-top: 0.5rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0.7rem;
// margin-left: 1.2rem;
}
}
.description-field-template {
width: 15rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
}
}
.description-field-template-label,
.description-field-template-min-multiplicity,
.description-field-template-max-multiplicity {
width: 11.0rem;
margin-left: 0.5rem;
margin-top: 1.4rem;
@media (max-width: 1470px) {
margin-top: 0;
margin-left: 0;
width: 100%;
width: 100%;
}
}
} }

15
dmp-frontend/src/app/ui/admin/dmp-blueprint/editor/dmp-blueprint-editor.component.ts
View File

@ -60,6 +60,8 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
formGroup: UntypedFormGroup = null; formGroup: UntypedFormGroup = null;
showInactiveDetails = false; showInactiveDetails = false;
hoveredSectionIndex:number = -1;
dmpBlueprintSectionFieldCategory = DmpBlueprintFieldCategory; dmpBlueprintSectionFieldCategory = DmpBlueprintFieldCategory;
dmpBlueprintSystemFieldType = DmpBlueprintSystemFieldType; dmpBlueprintSystemFieldType = DmpBlueprintSystemFieldType;
public dmpBlueprintSystemFieldTypeEnum = this.enumUtils.getEnumValues<DmpBlueprintSystemFieldType>(DmpBlueprintSystemFieldType); public dmpBlueprintSystemFieldTypeEnum = this.enumUtils.getEnumValues<DmpBlueprintSystemFieldType>(DmpBlueprintSystemFieldType);
@ -268,6 +270,19 @@ export class DmpBlueprintEditorComponent extends BaseEditor<DmpBlueprintEditorMo
// Sections // Sections
// //
// //
isSectionSelected(sectionId: number): boolean {
return this.hoveredSectionIndex === sectionId;
}
onSectionHover(sectionId: any): void {
this.hoveredSectionIndex = sectionId;
}
clearHoveredSection(): void {
this.hoveredSectionIndex = -1;
}
addSection(): void { addSection(): void {
const formArray = this.formGroup.get('definition').get('sections') as FormArray; const formArray = this.formGroup.get('definition').get('sections') as FormArray;
formArray.push(this.editorModel.createChildSection(formArray.length)); formArray.push(this.editorModel.createChildSection(formArray.length));