2019-06-05 16:07:36 +02:00
< div class = "main-content" >
< div class = "container-fluid dmp-profile-editor" >
2021-06-22 15:48:46 +02:00
< div class = "row align-items-center mb-4" * ngIf = "formGroup" >
< div class = "col-auto" >
2023-10-04 08:43:16 +02:00
< h3 * ngIf = "isNew && !isClone" > {{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}< / h3 >
< h3 * ngIf = "isNew && isClone" >
< span > {{'DMP-PROFILE-EDITOR.TITLE.NEW-PROFILE-CLONE' | translate}}< / span >
{{formGroup.get('label').value}}
< / h3 >
2021-06-22 15:48:46 +02:00
< h3 * ngIf = "!isNew" > {{formGroup.get('label').value}}< / h3 >
< / div >
< 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-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}
< / button >
< / div >
2023-09-26 08:35:59 +02:00
< div class = "col-auto" * ngIf = "formGroup.get('status').value==1" >
2021-06-22 16:51:00 +02:00
< button mat-button class = "finalize-btn" ( click ) = " downloadXML ( ) "
2021-06-22 15:48:46 +02:00
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}< / button >
2023-09-26 08:35:59 +02:00
< / div >
2021-06-22 15:48:46 +02:00
< div * ngIf = "formGroup.get('status').value!=1" class = "col-auto" >
< button mat-button class = "finalize-btn" ( click ) = " finalize ( ) "
2023-09-11 07:59:47 +02:00
[disabled]="!this.isFormValid()" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}< / button >
2021-06-22 15:48:46 +02:00
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< form * ngIf = "formGroup" ( ngSubmit ) = " formSubmit ( ) " [ formGroup ] = " formGroup " >
2021-06-22 15:48:46 +02:00
< mat-card style = "padding: 2em;" >
2019-06-05 16:07:36 +02:00
<!-- <mat - card - header>
< mat-card-title * ngIf = "isNew" >
< h4 > {{'DMP-PROFILE-EDITOR.TITLE.NEW' | translate}}< / h4 >
< / mat-card-title >
< mat-card-title * ngIf = "!isNew" >
< h4 > {{formGroup.get('label').value}}< / h4 >
< / mat-card-title >
< / mat-card-header > -->
< mat-card-content >
2021-06-22 15:48:46 +02:00
< div class = "row" style = "gap:1em" >
2023-08-03 12:10:36 +02:00
< mat-form-field class = "col-lg-6" >
< mat-label > Name< / mat-label >
< input matInput type = "text" name = "label" formControlName = "label" required >
2023-09-11 07:59:47 +02:00
< mat-error * ngIf = "formGroup.get('label').hasError('required')" >
2019-06-05 16:07:36 +02:00
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
2023-07-25 14:51:29 +02:00
< h4 class = "col-12" > Sections< / h4 >
2023-09-11 07:59:47 +02:00
< ng-container formGroupName = "definition" >
< div formArrayName = "sections" style = "width: 100%;" cdkDropList ( cdkDropListDropped ) = " dropSections ( $ event ) " >
< div * ngFor = "let section of sectionsArray().controls; let sectionIndex=index;" class = "section-input" cdkDrag [ cdkDragDisabled ] = " viewOnly " >
< ng-container [ formGroupName ] = " sectionIndex " >
< div class = "col-12" >
< div class = "row" >
< mat-card class = "col-11" style = "width: 100%; margin-bottom: 1%;" >
< 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 = "col-12" >
< div class = "row" >
< div class = "col-6" >
< mat-form-field >
< mat-label > Section name< / mat-label >
< input matInput type = "text" name = "label" formControlName = "label" required >
< mat-error * ngIf = "section.get('label').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
< div class = "col-6" >
< mat-form-field >
< mat-label > Section description< / mat-label >
2023-10-04 08:43:16 +02:00
< input matInput type = "text" name = "description" formControlName = "description" >
2023-09-11 07:59:47 +02:00
< mat-error * ngIf = "section.get('description').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< / mat-form-field >
< / div >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< div class = "col-12" >
< div class = "row" >
2023-07-25 14:51:29 +02:00
2023-09-11 07:59:47 +02:00
< div class = "col-12" >
< div class = "row" >
< div class = "col-6" >
< mat-form-field >
< mat-label > System fields< / mat-label >
2023-09-21 08:31:30 +02:00
< mat-select multiple [ disabled ] = " viewOnly " [ value ] = " systemFieldListPerSection [ sectionIndex ] " >
2023-10-02 08:34:58 +02:00
< mat-option * ngFor = "let f of fieldList" [ disabled ] = " systemFieldDisabled ( f . type , sectionIndex ) " [ value ] = " f . type " ( click ) = " selectedFieldType ( f . type , sectionIndex ) " > {{f.label}}< / mat-option >
2023-09-11 07:59:47 +02:00
< / 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 >
<!-- <button mat - button class="action - btn" style="margin - left: 3%;" type="button" (click)="addExtraField(sectionIndex)">Add description templates</button> -->
< / div >
2023-07-25 14:51:29 +02:00
< / div >
2023-08-03 12:10:36 +02:00
< / div >
2023-07-25 14:51:29 +02:00
2023-09-11 07:59:47 +02:00
< div class = "col-12" >
2023-08-03 12:10:36 +02:00
2023-09-11 07:59:47 +02:00
< div formArrayName = "fields" cdkDropList ( cdkDropListDropped ) = " drop ( $ event , sectionIndex ) " >
< div * ngFor = "let field of fieldsArray(sectionIndex).controls; let fieldIndex=index;" cdkDrag [ cdkDragDisabled ] = " viewOnly " >
< ng-container [ formGroupName ] = " fieldIndex " >
< div class = "col-12" * ngIf = "fieldsArray(sectionIndex).length > 0" >
< div class = "row" >
< 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 >
2023-08-03 12:10:36 +02:00
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< ng-container * ngIf = "field.get('category').value === 0 || field.get('category').value === '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" 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 [ disabled ] = " field . get ( ' type ' ) . value = == 0 | | field . get ( ' type ' ) . value = == 1 " formControlName = "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" > {{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}< / span >
< / div >
< / ng-container >
< ng-container * ngIf = "field.get('category').value === 1 || field.get('category').value === '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 >
2023-09-12 14:38:23 +02:00
< input matInput type = "text" name = "placeholder" formControlName = "placeholder" >
2023-09-11 07:59:47 +02:00
< / mat-form-field >
< / div >
< div class = "col-2" >
< mat-form-field >
< mat-label > Description< / mat-label >
2023-09-22 08:31:12 +02:00
< input matInput type = "text" name = "description" formControlName = "description" >
2023-09-11 07:59:47 +02:00
< / 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" > {{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}< / span >
< / div >
< / ng-container >
2023-08-03 12:10:36 +02:00
2023-09-11 07:59:47 +02:00
< / div >
2023-08-03 12:10:36 +02:00
< / div >
2023-09-11 07:59:47 +02:00
< / ng-container >
< / div >
2023-08-03 12:10:36 +02:00
< / div >
2023-07-25 14:51:29 +02:00
< / div >
2023-09-11 07:59:47 +02:00
2023-07-25 14:51:29 +02:00
< / div >
2023-09-11 07:59:47 +02:00
< / div >
2023-07-25 14:51:29 +02:00
2023-09-11 07:59:47 +02:00
< div class = "col-12" >
< div class = "row" >
< div class = "col-12" >
2023-10-02 12:57:00 +02:00
< mat-checkbox formControlName = "hasTemplates" ( change ) = " checkForProfiles ( $ event , sectionIndex ) " >
2023-09-11 07:59:47 +02:00
Description Templates
< / mat-checkbox >
< / div >
< / div >
2023-08-03 12:10:36 +02:00
< / div >
2023-09-11 07:59:47 +02:00
< div class = "col-12" * ngIf = "section.get('hasTemplates').value == true" >
< div class = "row" >
< div class = "col-12" >
< mat-form-field >
< mat-label > Description Templates< / mat-label >
2023-11-03 12:24:01 +01:00
< app-multiple-auto-complete placeholder = "Description Templates" [ disabled ] = " viewOnly " [ value ] = " descriptionTemplatesPerSection [ sectionIndex ] " [ hidePlaceholder ] = " true " required = 'false' [ configuration ] = " profilesAutoCompleteConfiguration " ( optionRemoved ) = " onRemoveTemplate ( $ event , sectionIndex ) " ( optionActionClicked ) = " onPreviewTemplate ( $ event , sectionIndex ) " ( optionSelected ) = " onOptionSelected ( $ event , sectionIndex ) " >
2023-09-11 07:59:47 +02:00
< / app-multiple-auto-complete >
<!-- <button matSuffix class="input - btn" (click)="allAvailableProfiles($event)">
< mat-icon class = "icon-btn" > view_list< / mat-icon >
< / button > -->
< / mat-form-field >
< / div >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< ng-container formArrayName = "descriptionTemplates" >
< div * ngFor = "let descriptionTemplate of descriptionTemplatesArray(sectionIndex).controls; let j=index;" class = "section-input" style = "width: 100%;" >
< ng-container [ formGroupName ] = " j " >
< div class = "col-12" * ngIf = "descriptionTemplatesArray(sectionIndex).length > 0" >
< 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" formControlName = "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" formControlName = "minMultiplicity" >
< / mat-form-field >
< / div >
< div class = "col-4" >
< mat-form-field >
< mat-label > Max Multiplicity< / mat-label >
2023-09-22 08:31:12 +02:00
< input matInput type = "number" min = "1" name = "maxMultiplicity" formControlName = "maxMultiplicity" >
2023-09-11 07:59:47 +02:00
< / mat-form-field >
< / div >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< / ng-container >
< / div >
< / ng-container >
< / 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" > {{'DATASET-PROFILE-EDITOR.STEPS.TOOLKIT.DELETE' | translate}}< / span >
< / div >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
< / div >
< / div >
2023-09-11 07:59:47 +02:00
< / ng-container >
< / div >
2023-07-25 14:51:29 +02:00
< / div >
2023-09-11 07:59:47 +02:00
< / ng-container >
2019-01-18 18:03:45 +01:00
2019-06-05 16:07:36 +02:00
< div class = "col-12" >
2023-07-25 14:51:29 +02:00
< div class = "row" >
< div class = "col-auto" >
2023-09-11 07:59:47 +02:00
< button mat-button class = "action-btn" type = "button" ( click ) = " addSection ( ) " [ disabled ] = " viewOnly " > Add section< / button >
2023-07-25 14:51:29 +02:00
< / div >
< / div >
< / div >
<!-- <div class="col - 12">
2019-07-23 17:01:51 +02:00
< div class = "row" * ngFor = "let fieldFormGroup of formGroup.get('definition').get('fields')['controls'];let i=index" >
2019-06-05 16:07:36 +02:00
< div class = "col-10" >
< div class = "row" >
< mat-form-field class = "col" >
2019-07-23 17:01:51 +02:00
< input matInput placeholder = "{{'DMP-PROFILE-EDITOR.FIELDS.LABEL' | translate}}" type = "text" name = "label" [ formControl ] = " fieldFormGroup . get ( ' label ' ) "
required>
2019-06-05 16:07:36 +02:00
< mat-error * ngIf = "fieldFormGroup.get('label').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< mat-error * ngIf = "fieldFormGroup.get('label').hasError('backendError')" >
{{fieldFormGroup.get('label').getError('backendError').message}}
< / mat-error >
< / mat-form-field >
< mat-form-field class = "col" >
2019-07-23 17:01:51 +02:00
< mat-select placeholder = "{{'DMP-PROFILE-EDITOR.FIELDS.TYPE' | translate}}" [ formControl ] = " fieldFormGroup . get ( ' type ' ) " required >
< mat-option * ngFor = "let fieldType of getDMPProfileFieldTypeValues()" [ value ] = " fieldType " >
{{ getDMPProfileFieldTypeWithLanguage(fieldType) | translate}}
< / mat-option >
2019-06-05 16:07:36 +02:00
< / mat-select >
< mat-error * ngIf = "fieldFormGroup.get('type').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< mat-error * ngIf = "fieldFormGroup.get('type').hasError('backendError')" >
{{fieldFormGroup.get('type').getError('backendError').message}}
< / mat-error >
< / mat-form-field >
< mat-form-field class = "col" >
2019-07-23 17:01:51 +02:00
< mat-select placeholder = "{{'DMP-PROFILE-EDITOR.FIELDS.DATATYPE' | translate}}" [ formControl ] = " fieldFormGroup . get ( ' dataType ' ) "
required>
< mat-option * ngFor = "let fieldDataType of getDMPProfileFieldDataTypeValues()" [ value ] = " fieldDataType " >
{{ getDMPProfileFieldDataTypeWithLanguage(fieldDataType) | translate}}
< / mat-option >
2019-06-05 16:07:36 +02:00
< / mat-select >
< mat-error * ngIf = "fieldFormGroup.get('dataType').hasError('required')" >
{{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
< mat-error * ngIf = "fieldFormGroup.get('dataType').hasError('backendError')" >
{{fieldFormGroup.get('dataType').getError('backendError').message}}
< / mat-error >
< / mat-form-field >
< div class = "centered-row-item col-auto" >
< mat-checkbox [ formControl ] = " fieldFormGroup . get ( ' required ' ) " >
2019-07-23 17:01:51 +02:00
{{'DMP-PROFILE-EDITOR.FIELDS.REQUIRED' | translate}}
< / mat-checkbox >
< / div >
< div * ngIf = "isExternalAutocomplete(fieldFormGroup)" class = "row" >
< app-dmp-profile-external-autocomplete-field-editor-component [ form ] = " fieldFormGroup " >
< / app-dmp-profile-external-autocomplete-field-editor-component >
2019-06-05 16:07:36 +02:00
< / div >
< / div >
< / div >
< div class = "col-2" >
< div class = "row" >
< div class = "col-auto" * ngIf = "!isNew" >
2019-07-23 17:01:51 +02:00
< button mat-icon-button type = "button" ( click ) = " removeField ( i ) " [ disabled ] = " viewOnly " >
2019-06-05 16:07:36 +02:00
< mat-icon class = "mat-24" > delete< / mat-icon >
< / button >
< / div >
2019-07-23 17:01:51 +02:00
< div class = "col-auto" * ngIf = "!isNew && formGroup.get('status').value==0 && i == (formGroup.get('definition').get('fields')['controls'].length - 1)" >
< button mat-mini-fab color = "primary" type = "button" ( click ) = " addField ( ) " [ disabled ] = " viewOnly " >
2019-06-05 16:07:36 +02:00
< mat-icon class = "mat-24" > add< / mat-icon >
< / button >
< / div >
< div class = "col-auto" * ngIf = "isNew && i != 0" >
2019-07-23 17:01:51 +02:00
< button mat-mini-fab class = "remove" type = "button" ( click ) = " removeField ( i ) " >
2019-06-05 16:07:36 +02:00
< mat-icon class = "mat-24" > remove< / mat-icon >
< / button >
< / div >
2019-07-23 17:01:51 +02:00
< div class = "col-auto" * ngIf = "isNew && i == (formGroup.get('definition').get('fields')['controls'].length - 1)" >
< button mat-mini-fab color = "primary" type = "button" ( click ) = " addField ( ) " [ disabled ] = " viewOnly " >
2019-06-05 16:07:36 +02:00
< mat-icon class = "mat-24" > add< / mat-icon >
< / button >
< / div >
< / div >
< / div >
2019-01-18 18:03:45 +01:00
< / div >
2023-07-25 14:51:29 +02:00
< / div > -->
2019-01-18 18:03:45 +01:00
< / div >
2021-06-22 15:48:46 +02:00
< div class = "row mt-4" >
2019-07-23 17:01:51 +02:00
< div class = "col-auto" >
2021-06-22 15:48:46 +02:00
< button mat-button class = "action-btn" ( click ) = " cancel ( ) " type = "button" > {{'DMP-PROFILE-EDITOR.ACTIONS.CANCEL' | translate}}< / button >
2019-07-23 17:01:51 +02:00
< / div >
2019-01-18 18:03:45 +01:00
< div class = "col" > < / div >
2021-06-22 15:48:46 +02:00
<!-- <div class="col - auto" *ngIf="!isNew">
2019-07-23 17:01:51 +02:00
< button mat-raised-button color = "primary" type = "button" ( click ) = " delete ( ) " > {{'DMP-PROFILE-EDITOR.ACTIONS.DELETE' | translate}}< / button >
2019-06-05 16:07:36 +02:00
< / div >
2019-07-23 17:01:51 +02:00
< button mat-raised-button * ngIf = "formGroup.get('status').value!=1" class = "col-auto" color = "primary" ( click ) = " finalize ( ) "
[disabled]="!formGroup.valid" type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.FINALIZE' | translate }}< / button >
< button mat-raised-button * ngIf = "formGroup.get('status').value==1" class = "col-auto" color = "primary" ( click ) = " downloadXML ( ) "
type="button">{{'DMP-PROFILE-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}< / button >
2019-06-05 16:07:36 +02:00
< div class = "col-auto" * ngIf = "!viewOnly" >
< button mat-raised-button color = "primary" type = "submit" [ disabled ] = " ! formGroup . valid " >
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
< / button >
2021-06-22 15:48:46 +02:00
< / div > -->
< div class = "col-auto" * ngIf = "!viewOnly" >
2023-09-11 07:59:47 +02:00
< button mat-button class = "action-btn" type = "submit" >
2021-06-22 15:48:46 +02:00
{{'DMP-PROFILE-EDITOR.ACTIONS.SAVE' | translate}}
< / button >
2019-06-05 16:07:36 +02:00
< / div >
2019-01-18 18:03:45 +01:00
< / div >
2019-06-05 16:07:36 +02:00
< / mat-card-content >
< / mat-card >
< / form >
< / div >
< / div >