ui fixes (description template editor)
This commit is contained in:
parent
f75d9ba777
commit
4e791e78af
|
|
@ -83,25 +83,34 @@
|
||||||
|
|
||||||
<!-- PREVIEW -->
|
<!-- PREVIEW -->
|
||||||
|
|
||||||
<div class="col-12 previewer">
|
<div class="col-12">
|
||||||
<div *ngIf="hasFocus" class="d-flex mb-3" style="justify-content: space-between;">
|
<div class="container-fluid previewer">
|
||||||
<span class="previewer-text">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
|
<div class="row">
|
||||||
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('data')?.get('fieldType')?.value">
|
<div class="col-12">
|
||||||
<ng-container *ngIf="!previewDirty">
|
<div *ngIf="hasFocus" class="row justify-content-between mb-3">
|
||||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
|
<div class="col-auto">
|
||||||
</ng-container>
|
<span class="previewer-text">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
|
||||||
<ng-container *ngIf="previewDirty">
|
</div>
|
||||||
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}}
|
<div class="col-auto">
|
||||||
</ng-container>
|
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('data')?.get('fieldType')?.value">
|
||||||
</span>
|
<ng-container *ngIf="!previewDirty">
|
||||||
</div>
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
|
||||||
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;">
|
</ng-container>
|
||||||
<div *ngIf="previewFieldSet && showPreview && firstField?.get('data')?.get('fieldType')?.value" class="row" [@fade-in-fast]>
|
<ng-container *ngIf="previewDirty">
|
||||||
<div class="col">
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}}
|
||||||
<app-description-form-field-set class="w-100" [propertiesFormGroup]="previewPropertiesFormGroup" [fieldSet]="previewFieldSet" [visibilityRulesService]="visibilityRulesService"></app-description-form-field-set>
|
</ng-container>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div [id]="'preview_container'+ form.get('id').value" class="row">
|
||||||
|
<div *ngIf="previewFieldSet && showPreview && firstField?.get('data')?.get('fieldType')?.value" class="col-12" [@fade-in-fast]>
|
||||||
|
<app-description-form-field-set class="w-100" [propertiesFormGroup]="previewPropertiesFormGroup" [fieldSet]="previewFieldSet" [visibilityRulesService]="visibilityRulesService"></app-description-form-field-set>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="w-100" *ngIf="!firstField?.get('data')?.get('fieldType')?.value">
|
<div class="w-100" *ngIf="!firstField?.get('data')?.get('fieldType')?.value">
|
||||||
<em>
|
<em>
|
||||||
|
|
|
||||||
|
|
@ -132,9 +132,10 @@
|
||||||
<mat-error *ngIf="form.get('schematics').hasError('backendError')">{{form.get('schematics').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="form.get('schematics').hasError('backendError')">{{form.get('schematics').getError('backendError').message}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-checkbox [formControl]="this.form.get('includeInExport')" class="col-6" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXPORT' | translate}}
|
<div class="col-6">
|
||||||
|
<mat-checkbox [formControl]="this.form.get('includeInExport')" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXPORT' | translate}}</mat-checkbox>
|
||||||
<mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error>
|
||||||
</mat-checkbox>
|
</div>
|
||||||
|
|
||||||
<!-- Default Value -->
|
<!-- Default Value -->
|
||||||
<app-description-template-editor-default-value-component *ngIf="form.get('data')?.get('fieldType')?.value" class="col-6" [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')" [formArrayOptions]="form.get('data')?.get('options')" [comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value" [validationErrorModel]="validationErrorModel" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}">
|
<app-description-template-editor-default-value-component *ngIf="form.get('data')?.get('fieldType')?.value" class="col-6" [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')" [formArrayOptions]="form.get('data')?.get('options')" [comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value" [validationErrorModel]="validationErrorModel" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}">
|
||||||
|
|
|
||||||
|
|
@ -63,4 +63,8 @@ li.list-inline-item{
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
::ng-deep .mdc-label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,50 @@
|
||||||
<div class="row" *ngFor="let ruleFormGroup of form['controls'] let i=index;" [formGroup]="ruleFormGroup">
|
<div class="row align-items-center" *ngFor="let ruleFormGroup of form['controls'] let i=index;" [formGroup]="ruleFormGroup">
|
||||||
<span class="col-auto align-self-center">{{i + 1}}</span>
|
<div class="col-auto mb-3"><span>{{i + 1}}</span></div>
|
||||||
|
|
||||||
<app-description-template-editor-default-value-component *ngIf="isTextType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('textValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
|
<div class="col" *ngIf="isTextType(fieldTypeForCheck)" >
|
||||||
<app-description-template-editor-default-value-component *ngIf="isDateType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('dateValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
|
<app-description-template-editor-default-value-component [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('textValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
|
||||||
<app-description-template-editor-default-value-component *ngIf="isTextListType(fieldTypeForCheck)" class="col align-self-center" [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('textListValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
|
</div>
|
||||||
|
<div class="col" *ngIf="isDateType(fieldTypeForCheck)">
|
||||||
|
<app-description-template-editor-default-value-component [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('dateValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
|
||||||
|
</div>
|
||||||
|
<div class="col" *ngIf="isTextListType(fieldTypeForCheck)">
|
||||||
|
<app-description-template-editor-default-value-component [fieldType]="fieldTypeForCheck" [form]="ruleFormGroup.get('textListValue')" [formArrayOptions]="formArrayOptionsForCheck" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-IF'| translate}}" required="true"></app-description-template-editor-default-value-component>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- SELECTION -->
|
<!-- SELECTION -->
|
||||||
<mat-form-field class="col align-self-center">
|
<div class="col">
|
||||||
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</mat-label>
|
<mat-form-field class="w-100">
|
||||||
<mat-select formControlName="target" (openedChange)="computeOptions($event)">
|
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.RULE-THEN'| translate}}</mat-label>
|
||||||
<!-- SHOW FIELDSETS -->
|
<mat-select formControlName="target" (openedChange)="computeOptions($event)">
|
||||||
<mat-optgroup [label]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDSETS' | translate">
|
<!-- SHOW FIELDSETS -->
|
||||||
<mat-option *ngFor="let option of fieldSetOptions" [value]="option.id" style="line-height: normal;" [disabled]="parentIds.includes(option.id) || hiddenBy.includes(option.id)" [matTooltip]="getToolTipMessage(option.id)" [matTooltipShowDelay]="700">
|
<mat-optgroup [label]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDSETS' | translate">
|
||||||
<span>
|
<mat-option *ngFor="let option of fieldSetOptions" [value]="option.id" style="line-height: normal;" [disabled]="parentIds.includes(option.id) || hiddenBy.includes(option.id)" [matTooltip]="getToolTipMessage(option.id)" [matTooltipShowDelay]="700">
|
||||||
{{option.label? option.label:'<'+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>' }} </span> <br>
|
<span>
|
||||||
<small>
|
{{option.label? option.label:'<'+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>' }} </span> <br>
|
||||||
{{option.id}}
|
<small>
|
||||||
</small>
|
{{option.id}}
|
||||||
</mat-option>
|
</small>
|
||||||
</mat-optgroup>
|
</mat-option>
|
||||||
<!-- SHOW FIELDS -->
|
</mat-optgroup>
|
||||||
<mat-optgroup [label]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDS' | translate">
|
<!-- SHOW FIELDS -->
|
||||||
<mat-option *ngFor="let option of fieldOptions" [value]="option.id" style="line-height: normal;" [disabled]="parentIds.includes(option.id) ||hiddenBy.includes(option.id)" [matTooltip]="getToolTipMessage(option.id)" [matTooltipShowDelay]="700">
|
<mat-optgroup [label]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.RULE.FIELDS.FIELDS' | translate">
|
||||||
<span>
|
<mat-option *ngFor="let option of fieldOptions" [value]="option.id" style="line-height: normal;" [disabled]="parentIds.includes(option.id) ||hiddenBy.includes(option.id)" [matTooltip]="getToolTipMessage(option.id)" [matTooltipShowDelay]="700">
|
||||||
{{option.label? option.label:'<'+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>' }} </span> <br>
|
<span>
|
||||||
<small>
|
{{option.label? option.label:'<'+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) + '>' }} </span> <br>
|
||||||
{{option.id}}
|
<small>
|
||||||
</small>
|
{{option.id}}
|
||||||
</mat-option>
|
</small>
|
||||||
</mat-optgroup>
|
</mat-option>
|
||||||
|
</mat-optgroup>
|
||||||
|
|
||||||
|
|
||||||
</mat-select>
|
</mat-select>
|
||||||
<mat-error *ngIf="ruleFormGroup.get('target').hasError('backendError')">{{ruleFormGroup.get('target').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="ruleFormGroup.get('target').hasError('backendError')">{{ruleFormGroup.get('target').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="ruleFormGroup.get('target').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="ruleFormGroup.get('target').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-auto align-self-center"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
|
<div class="col-auto mb-4"><button mat-icon-button type="button" (click)="deleteRule(i);" [disabled]="viewOnly">
|
||||||
<mat-icon>delete</mat-icon>
|
<mat-icon>delete</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,87 +1,89 @@
|
||||||
<div *ngIf="fieldSet" class="dynamic-form-composite-field row">
|
<div class="container p-0">
|
||||||
<div *ngIf="showTitle" class="col-12">
|
<div *ngIf="fieldSet" class="dynamic-form-composite-field row">
|
||||||
<div class="row">
|
<div *ngIf="showTitle" class="col-12">
|
||||||
<div class="col">
|
<div class="row">
|
||||||
<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
|
<div class="col">
|
||||||
</div>
|
<app-description-form-field-set-title class="row" [fieldSet]="fieldSet" [path]="path" [isChild]="isChild"></app-description-form-field-set-title>
|
||||||
<div class="col-auto">
|
</div>
|
||||||
<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(fieldSet.id)">
|
<div class="col-auto">
|
||||||
<mat-icon matTooltip="{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.ANNOTATIONS' | translate}}" [matBadge]="annotationsCount" [matBadgeHidden]="annotationsCount <= 0" matBadgeColor="warn">comment</mat-icon>
|
<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(fieldSet.id)">
|
||||||
</button>
|
<mat-icon matTooltip="{{'DATASET-EDITOR.QUESTION.EXTENDED-DESCRIPTION.ANNOTATIONS' | translate}}" [matBadge]="annotationsCount" [matBadgeHidden]="annotationsCount <= 0" matBadgeColor="warn">comment</mat-icon>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!fieldSet?.multiplicity?.tableView" class="col-12">
|
|
||||||
<div class="row" *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls">
|
|
||||||
<div class="col" *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[fieldSet.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
|
||||||
<div class="row">
|
|
||||||
<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12 compositeField">
|
|
||||||
<ng-container *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[field.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
|
||||||
<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>
|
</div>
|
||||||
<div *ngIf="propertiesFormGroup.get('items').length > 1" class="col-auto align-self-center">
|
</div>
|
||||||
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(i);" [disabled]="fieldSetItemPropertiesControl.disabled">
|
<div *ngIf="!fieldSet?.multiplicity?.tableView" class="col-12">
|
||||||
<mat-icon>delete</mat-icon>
|
<div class="row" *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls">
|
||||||
</button>
|
<div class="col" *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[fieldSet.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
||||||
|
<div class="row">
|
||||||
|
<div *ngFor="let field of fieldSet.fields; let i = index;" class="col-12">
|
||||||
|
<ng-container *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[field.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
||||||
|
<div class="row">
|
||||||
|
<h5 *ngIf="placeholderTitle" class="col-auto font-weight-bold">{{field.label}}</h5>
|
||||||
|
</div>
|
||||||
|
<app-description-form-field class="col-12" [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">{{('DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="(fieldSet?.multiplicity?.max - 1) > (propertiesFormGroup.get('items').length)" class="col-12 mt-1 ml-0 mr-0 addOneFieldButton">
|
<div *ngIf="fieldSet?.multiplicity?.tableView" class="col-12">
|
||||||
<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
|
<table class="table table-bordered" style="table-layout: fixed">
|
||||||
<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
|
<tr>
|
||||||
<mat-icon>add_circle</mat-icon>
|
<th *ngFor="let field of fieldSet.fields; let i = index;" class="text-wrap">{{field.data?.label}}</th>
|
||||||
</button>
|
<th class="actions"></th>
|
||||||
<span class="mt-1" *ngIf="fieldSet?.multiplicity?.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
|
</tr>
|
||||||
<span class="mt-1" *ngIf="!fieldSet?.multiplicity?.placeholder">{{('DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
|
<ng-container *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls; let j = index">
|
||||||
</span>
|
<tr *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[fieldSet.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
||||||
</div>
|
<td *ngFor="let field of fieldSet.fields;" class="text-wrap">
|
||||||
</div>
|
<ng-container *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[field.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
||||||
<div *ngIf="fieldSet?.multiplicity?.tableView" class="col-12">
|
{{fieldSetItemPropertiesControl.get('fields').get(field.id).get('value').getRawValue()}}
|
||||||
<table class="table table-bordered" style="table-layout: fixed">
|
</ng-container>
|
||||||
<tr>
|
</td>
|
||||||
<th *ngFor="let field of fieldSet.fields; let i = index;" class="text-wrap">{{field.data?.label}}</th>
|
<td class="actions">
|
||||||
<th class="actions"></th>
|
<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editTableMultiplicityFieldInDialog(j)" [disabled]="fieldSetItemPropertiesControl.disabled">
|
||||||
</tr>
|
<mat-icon>edit</mat-icon>
|
||||||
<ng-container *ngFor="let fieldSetItemPropertiesControl of propertiesFormGroup?.get('items')?.controls; let j = index">
|
</button>
|
||||||
<tr *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[fieldSet.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
<button *ngIf="propertiesFormGroup.get('items').length > 1" mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(j);" [disabled]="fieldSetItemPropertiesControl.disabled">
|
||||||
<td *ngFor="let field of fieldSet.fields;" class="text-wrap">
|
<mat-icon>delete</mat-icon>
|
||||||
<ng-container *ngIf="visibilityRulesService && visibilityRulesService.isVisibleMap[field.id + '_' + fieldSetItemPropertiesControl.get('ordinal').value] ?? true">
|
</button>
|
||||||
{{fieldSetItemPropertiesControl.get('fields').get(field.id).get('value').getRawValue()}}
|
</td>
|
||||||
</ng-container>
|
</tr>
|
||||||
</td>
|
</ng-container>
|
||||||
<td class="actions">
|
|
||||||
<button mat-icon-button type="button" class="deleteBtn btn-sm" (click)="editTableMultiplicityFieldInDialog(j)" [disabled]="fieldSetItemPropertiesControl.disabled">
|
<tr *ngIf="(fieldSet.multiplicity.max - 1) > propertiesFormGroup?.get('items')?.controls.length">
|
||||||
<mat-icon>edit</mat-icon>
|
<td [colSpan]="fieldSet.fields.length + 1" class="text-center">
|
||||||
</button>
|
<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
|
||||||
<button *ngIf="propertiesFormGroup.get('items').length > 1" mat-icon-button type="button" class="deleteBtn" (click)="deleteMultiplicityField(j);" [disabled]="fieldSetItemPropertiesControl.disabled">
|
<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
|
||||||
<mat-icon>delete</mat-icon>
|
<mat-icon>add_circle</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
|
||||||
|
<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DESCRIPTION-EDITOR.ACTIONS.MULTIPLICITY-ADD-ONE-FIELD' + (fieldSet.multiplicity.tableView?'-TABLEVIEW':'')) | translate}}</span>
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</ng-container>
|
</table>
|
||||||
|
</div>
|
||||||
<tr *ngIf="(fieldSet.multiplicity.max - 1) > propertiesFormGroup?.get('items')?.controls.length">
|
</div>
|
||||||
<td [colSpan]="fieldSet.fields.length + 1" class="text-center">
|
<!-- comment only on top level fieldset -->
|
||||||
<span class="d-inline-flex align-items-center" [ngClass]="propertiesFormGroup.disabled ? '' : 'pointer'" (click)="addMultiplicityField()">
|
<div class="row">
|
||||||
<button mat-icon-button color="primary" [disabled]="propertiesFormGroup.disabled">
|
<div *ngIf="fieldSet.hasCommentField && propertiesFormGroup?.get('items')?.at(0)?.get('comment')" class="col-12">
|
||||||
<mat-icon>add_circle</mat-icon>
|
<rich-text-editor-component [form]="propertiesFormGroup?.get('items')?.at(0)?.get('comment')" [id]="'editor1'" [placeholder]="'DESCRIPTION-EDITOR.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup?.get('items')?.at(0)?.get('comment').disabled"></rich-text-editor-component>
|
||||||
</button>
|
</div>
|
||||||
<span class="mt-1" *ngIf="fieldSet.multiplicity.placeholder">{{fieldSet.multiplicity.placeholder}}</span>
|
|
||||||
<span class="mt-1" *ngIf="!fieldSet.multiplicity.placeholder">{{('DESCRIPTION-EDITOR.ACTIONS.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]="'DESCRIPTION-EDITOR.FIELDS.COMMENT-PLACEHOLDER' | translate" [wrapperClasses]="'mb-2'" [editable]="!propertiesFormGroup?.get('items')?.at(0)?.get('comment').disabled"></rich-text-editor-component>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue