80 lines
4.9 KiB
HTML
80 lines
4.9 KiB
HTML
<div *ngIf="fieldSet" class="dynamic-form-composite-field row">
|
|
<div *ngIf="showTitle" class="col-12">
|
|
<div class="row">
|
|
<div class="col">
|
|
<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(fieldSet.id)">
|
|
<mat-icon matTooltip="{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.ANNOTATIONS' | translate}}">comment</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!fieldSet?.multiplicity?.tableView" class="col-12">
|
|
<div class="row" *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
|
|
<ng-container>
|
|
<div class="row">
|
|
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
|
|
</div>
|
|
<app-description-form-field class="col-12 compositeField" [propertiesFormGroup]="fieldSetItemPropertiesControl.get('fields')" [field]="field" [fieldSet]="fieldSet" [visibilityRulesService]="visibilityRulesService" [datasetProfileId]="datasetProfileId" [isChild]="true"></app-description-form-field>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="propertiesFormGroup.get('items').length > 1" class="col-auto align-self-center">
|
|
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(i);" [disabled]="fieldSetItemPropertiesControl.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="(fieldSet?.multiplicity?.max - 1) > (propertiesFormGroup.get('items').length)" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
|
|
<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
|
|
<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
|
|
<mat-icon>add_circle</mat-icon>
|
|
</button>
|
|
<span class="mt-1" *ngIf="fieldSet?.multiplicity?.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
|
|
<span class="mt-1" *ngIf="!fieldSet?.multiplicity?.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="fieldSet?.multiplicity?.tableView" class="col-12">
|
|
<table class="table table-bordered" style="table-layout: fixed">
|
|
<tr>
|
|
<th *ngFor="let field of fieldSet.fields; let i = index;" class="text-wrap">{{field.data?.label}}</th>
|
|
<th class="actions"></th>
|
|
</tr>
|
|
<tr *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls; let j = index">
|
|
<td *ngFor="let field of fieldSet.fields;" class="text-wrap">{{fieldSetItemPropertiesControl.get('fields').get(field.id).get('value').getRawValue()}}</td>
|
|
<td class="actions">
|
|
<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editTableMultiplicityFieldInDialog(j)" [disabled]="fieldSetItemPropertiesControl.disabled">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button *ngIf="propertiesFormGroup.get('items').length > 1" mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(j);" [disabled]="fieldSetItemPropertiesControl.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr *ngIf="(fieldSet.multiplicity.max - 1) > propertiesFormGroup?.get('items')?.controls.length">
|
|
<td [colSpan]="fieldSet.fields.length + 1" class="text-center">
|
|
<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
|
|
<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
|
|
<mat-icon>add_circle</mat-icon>
|
|
</button>
|
|
<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
|
|
<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- comment only on top level fieldset -->
|
|
<div class="row">
|
|
<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup?.get('items')?.at(0)?.get('comment')" class="col-12">
|
|
<rich-text-editor-component [form]="propertiesFormGroup?.get('items')?.at(0)?.get('comment')" [id]="'editor1'" [placeholder]="'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup?.get('items')?.at(0)?.get('comment').disabled"></rich-text-editor-component>
|
|
</div>
|
|
</div> |