styling fixes on dmp blueprint editor
This commit is contained in:
parent
c2f34f0299
commit
eff8d887ae
|
|
@ -86,121 +86,122 @@
|
|||
<div class="row">
|
||||
<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="section-fields-wrapper row align-items-center mt-1" [cdkDragDisabled]="formGroup.disabled" (mouseenter)="onSectionHover(fieldIndex)" (mouseleave)="clearHoveredSection()">
|
||||
<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 class="col-auto">
|
||||
<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 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 class="col-auto">
|
||||
<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 class="col-auto pr-0 section-options-horizontal">
|
||||
<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 class="col-auto pr-0 section-options-horizontal">
|
||||
<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 class="col">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-xl-4">
|
||||
<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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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 class="col">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12 col-xl-4">
|
||||
<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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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-12 col-xl-4" *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 === dmpBlueprintSectionFieldCategory.ReferenceType">
|
||||
</div>
|
||||
<div class="col-12 col-xl-auto">
|
||||
<div class="row flex-xl-column">
|
||||
<div class="col-auto section-field" *ngIf="field.get('category').value != null">
|
||||
<mat-checkbox class="pl-1" [disabled]="alwaysRequiredSystemFieldTypes.includes(field.get('systemFieldType')?.value) || formGroup.disabled" [checked]="field.get('required').value" (change)="field.get('required').setValue($event.checked)"><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 class="col-auto">
|
||||
<div class="pl-1" *ngIf="field.get('category').value === dmpBlueprintSectionFieldCategory.ReferenceType">
|
||||
<mat-checkbox [disabled]="formGroup.disabled" [checked]="field.get('multipleSelect').value" (change)="field.get('multipleSelect').setValue($event.checked)"><span>{{'DMP-BLUEPRINT-EDITOR.FIELDS.FIELD-MULTIPLE-SELECT' | translate}}</span></mat-checkbox>
|
||||
<mat-error *ngIf="field.get('multipleSelect')?.hasError('backendError')">{{field.get('multipleSelect')?.getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="field.get('multipleSelect')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-auto">
|
||||
<div class="row">
|
||||
<div class="col-auto section-field" *ngIf="field.get('category').value != null">
|
||||
<mat-checkbox [disabled]="alwaysRequiredSystemFieldTypes.includes(field.get('systemFieldType')?.value) || formGroup.disabled" [checked]="field.get('required').value" (change)="field.get('required').setValue($event.checked)"><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-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 [hidden]="viewOnly" class="col-auto 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>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue