2023-10-24 09:40:26 +02:00
<!-- <div class="main - content"> -->
< div class = "container-fluid dmp-blueprint-editor" >
< div class = "row align-items-center mb-4" * ngIf = "formGroup" >
< div class = "col-auto" >
< h3 * ngIf = "isNew && !isClone" > {{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}< / h3 >
< h3 * ngIf = "isNew && isClone" >
< span > {{'DMP-BLUEPRINT-EDITOR.TITLE.CLONE' | translate}}< / span >
{{formGroup.get('label').value}}
< / h3 >
< h3 * ngIf = "!isNew" > {{formGroup.get('label').value}}< / h3 >
2021-06-22 15:48:46 +02:00
< / div >
2023-10-24 09:40:26 +02:00
< div class = "col" > < / div >
< div class = "col-auto" * ngIf = "!isNew" >
< button mat-button class = "action-btn" type = "button" ( click ) = " delete ( ) " >
< mat-icon > delete< / mat-icon >
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
< / button >
< / div >
< div class = "col-auto" * ngIf = "formGroup.get('status').value==1" >
< button mat-button class = "finalize-btn" ( click ) = " downloadXML ( ) " type = "button" > {{'DMP-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}< / button >
< / div >
< div * ngIf = "formGroup.get('status').value!=1" class = "col-auto" >
< button mat-button class = "finalize-btn" ( click ) = " finalize ( ) " [ disabled ] = " ! this . isFormValid ( ) " type = "button" > {{'DMP-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}< / button >
< / div >
< / div >
< form * ngIf = "formGroup" ( ngSubmit ) = " formSubmit ( ) " [ formGroup ] = " formGroup " >
< mat-card >
<!-- <mat - card - header>
2019-06-05 16:07:36 +02:00
< mat-card-title * ngIf = "isNew" >
2023-10-20 17:01:09 +02:00
< h4 > {{'DMP-BLUEPRINT-EDITOR.TITLE.NEW' | translate}}< / h4 >
2019-06-05 16:07:36 +02:00
< / mat-card-title >
< mat-card-title * ngIf = "!isNew" >
< h4 > {{formGroup.get('label').value}}< / h4 >
< / mat-card-title >
< / mat-card-header > -->
2023-10-24 09:40:26 +02:00
< mat-card-content >
< div class = "row" >
< mat-form-field class = "col-lg-6" >
< mat-label > Name< / mat-label >
< input matInput type = "text" name = "label" formControlName = "label" required >
< mat-error * ngIf = "formGroup.get('label').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< h4 class = "col-12" > Sections< / h4 >
< div class = "col-12" cdkDropList ( cdkDropListDropped ) = " dropSections ( $ event ) " >
< div * ngFor = "let section of formGroup.get('definition').get('sections').controls; let sectionIndex=index;" class = "row section-input" cdkDrag [ cdkDragDisabled ] = " viewOnly " >
< div class = "col-12" >
< mat-card >
< mat-card-header >
< mat-card-title > Section {{sectionIndex + 1}}< / mat-card-title >
< mat-icon cdkDragHandle style = "cursor: move; color: #129d99;" > drag_indicator< / mat-icon >
< / mat-card-header >
< div class = "row" >
< mat-form-field class = "col-6" >
< mat-label > Section name< / mat-label >
< input matInput type = "text" name = "label" [ formControl ] = " section . get ( ' label ' ) " required >
< mat-error * ngIf = "section.get('label').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< mat-form-field class = "col-6" >
< mat-label > Section description< / mat-label >
< input matInput type = "text" name = "description" [ formControl ] = " section . get ( ' description ' ) " >
< mat-error * ngIf = "section.get('description').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
2023-09-11 07:59:47 +02:00
< div class = "col-12" >
< div class = "row" >
2023-10-24 09:40:26 +02:00
< div class = "col-12" >
< div class = "row" >
< div class = "col-6" >
< mat-form-field >
< mat-label > System fields< / mat-label >
< mat-select multiple [ disabled ] = " viewOnly " [ value ] = " systemFieldListPerSection [ sectionIndex ] " >
< mat-option * ngFor = "let f of fieldList" [ disabled ] = " systemFieldDisabled ( f . type , sectionIndex ) " [ value ] = " f . type " ( click ) = " selectedFieldType ( f . type , sectionIndex ) " > {{f.label}}< / mat-option >
< / mat-select >
< mat-error * ngIf = "fieldsArray(sectionIndex).hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-6" >
< button mat-button class = "action-btn" type = "button" ( click ) = " addExtraField ( sectionIndex ) " [ disabled ] = " viewOnly " > Add extra field< / button >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
2023-10-24 09:40:26 +02:00
< / div >
2023-07-25 14:51:29 +02:00
2023-10-24 09:40:26 +02:00
< div class = "col-12" >
2023-07-25 14:51:29 +02:00
2023-10-24 09:40:26 +02:00
< div cdkDropList ( cdkDropListDropped ) = " drop ( $ event , sectionIndex ) " >
< div * ngFor = "let field of section.get('fields').controls; let fieldIndex=index;" cdkDrag [ cdkDragDisabled ] = " viewOnly " >
2023-09-11 07:59:47 +02:00
< div class = "col-12" >
< div class = "row" >
2023-10-24 09:40:26 +02:00
< div class = "col-xx-1" style = "padding-left: 0;" >
< div class = "row" >
< div class = "col-4" >
< span style = "font-size: 15px;" > {{fieldIndex + 1}}< / span >
< / div >
< div class = "col-8" >
< mat-icon cdkDragHandle style = "cursor: move; color: #129d99;" > drag_indicator< / mat-icon >
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< / div >
2023-07-25 14:51:29 +02:00
2023-08-03 12:10:36 +02:00
2023-10-24 09:40:26 +02:00
< ng-container * ngIf = "field.get('category').value === dmpBlueprintSectionFieldCategory.SYSTEM" >
< div class = "col-2" >
< mat-form-field >
< mat-label > System Field< / mat-label >
< input matInput disabled value = "{{transfromEnumToString(field.get('type').value)}}" type = "text" name = "name" >
< / mat-form-field >
< / div >
< div class = "col-2" >
< mat-form-field >
< mat-label > Label< / mat-label >
< input matInput type = "text" name = "label" [ formControl ] = " field . get ( ' label ' ) " required >
< mat-error * ngIf = "field.get('label').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-2" >
< mat-form-field >
< mat-label > Placeholder< / mat-label >
< input matInput type = "text" name = "placeholder" [ formControl ] = " field . get ( ' placeholder ' ) " >
< / mat-form-field >
< / div >
< div class = "col-2" >
< mat-form-field >
< mat-label > Description< / mat-label >
< input matInput type = "text" name = "description" [ formControl ] = " field . get ( ' description ' ) " >
< / mat-form-field >
< / div >
< div class = "centered-row-item col-1" >
< mat-checkbox [ disabled ] = " field . get ( ' type ' ) . value = == 0 | | field . get ( ' type ' ) . value = == 1 " [ formControl ] = " field . get ( ' required ' ) " > Required< / mat-checkbox >
< / div >
< div [ hidden ] = " viewOnly " class = "field-delete col-1" ( click ) = " removeSystemFieldWithIndex ( sectionIndex , fieldIndex ) " >
< mat-icon class = "field-delete-icon" > delete< / mat-icon >
< span class = "field-delete-text" > {{'DMP-BLUEPRINT-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}< / span >
< / div >
< / ng-container >
2023-08-03 12:10:36 +02:00
2023-10-24 09:40:26 +02:00
< ng-container * ngIf = "field.get('category').value === dmpBlueprintSectionFieldCategory.EXTRA" >
< div class = "col-2" >
< mat-form-field >
< mat-label > Type< / mat-label >
< mat-select placeholder = "Type" formControlName = "type" required >
< mat-option * ngFor = "let extraFieldType of getExtraFieldTypes()" [ value ] = " extraFieldType " >
{{getExtraFieldTypeValue(extraFieldType)}}
< / mat-option >
< / mat-select >
< mat-error * ngIf = "field.get('type').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-2" >
< mat-form-field >
< mat-label > Label< / mat-label >
< input matInput type = "text" name = "label" formControlName = "label" required >
< mat-error * ngIf = "field.get('label').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-2" >
< mat-form-field >
< mat-label > Placeholder< / mat-label >
< input matInput type = "text" name = "placeholder" formControlName = "placeholder" >
< / mat-form-field >
< / div >
< div class = "col-2" >
< mat-form-field >
< mat-label > Description< / mat-label >
< input matInput type = "text" name = "description" formControlName = "description" >
< / mat-form-field >
< / div >
< div class = "centered-row-item col-1" >
< mat-checkbox formControlName = "required" >
Required
< / mat-checkbox >
< / div >
< div [ hidden ] = " viewOnly " class = "field-delete col-1" ( click ) = " removeExtraField ( sectionIndex , fieldIndex ) " >
< mat-icon class = "field-delete-icon" > delete< / mat-icon >
< span class = "field-delete-text" > {{'DMP-BLUEPRINT-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}< / span >
< / div >
< / ng-container >
2023-08-03 12:10:36 +02:00
2023-10-24 09:40:26 +02:00
< / div >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< / div >
2023-07-25 14:51:29 +02:00
2023-10-24 09:40:26 +02:00
< / div >
< / div >
2023-09-11 07:59:47 +02:00
2023-10-24 09:40:26 +02:00
< / div >
< / div >
< div class = "col-12" >
< div class = "row" >
< div class = "col-12" >
< mat-checkbox [ formControl ] = " section . get ( ' hasTemplates ' ) " ( change ) = " checkForBlueprints ( $ event , sectionIndex ) " >
Description Templates
< / mat-checkbox >
< / div >
< / div >
< / div >
<!-- <div class="col - 12" *ngIf="section.get('hasTemplates').value == true">
2023-09-11 07:59:47 +02:00
< div class = "row" >
< div class = "col-12" >
< mat-form-field >
< mat-label > Description Templates< / mat-label >
2023-10-20 17:01:09 +02:00
< app-multiple-auto-complete placeholder = "Description Templates" [ disabled ] = " viewOnly " [ value ] = " descriptionTemplatesPerSection [ sectionIndex ] " [ hidePlaceholder ] = " true " required = 'false' [ configuration ] = " blueprintsAutoCompleteConfiguration " ( optionRemoved ) = " onRemoveTemplate ( $ event , sectionIndex ) " ( optionSelected ) = " onOptionSelected ( $ event , sectionIndex ) " >
2023-09-11 07:59:47 +02:00
< / app-multiple-auto-complete >
< / mat-form-field >
< / div >
2023-07-25 14:51:29 +02:00
< / div >
2023-10-24 09:40:26 +02:00
< / div > -->
< div * ngFor = "let descriptionTemplate of section.get('descriptionTemplates').controls; let j=index;" class = "section-input" style = "width: 100%;" >
< div class = "col-12" >
< div class = "row" >
< div class = "col-4" >
< mat-form-field >
< mat-label > Label< / mat-label >
< input matInput type = "text" value = "descriptionTemplate.get('label')" name = "label" [ formControl ] = " descriptionTemplate . get ( ' label ' ) " >
< / mat-form-field >
< / div >
< div class = "col-4" >
< mat-form-field >
< mat-label > Min Multiplicity< / mat-label >
< input matInput type = "number" min = "0" name = "minMultiplicity" [ formControl ] = " descriptionTemplate . get ( ' minMultiplicity ' ) " >
< / mat-form-field >
< / div >
< div class = "col-4" >
< mat-form-field >
< mat-label > Max Multiplicity< / mat-label >
< input matInput type = "number" min = "1" name = "maxMultiplicity" [ formControl ] = " descriptionTemplate . get ( ' maxMultiplicity ' ) " >
< / mat-form-field >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
< / div >
2023-10-24 09:40:26 +02:00
< / div >
< / mat-card >
< div class = "col-1" >
< div class = "row" >
<!-- <div class="col - auto dlt - section - btn">
< button mat-button class = "action-btn" type = "button" click = "removeSection(sectionIndex)" > Delete< / button >
< / div > -->
< div [ hidden ] = " viewOnly " class = "action-list-item col-auto dlt-section-btn" ( click ) = " removeSection ( sectionIndex ) " [ disabled ] = " viewOnly " >
< mat-icon class = "action-list-icon" > delete< / mat-icon >
< span class = "action-list-text" > {{'DMP-BLUEPRINT-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}< / span >
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< / div >
2023-07-25 14:51:29 +02:00
< / div >
2019-01-18 18:03:45 +01:00
2023-07-25 14:51:29 +02:00
< / div >
2019-01-18 18:03:45 +01:00
< / div >
2023-10-24 09:40:26 +02:00
< div class = "col-12" >
< div class = "row" >
< div class = "col-auto" >
< button mat-button class = "action-btn" type = "button" ( click ) = " addSection ( ) " [ disabled ] = " viewOnly " > Add section< / button >
< / div >
2019-06-05 16:07:36 +02:00
< / div >
2019-01-18 18:03:45 +01:00
< / div >
2023-10-24 09:40:26 +02:00
< / div >
< div class = "row mt-4" >
< div class = "col-auto" >
< button mat-button class = "action-btn" ( click ) = " cancel ( ) " type = "button" > {{'DMP-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}< / button >
< / div >
< div class = "col" > < / div >
< div class = "col-auto" * ngIf = "!viewOnly" >
< button mat-button class = "action-btn" type = "submit" >
{{'DMP-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
< / button >
< / div >
< / div >
< / mat-card-content >
< / mat-card >
< / form >
2019-06-05 16:07:36 +02:00
< / div >
2023-10-24 09:40:26 +02:00
<!-- </div> -->