2021-02-12 12:23:39 +01:00
<!-- TO LINK -->
<!-- <div class="row">
2019-03-08 16:09:34 +01:00
< h4 * ngIf = "isComposite" class = "col-auto titleStile" > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.TITLE' | translate}}< / h4 >
< h4 * ngIf = "!isComposite" class = "col-auto titleStile" > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SIMPLE-FIELD-TITLE' | translate}}< / h4 >
< mat-checkbox class = "col-auto" [ ( ngModel ) ] = " isComposite " ( ngModelChange ) = " onIsCompositeChange ( isComposite ) " [ disabled ] = " viewOnly " > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-CHECKBOX' | translate}}< / mat-checkbox >
< mat-checkbox class = "col-auto" [ ( ngModel ) ] = " isMultiplicityEnabled " ( ngModelChange ) = " onIsMultiplicityEnabledChange ( isMultiplicityEnabled ) "
[disabled]="viewOnly">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}< / mat-checkbox >
2019-10-16 16:45:08 +02:00
< mat-checkbox class = "col" [ formControl ] = " this . form . get ( ' hasCommentField ' ) " > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}< / mat-checkbox >
2021-02-12 12:23:39 +01:00
< / div > -->
<!-- TO LINK -->
<!--
2019-01-18 18:03:45 +01:00
< div class = "row" >
< mat-form-field * ngIf = "isComposite" class = "col" >
2019-01-29 17:34:19 +01:00
< input matInput type = "string" placeholder = "Id" [ formControl ] = " form . get ( ' id ' ) " required >
< mat-error * ngIf = "form.get('id').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}< / mat-error >
2019-02-04 17:10:22 +01:00
< mat-error * ngIf = "form.get('id').hasError('pattern')" > {{'GENERAL.VALIDATION.PATTERN-_' | translate}}< / mat-error >
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field * ngIf = "isComposite" class = "col" >
2019-01-29 17:34:19 +01:00
< input matInput type = "text" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-TITLE' | translate}}"
[formControl]="this.form.get('title')">
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field * ngIf = "!isComposite" class = "col" >
2019-01-29 17:34:19 +01:00
< input matInput type = "text" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.FIELD-TITLE' | translate}}"
[formControl]="this.form.get('title')">
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field * ngIf = "isMultiplicityEnabled" class = "col" >
2019-01-29 17:34:19 +01:00
< input matInput placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
type="number" [formControl]="form.get('multiplicity').get('min')" required>
2019-03-08 16:09:34 +01:00
< mat-error * ngIf = "form.get('multiplicity').get('min').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}
< / mat-error >
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field * ngIf = "isMultiplicityEnabled" class = "col" >
2019-01-29 17:34:19 +01:00
< input matInput placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
2019-03-08 16:09:34 +01:00
< mat-error * ngIf = "form.get('multiplicity').get('max').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}
< / mat-error >
2019-01-18 18:03:45 +01:00
< / mat-form-field >
< mat-form-field class = "col" >
2019-01-29 17:34:19 +01:00
< input matInput type = "number" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ORDER' | translate}}"
2019-10-16 10:59:22 +02:00
[formControl]="this.form.get('ordinal')" required>
2019-01-18 18:03:45 +01:00
< / mat-form-field >
2021-02-12 12:23:39 +01:00
< / div > -->
<!-- ID TOP RIGHT CORNER -->
2021-02-19 15:35:14 +01:00
<!-- <div class="field - id - container">
2021-02-12 12:23:39 +01:00
{{this.form.get('id').value}}
< button mat-mini-fab class = "field-id-container-icon" >
< mat-icon > delete< / mat-icon >
< / button >
2021-02-19 15:35:14 +01:00
< / div > -->
2021-02-12 12:23:39 +01:00
<!-- MAIN CONTENT -->
< div class = "main-content-page" >
< div style = "position: relative; padding: 3em 0em;" class = "col-9" >
<!-- TITLE -->
< div class = "row" >
< div class = "col-auto d-flex" >
< div class = "align-self-center" >
{{numbering}}
2019-01-18 18:03:45 +01:00
< / div >
< / div >
2021-02-12 12:23:39 +01:00
< mat-form-field class = "col" appearance = "none" >
< input matInput type = "text" placeholder = "Title"
[formControl]="this.form.get('title')">
< / mat-form-field >
< / div >
< div class = "row" >
< mat-form-field class = "col" appearance = "legacy" >
< input matInput type = "text" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}"
[formControl]="this.form.get('description')">
< / mat-form-field >
< / div >
2021-02-19 15:35:14 +01:00
< div class = "row" * ngIf = "showExtendedDescription" >
2021-02-12 12:23:39 +01:00
< mat-form-field class = "col" appearance = "legacy" >
< input matInput type = "text" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}"
[formControl]="this.form.get('extendedDescription')"/>
< / mat-form-field >
< / div >
2021-02-19 15:35:14 +01:00
< div class = "row" * ngIf = "showAdditionalInfo" >
2021-02-12 12:23:39 +01:00
< mat-form-field class = "col" appearance = "legacy" >
< input matInput type = "text" placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}"
[formControl]="this.form.get('additionalInformation')"/>
< / mat-form-field >
< / div >
< div class = "row" >
< mat-form-field * ngIf = "isMultiplicityEnabled" class = "col" appearance = "legacy" >
< input matInput placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}"
type="number" [formControl]="form.get('multiplicity').get('min')" required>
< mat-error * ngIf = "form.get('multiplicity').get('min').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}
< / mat-error >
< / mat-form-field >
< mat-form-field * ngIf = "isMultiplicityEnabled" class = "col" appearance = "legacy" >
< input matInput placeholder = "{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}"
type="number" [formControl]="this.form.get('multiplicity').get('max')" required>
< mat-error * ngIf = "form.get('multiplicity').get('max').hasError('required')" > {{'GENERAL.VALIDATION.REQUIRED' | translate}}
< / mat-error >
< / mat-form-field >
< / div >
2019-01-18 18:03:45 +01:00
< / div >
2021-02-12 12:23:39 +01:00
<!-- FIELDS DETAILS AND ACTIONS -->
< div class = "row" >
<!-- FIELDS -->
< div class = "col" >
< div class = "" >
2021-02-18 16:13:56 +01:00
< ng-container * ngFor = "let field of form.get('fields')['controls']; let i=index" >
< div class = "row field-container bg-white" style = "position: relative;" ( click ) = " setTargetField ( field ) "
2021-02-12 12:23:39 +01:00
[ngClass]="{'field-container-active': field.get('id').value === targetField?.get('id').value}">
2021-02-19 15:35:14 +01:00
<!-- <div class="field - id - container">
{{form.get('fields').get(''+i).get('id').value}} -->
2021-02-12 12:23:39 +01:00
<!-- <button mat - mini - fab class="field - id - container - icon" (click)="DeleteField(i)">
< mat-icon > delete< / mat-icon >
< / button > -->
2021-02-19 15:35:14 +01:00
<!-- </div> -->
2021-02-12 12:23:39 +01:00
<!-- *ngIf="!isComposite" -->
< app-dataset-profile-editor-field-component class = "col-12"
[form]="form.get('fields').get(''+i)" [showOrdinal]="false"
[indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly"
[expandView]="targetField?.get('id').value === field.get('id').value">
< / app-dataset-profile-editor-field-component >
< / div >
< / ng-container >
<!--
< div * ngIf = "isComposite" class = "row" >
< h4 class = "col-12 titleStile" > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.SUB-FIELDS-TITLE' | translate}}
< / h4 >
< div class = "col-12" >
< mat-expansion-panel * ngFor = "let field of form.get('fields')['controls'] let i=index;" # panel class = "field-container" >
< div class = "field-id-container" >
random id
< / div >
< mat-expansion-panel-header >
< mat-panel-title class = "cardTitle" > {{i + 1}}. {{getFieldTile(field, i)}}< / mat-panel-title >
< div class = "row" >
< button mat-icon-button type = "button" class = "deleteBtn col-auto" ( click ) = " DeleteField ( i ) ; " [ disabled ] = " viewOnly " >
< mat-icon > delete< / mat-icon >
< / button >
< / div >
< / mat-expansion-panel-header >
< div id = "{{indexPath + 'f' + i}}" * ngIf = "panel.expanded" >
< app-dataset-profile-editor-field-component [ form ] = " form . get ( ' fields ' ) . get ( ' ' + i ) " [ indexPath ] = " indexPath + ' f ' + i " [ viewOnly ] = " viewOnly " > < / app-dataset-profile-editor-field-component >
< / div >
< / mat-expansion-panel >
< / div >
< div class = "col-12" >
< button mat-button class = "full-width" ( click ) = " addNewField ( ) " [ disabled ] = " viewOnly " > {{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.ACTIONS.ADD-CHILD-FIELD' | translate}}< / button >
< / div >
< / div > -->
< / div >
< / div >
<!-- ACTIONS LIST -->
< div class = "col-auto" >
2021-02-17 17:39:07 +01:00
< div class = "row" class = "actions-list bg-white" >
2021-02-12 12:23:39 +01:00
< mat-list role = "list" >
<!-- INPUT TOOLS -->
2021-02-15 18:16:48 +01:00
< ng-container * ngIf = "!viewOnly" >
< h3 matSubheader > Input tools< / h3 >
<!-- Add new Input -->
< mat-list-item >
< mat-icon matListIcon > folder< / mat-icon >
< span matLine ( click ) = " addNewField ( ) " style = "cursor: pointer;" > Add Input< / span >
< / mat-list-item >
<!-- Visibility -->
< mat-list-item * ngIf = "targetField" >
< mat-icon matListIcon [ ngClass ] = " { ' text-muted ' : ! targetField . get ( ' viewStyle ' ) . get ( ' renderStyle ' ) . value } "
>visibility_off< / mat-icon >
< button matLine class = "mat-button" ( click ) = " addVisibilityRule ( targetField ) " [ disabled ] = " ! targetField . get ( ' viewStyle ' ) . get ( ' renderStyle ' ) . value " >
< span > Add Visibility Rule< / span >
< / button >
< / mat-list-item >
< / ng-container >
2021-02-19 15:35:14 +01:00
<!-- Additional info and Extended -->
< mat-list-item >
<!-- <mat - icon matListIcon>folder</mat - icon> -->
< mat-checkbox matLine [ ( ngModel ) ] = " showExtendedDescription " >
Extended Description
< / mat-checkbox >
< / mat-list-item >
< mat-list-item >
<!-- <mat - icon matListIcon>folder</mat - icon> -->
< mat-checkbox matLine [ ( ngModel ) ] = " showAdditionalInfo " >
Additional Information
< / mat-checkbox >
< / mat-list-item >
2021-02-12 12:23:39 +01:00
<!-- INPUT SETTINGS -->
< h3 matSubheader > Input settings< / h3 >
<!-- multiplicity -->
< mat-list-item >
<!-- <mat - icon matListIcon>folder</mat - icon> -->
2021-02-15 18:16:48 +01:00
< mat-checkbox matLine [ checked ] = " isMultiplicityEnabled " ( change ) = " onIsMultiplicityEnabledChange ( $ event ) " [ disabled ] = " viewOnly | | ! targetField ? . get ( ' viewStyle ' ) . get ( ' renderStyle ' ) . value " >
2021-02-12 12:23:39 +01:00
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-CHECKBOX' | translate}}
< / mat-checkbox >
< / mat-list-item >
<!-- Include Comment -->
< mat-list-item >
< mat-checkbox matLine [ formControl ] = " this . form . get ( ' hasCommentField ' ) " [ disabled ] = " viewOnly | | ! targetField ? . get ( ' viewStyle ' ) . get ( ' renderStyle ' ) . value " >
{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}
< / mat-checkbox >
< / mat-list-item >
<!-- Required -->
< mat-list-item * ngIf = "targetField &&!( targetField?.get('viewStyle').get('renderStyle').value ==viewStyleEnum.CheckBox )" >
<!-- <mat - icon matListIcon>folder</mat - icon> -->
< mat-checkbox matLine [ checked ] = " targetField . get ( ' validations ' ) . value ? . includes ( validationTypeEnum . Required ) " ( change ) = " toggleRequired ( targetField , $ event ) " > Make it required< / mat-checkbox >
<!-- <span (click)="toggleRequired(targetField)"></span> -->
< / mat-list-item >
<!-- OTHER ACTIONS -->
2021-02-15 18:16:48 +01:00
< ng-container * ngIf = "!viewOnly" >
< h3 matSubheader > Other actions< / h3 >
<!-- <mat - list - item> -->
<!-- <mat - icon matListIcon>folder</mat - icon> -->
<!-- <mat - checkbox [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" [disabled]="viewOnly">{{'DATASET - PROFILE - EDITOR.STEPS.FORM.COMPOSITE - FIELD.FIELDS.COMPOSITE - CHECKBOX' | translate}}</mat - checkbox>
< / mat-list-item > -->
< mat-list-item * ngIf = "targetField && !viewOnly" >
< mat-icon matListIcon > delete< / mat-icon >
< span matLine ( click ) = " deleteTargetField ( ) " style = "cursor: pointer;" > Delete< / span >
< / mat-list-item >
< / ng-container >
2021-02-12 12:23:39 +01:00
< / mat-list >
< / div >
< / div >
2019-03-08 16:09:34 +01:00
< / div >
2021-02-12 12:23:39 +01:00
2019-02-11 13:04:45 +01:00
< / div >
2021-02-12 12:23:39 +01:00
<!--
< span > Preview< / span >
< app-form-composite-field [ form ] = " previewForm " * ngIf = "previewForm" >
< / app-form-composite-field > -->
2021-02-18 16:13:56 +01:00
<!--
2021-02-17 17:39:07 +01:00
Current FORM: {{this.form.value |json}}
2021-02-12 12:23:39 +01:00
< br >
2021-02-18 16:13:56 +01:00
Target: {{this.targetField?.value |json}} -->
2021-02-15 18:16:48 +01:00
2021-02-12 12:23:39 +01:00
<!--
< button ( click ) = " generatePreview ( ) " > Generate preview< / button >
-->