parent
8e5c6e3579
commit
09351701ab
|
@ -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>
|
<div class="row justify-content-center">
|
||||||
<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">
|
<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-form-field class="w-100">
|
<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>
|
||||||
|
<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>
|
||||||
|
|
|
@ -142,203 +142,72 @@
|
||||||
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-options-vertical {
|
||||||
|
width: 100%;
|
||||||
|
display: initial;
|
||||||
|
}
|
||||||
|
|
||||||
.section-field-index {
|
.section-field {
|
||||||
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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-field-system-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-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;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap; // ??
|
flex-wrap: wrap; // ??
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@media (max-width: 1470px) {
|
@media (max-width: 1470px) {
|
||||||
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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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));
|
||||||
|
|
Loading…
Reference in New Issue