@ -92,7 +92,7 @@
< / div >
< 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 " [ cdkDragDisabled ] = " formGroup . disabled " ( mouseenter ) = " onSectionHover ( fieldIndex ) " ( mouseleave ) = " clearHoveredSection ( ) " >
< 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" >
@ -106,14 +106,14 @@
< / div >
< / div >
< / div >
< div class = "col-auto pr-0 section- field section- options-horizontal">
< 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- 4 section-field ">
< 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 ) " >
@ -123,7 +123,7 @@
< 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" >
< 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 " >
@ -133,7 +133,7 @@
< 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" >
< 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 ' ) " >
@ -145,7 +145,7 @@
< 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" >
< 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 >
@ -153,7 +153,7 @@
< 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" >
< 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 ' ) " >
@ -161,7 +161,7 @@
< 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" >
< 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 ' ) " >
@ -169,7 +169,7 @@
< 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" >
< 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 ' ) " >
@ -177,7 +177,7 @@
< 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" >
< 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 " >
@ -188,14 +188,14 @@
< / div >
< / div >
< / div >
< div class = "col- auto">
< 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 ] = " 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">
< 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 >
@ -225,62 +225,93 @@
< / div >
< / div >
< div cdkDropList class = "col-12" ( cdkDropListDropped ) = " dropDescriptionTemplates ( $ event , sectionIndex ) " >
< div * ngFor = "let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class = "row align-items-center" [ cdkDragDisabled ] = " formGroup . disabled " >
< div class = "description-fields-wrapper" >
< div class = "description-field-index" >
< div class = "row" >
< div cdkDropList class = "col-12 mt-3" ( cdkDropListDropped ) = " dropDescriptionTemplates ( $ event , sectionIndex ) " >
< div * ngFor = "let descriptionTemplate of section.get('descriptionTemplates').controls; let descriptionTemplateIndex=index;" cdkDrag class = "description-fields-wrapper row align-items-center mt-1" [ cdkDragDisabled ] = " formGroup . disabled " >
<!-- <div class="description - field - index">
< span style = "font-size: 18px;" > {{descriptionTemplateIndex + 1}}< / span >
< / div >
< div class = "description-field-sortable" > < mat-icon [ ngClass ] = " { ' drag-handle-disabled ' : formGroup . disabled } " cdkDragHandle class = "drag-handle" > drag_indicator< / mat-icon > < / div >
< div class = "description-field-template" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}< / mat-label >
< app-single-auto-complete [ formControl ] = " descriptionTemplate . get ( ' descriptionTemplateGroupId ' ) " [ hidePlaceholder ] = " true " [ configuration ] = " descriptionTempalteGroupSingleAutocompleteConfiguration " ( optionActionClicked ) = " onPreviewDescriptionTemplate ( $ event , i ) " > < / app-single-auto-complete >
< mat-error * ngIf = "descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')" > {{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "description-field-template-label" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}< / mat-label >
< input matInput type = "text" name = "label" [ formControl ] = " descriptionTemplate . get ( ' label ' ) " >
< mat-error * ngIf = "descriptionTemplate.get('label').hasError('backendError')" > {{descriptionTemplate.get('label').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('label').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "description-field-template-min-multiplicity" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}< / mat-label >
< input matInput type = "number" min = "0" name = "minMultiplicity" [ formControl ] = " descriptionTemplate . get ( ' minMultiplicity ' ) " >
< mat-error * ngIf = "descriptionTemplate.get('minMultiplicity').hasError('backendError')" > {{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('minMultiplicity').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "description-field-template-max-multiplicity" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}< / mat-label >
< input matInput type = "number" min = "1" name = "maxMultiplicity" [ formControl ] = " descriptionTemplate . get ( ' maxMultiplicity ' ) " >
< mat-error * ngIf = "descriptionTemplate.get('maxMultiplicity').hasError('backendError')" > {{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('maxMultiplicity').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
-->
< 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;" > {{descriptionTemplateIndex + 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 class = "action-list-icon" matTooltip = "{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" ( click ) = " removeDescriptionTemplate ( sectionIndex , descriptionTemplateIndex ) " [ disabled ] = " formGroup . disabled " >
< mat-icon > delete< / mat-icon >
< / button >
< / div >
< / div >
< / div >
< div class = "description-field-delete" >
< button mat-icon-button class = "action-list-icon" matTooltip = "{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" ( click ) = " removeDescriptionTemplate ( sectionIndex , descriptionTemplateIndex ) " [ disabled ] = " formGroup . disabled " >
< mat-icon > delete< / mat-icon >
< / button >
< 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;" > {{descriptionTemplateIndex + 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-lg-6 col-xl-3" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE' | translate}}< / mat-label >
< app-single-auto-complete [ formControl ] = " descriptionTemplate . get ( ' descriptionTemplateGroupId ' ) " [ hidePlaceholder ] = " true " [ configuration ] = " descriptionTempalteGroupSingleAutocompleteConfiguration " ( optionActionClicked ) = " onPreviewDescriptionTemplate ( $ event , i ) " > < / app-single-auto-complete >
< mat-error * ngIf = "descriptionTemplate.get('descriptionTemplateGroupId').hasError('backendError')" > {{descriptionTemplate.get('descriptionTemplateGroupId').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('descriptionTemplateGroupId').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-12 col-lg-6 col-xl-3" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-LABEL' | translate}}< / mat-label >
< input matInput type = "text" name = "label" [ formControl ] = " descriptionTemplate . get ( ' label ' ) " >
< mat-error * ngIf = "descriptionTemplate.get('label').hasError('backendError')" > {{descriptionTemplate.get('label').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('label').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-12 col-lg-6 col-xl-3" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MIN-MULTIPLICITY' | translate}}< / mat-label >
< input matInput type = "number" min = "0" name = "minMultiplicity" [ formControl ] = " descriptionTemplate . get ( ' minMultiplicity ' ) " >
< mat-error * ngIf = "descriptionTemplate.get('minMultiplicity').hasError('backendError')" > {{descriptionTemplate.get('minMultiplicity').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('minMultiplicity').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-12 col-lg-6 col-xl-3" >
< mat-form-field class = "w-100" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.DESCRIPTION-TEMPLATE-MAX-MULTIPLICITY' | translate}}< / mat-label >
< input matInput type = "number" min = "1" name = "maxMultiplicity" [ formControl ] = " descriptionTemplate . get ( ' maxMultiplicity ' ) " >
< mat-error * ngIf = "descriptionTemplate.get('maxMultiplicity').hasError('backendError')" > {{descriptionTemplate.get('maxMultiplicity').getError('backendError').message}}< / mat-error >
< mat-error * ngIf = "descriptionTemplate.get('maxMultiplicity').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< / div >
< / div >
< div class = "col-12 col-xl-auto section-options-horizontal" >
< div class = "row" >
< div class = "col-auto" >
< button mat-icon-button class = "action-list-icon" matTooltip = "{{'DMP-BLUEPRINT-EDITOR.ACTIONS.REMOVE-DESCRIPTION-TEMPLATE' | translate}}" ( click ) = " removeDescriptionTemplate ( sectionIndex , descriptionTemplateIndex ) " [ disabled ] = " formGroup . disabled " >
< mat-icon > delete< / mat-icon >
< / button >
< / div >
< / div >
< / div >
< / div >
< mat-error * ngIf = "section.get('descriptionTemplates').hasError('backendError')" > {{section.get('descriptionTemplates').getError('backendError').message}}< / mat-error >
< / div >
< mat-error * ngIf = "section.get('descriptionTemplates').hasError('backendError')" > {{section.get('descriptionTemplates').getError('backendError').message}}< / mat-error >
< / div >
< div * ngIf = "section.get('hasTemplates').value == true" >
< mat-form-field class = "col-6 mt-3" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}< / mat-label >
< app-multiple-auto-complete [ formControl ] = " section . get ( ' prefillingSourcesIds ' ) " [ configuration ] = " prefillingSourceService . multipleAutocompleteConfiguration " > < / app-multiple-auto-complete >
< mat-error * ngIf = "section.get('prefillingSourcesIds').hasError('backendError')" > {{section.get('prefillingSourcesIds').getError('backendError').message}}< / mat-error >
< / mat-form-field >
< div class = "row" >
< div * ngIf = "section.get('hasTemplates').value == true" class = "col-lg-6 col-12" >
< mat-form-field class = "w-100 mt-3" >
< mat-label > {{'DMP-BLUEPRINT-EDITOR.FIELDS.PREFILLING-SOURCES' | translate}}< / mat-label >
< app-multiple-auto-complete [ formControl ] = " section . get ( ' prefillingSourcesIds ' ) " [ configuration ] = " prefillingSourceService . multipleAutocompleteConfiguration " > < / app-multiple-auto-complete >
< mat-error * ngIf = "section.get('prefillingSourcesIds').hasError('backendError')" > {{section.get('prefillingSourcesIds').getError('backendError').message}}< / mat-error >
< / mat-form-field >
< / div >
< / div >
< / mat-card-content >