2019-01-18 18:03:45 +01:00
< div [ formGroup ] = " form " class = "row dataset-profile-editor" >
< h4 style = "font-weight: bold" class = "col-12" > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.TITLE' | translate}}< / h4 >
< mat-form-field class = "col-md-3" >
2019-01-29 17:34:19 +01:00
< input matInput type = "text" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ID' | translate}}"
formControlName="id" required>
< mat-error * ngIf = "form.hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field class = "col-md-3" >
2019-01-29 17:34:19 +01:00
< input matInput type = "text" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.TITLE' | translate}}"
formControlName="title">
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field class = "col-md-3" >
2019-01-29 17:34:19 +01:00
< mat-select placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.PAGE' | translate}}" formControlName = "page"
required>
2019-01-18 18:03:45 +01:00
< mat-option * ngFor = "let pageGroup of form.root.get('pages')['controls'];" [ value ] = " pageGroup . get ( ' id ' ) . value " > {{pageGroup.get('title').value}}< / mat-option >
< / mat-select >
2019-01-29 17:34:19 +01:00
< mat-error * ngIf = "form.hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field class = "col-md-3" >
2019-01-29 17:34:19 +01:00
< input matInput type = "number" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.ORDER' | translate}}"
formControlName="ordinal">
2019-01-18 18:03:45 +01:00
< / mat-form-field >
<!-- <div class="col - md - 6">
< label > Default Visibility< / label >
< mat-radio-group formControlName = "defaultVisibility" class = "full-width" >
< mat-radio-button [ value ] = " true " > true< / mat-radio-button >
< mat-radio-button [ value ] = " false " > false< / mat-radio-button >
< / mat-radio-group >
< / div > -->
2019-01-29 17:34:19 +01:00
< h4 style = "font-weight: bold" class = "col-12" > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.FIELDS-TITLE' |
translate}}< / h4 >
2019-01-18 18:03:45 +01:00
< div class = "col-12" >
< mat-card class = "field-card" * ngFor = "let fieldControl of form.get('fieldSets')['controls'] let i=index;" >
< div class = "row" >
2019-01-31 11:29:35 +01:00
< mat-card-title class = "col" > {{i + 1}}. {{getFieldTile(fieldControl, i)}}< / mat-card-title >
2019-02-01 09:29:00 +01:00
< button mat-icon-button type = "button" class = "deleteBtn col-auto" ( click ) = " deleteFieldSet ( i ) ; " >
2019-01-31 11:29:35 +01:00
< mat-icon > delete< / mat-icon >
< / button >
2019-01-18 18:03:45 +01:00
< app-dataset-profile-editor-composite-field-component class = "col-12" [ form ] = " fieldControl " [ indexPath ] = " indexPath + ' cf ' + i " > < / app-dataset-profile-editor-composite-field-component >
< / div >
< / mat-card >
< / div >
2019-01-29 17:34:19 +01:00
< div class = "col-12" > < button mat-button class = "full-width" ( click ) = " addField ( ) " > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-FIELD'
| translate}}< / button > < / div >
< h4 style = "font-weight: bold" class = "col-12" > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.FIELDS.SUB-SECTIONS-TITLE' |
translate}}< / h4 >
2019-01-18 18:03:45 +01:00
< div * ngIf = "dataModel.sections.length > 0" class = "col-12" >
< mat-expansion-panel * ngFor = "let section of dataModel.sections; let i=index;" # panel >
< mat-expansion-panel-header >
2019-01-31 11:29:35 +01:00
< mat-panel-title > {{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}< / mat-panel-title >
2019-01-18 18:03:45 +01:00
< div class = "row" >
2019-01-31 11:29:35 +01:00
<!-- <span class="col">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</span> -->
2019-02-01 09:29:00 +01:00
< button mat-icon-button type = "button" class = "deleteBtn col-auto" ( click ) = " DeleteSectionInSection ( i ) ; " >
2019-01-18 18:03:45 +01:00
< mat-icon > delete< / mat-icon >
< / button >
< / div >
< / mat-expansion-panel-header >
< div id = "{{indexPath + 's' + i}}" * ngIf = "panel.expanded" class = "row" >
2019-01-29 17:34:19 +01:00
< app-dataset-profile-editor-section-component class = "col-12" [ form ] = " form . get ( ' sections ' ) . get ( ' ' + i ) " [ dataModel ] = " section "
[indexPath]="indexPath + 's' + i">< / app-dataset-profile-editor-section-component >
2019-01-18 18:03:45 +01:00
< / div >
< / mat-expansion-panel >
< / div >
2019-01-29 17:34:19 +01:00
< div class = "col-12" > < button mat-button class = "full-width" ( click ) = " addSectioninSection ( ) " > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.SECTION.ACTIONS.ADD-SUB-SECTION'
| translate}}< / button > < / div >
2019-01-18 18:03:45 +01:00
< / div >