246 lines
11 KiB
HTML
246 lines
11 KiB
HTML
|
|
<!-- TO LINK -->
|
|
<!-- <div class="row">
|
|
<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>
|
|
<mat-checkbox class="col" [formControl]="this.form.get('hasCommentField')">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-CHECKBOX' | translate}}</mat-checkbox>
|
|
</div> -->
|
|
|
|
<!-- TO LINK -->
|
|
|
|
<!--
|
|
<div class="row">
|
|
<mat-form-field *ngIf="isComposite" class="col">
|
|
<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>
|
|
<mat-error *ngIf="form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field *ngIf="isComposite" class="col">
|
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMPOSITE-TITLE' | translate}}"
|
|
[formControl]="this.form.get('title')">
|
|
</mat-form-field>
|
|
<mat-form-field *ngIf="!isComposite" class="col">
|
|
<input matInput type="text" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.FIELD-TITLE' | translate}}"
|
|
[formControl]="this.form.get('title')">
|
|
</mat-form-field>
|
|
<mat-form-field *ngIf="isMultiplicityEnabled" class="col">
|
|
<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">
|
|
<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>
|
|
<mat-form-field class="col">
|
|
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ORDER' | translate}}"
|
|
[formControl]="this.form.get('ordinal')" required>
|
|
</mat-form-field>
|
|
</div> -->
|
|
|
|
|
|
<!-- ID TOP RIGHT CORNER -->
|
|
<div class="field-id-container">
|
|
{{this.form.get('id').value}}
|
|
<button mat-mini-fab class="field-id-container-icon">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 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}}
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="row">
|
|
<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>
|
|
<div class="row">
|
|
<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>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- FIELDS DETAILS AND ACTIONS -->
|
|
<div class="row">
|
|
|
|
<!-- FIELDS -->
|
|
<div class="col">
|
|
|
|
<div class="">
|
|
<ng-container *ngFor="let field of form.get('fields')['controls']; let i=index">
|
|
<div class="row field-container" style="position: relative;" (click)="setTargetField(field)"
|
|
[ngClass]="{'field-container-active': field.get('id').value === targetField?.get('id').value}">
|
|
<div class="field-id-container">
|
|
{{form.get('fields').get(''+i).get('id').value}}
|
|
<!-- <button mat-mini-fab class="field-id-container-icon" (click)="DeleteField(i)">
|
|
<mat-icon>delete</mat-icon>
|
|
</button> -->
|
|
</div>
|
|
<!-- *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">
|
|
<div class="row" class="actions-list">
|
|
<mat-list role="list">
|
|
<!-- INPUT TOOLS -->
|
|
<h3 matSubheader>Input tools</h3>
|
|
<!-- Add new Input -->
|
|
<mat-list-item *ngIf="!viewOnly">
|
|
<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 && !viewOnly">
|
|
<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>
|
|
|
|
<!-- INPUT SETTINGS -->
|
|
<h3 matSubheader>Input settings</h3>
|
|
|
|
<!-- multiplicity -->
|
|
<mat-list-item>
|
|
<!-- <mat-icon matListIcon>folder</mat-icon> -->
|
|
<mat-checkbox matLine [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)" [disabled]="viewOnly ||!targetField?.get('viewStyle').get('renderStyle').value">
|
|
{{'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 -->
|
|
<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">
|
|
<mat-icon matListIcon>delete</mat-icon>
|
|
<span matLine (click)="deleteTargetField()" style="cursor: pointer;">Delete</span>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--
|
|
<span>Preview</span>
|
|
<app-form-composite-field [form]="previewForm" *ngIf="previewForm">
|
|
|
|
</app-form-composite-field> -->
|
|
|
|
Current FORM: {{this.form.value |json}}
|
|
<br>
|
|
Target: {{this.targetField?.value |json}}
|
|
<!--
|
|
<button (click)="generatePreview()">Generate preview</button>
|
|
|
|
-->
|
|
|