255 lines
17 KiB
HTML
255 lines
17 KiB
HTML
<!-- MAIN CONTENT -->
|
|
<div class="main-content-page" [ngClass]="{'pb-2': !hasFocus}">
|
|
<!-- TITLE -->
|
|
<div class="col-12">
|
|
<div class="row fielset-header">
|
|
<mat-form-field class="numbering-label" [ngStyle]="calculateLabelWidth(numbering)">
|
|
<input [ngClass]="{'text-danger':form.get('title').invalid &&form.get('title').touched}" matInput type="text" [value]="numbering" disabled>
|
|
</mat-form-field>
|
|
<mat-form-field class="col field-title" floatLabel="never">
|
|
<textarea matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+' '+('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.QUESTION'| translate)" #titleControl="matInput" [formControl]="this.form.get('title')"></textarea>
|
|
<mat-error *ngIf="this.form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
|
|
<div *ngIf="showDescription" class="mb-4">
|
|
<h5 style="font-weight: bold" class="row">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
|
|
<rich-text-editor-component [form]="form.get('description')" [id]="'editor1'" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION'" [wrapperClasses]="'row'">
|
|
</rich-text-editor-component>
|
|
<mat-error *ngIf="this.form.get('description').hasError('backendError')">{{form.get('description').getError('backendError').message}}</mat-error>
|
|
</div>
|
|
<div *ngIf="showExtendedDescription" class="mb-4">
|
|
<h5 style="font-weight: bold" class="row">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5>
|
|
<rich-text-editor-component [form]="form.get('extendedDescription')" [id]="'editor2'" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION'" [wrapperClasses]="'row'">
|
|
</rich-text-editor-component>
|
|
<mat-error *ngIf="this.form.get('extendedDescription').hasError('backendError')">{{form.get('extendedDescription').getError('backendError').message}}</mat-error>
|
|
</div>
|
|
<div class="row" *ngIf="showAdditionalInfo">
|
|
<mat-form-field class="col p-0 underline-line-field">
|
|
<input matInput type="text" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}" [formControl]="this.form.get('additionalInformation')" />
|
|
<mat-error *ngIf="this.form.get('additionalInformation').hasError('backendError')">{{form.get('additionalInformation').getError('backendError').message}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<mat-form-field *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field">
|
|
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}" type="number" [formControl]="form.get('multiplicity').get('min')">
|
|
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('backendError')">{{form.get('multiplicity').get('min').getError('backendError').message}}</mat-error>
|
|
<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 pr-0 underline-line-field">
|
|
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}" type="number" [formControl]="this.form.get('multiplicity').get('max')">
|
|
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('backendError')">{{form.get('multiplicity').get('max').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="row">
|
|
<mat-form-field *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field">
|
|
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-PLACEHOLDER' | translate}}" type="text" [formControl]="form.get('multiplicity').get('placeholder')">
|
|
<mat-error *ngIf="form.get('multiplicity').get('placeholder').hasError('backendError')">{{form.get('placeholder').get('multiplicity').getError('backendError').message}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="row">
|
|
<mat-checkbox *ngIf="isMultiplicityEnabled" class="col pl-0 underline-line-field fieldset-checkbox-action-description-template-editor" [formControl]="form.get('multiplicity').get('tableView')">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-TABLEVIEW' | translate}}
|
|
<mat-error *ngIf="form.get('multiplicity').get('tableView').hasError('backendError')">{{form.get('multiplicity').get('tableView').getError('backendError').message}}</mat-error>
|
|
</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- FIELDS DETAILS AND ACTIONS -->
|
|
<div class="row">
|
|
|
|
<!-- FIELDS -->
|
|
<div #inputs transition-group class="col-12" *ngIf="hasFocus" [@fade-in]>
|
|
<div *ngFor="let field of fieldsArray.controls; let i=index;" class="row bg-white field-input mt-3" (click)="setTargetField(field)" transition-group-item>
|
|
<app-description-template-editor-field-component class="col-12" [form]="field" [showOrdinal]="false" [viewOnly]="viewOnly" [expandView]="hasFocus" [canBeDeleted]="fieldsArray.length !=1" [validationErrorModel]="validationErrorModel" [validationRootPath]="validationRootPath + '.fields[' + i + '].'" (delete)="deleteField(i)">
|
|
<div class="arrows mt-2">
|
|
<ul class="list-unstyled list-inline d-flex align-items-center">
|
|
<li *ngIf="canGoUp(i)" class="text-muted">
|
|
<mat-icon style="cursor: pointer;" (click)="move(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MOVE-UP' | translate">keyboard_arrow_up</mat-icon>
|
|
</li>
|
|
<li *ngIf="canGoDown(i)" class="text-muted">
|
|
<mat-icon style="cursor: pointer;" (click)="move(i, 'down')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MOVE-DOWN' | translate">keyboard_arrow_down</mat-icon>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</app-description-template-editor-field-component>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PREVIEW -->
|
|
|
|
<div class="col-12 previewer">
|
|
<div *ngIf="hasFocus" class="d-flex mb-3" style="justify-content: space-between;">
|
|
<span class="previewer-text">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
|
|
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('data')?.get('fieldType')?.value">
|
|
<ng-container *ngIf="!previewDirty">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
|
|
</ng-container>
|
|
<ng-container *ngIf="previewDirty">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}}
|
|
</ng-container>
|
|
</span>
|
|
</div>
|
|
<div [id]="'preview_container'+ form.get('id').value" class="w-100" style="margin-right: -15px; margin-left: -15px;">
|
|
<div *ngIf="previewFieldSet && showPreview && firstField?.get('data')?.get('fieldType')?.value" class="row" [@fade-in-fast]>
|
|
<div class="col">
|
|
<app-description-form-field-set class="w-100" [propertiesFormGroup]="previewPropertiesFormGroup" [fieldSet]="previewFieldSet"></app-description-form-field-set>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100" *ngIf="!firstField?.get('data')?.get('fieldType')?.value">
|
|
<em>
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
|
|
</em>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-12">
|
|
<hr *ngIf="hasFocus">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<ng-container *ngIf="hasFocus">
|
|
<div class="row justify-content-end pt-2">
|
|
<div class="col-auto">
|
|
<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
|
|
<li class="list-inline-item" *ngIf="!viewOnly">
|
|
|
|
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
|
|
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" />
|
|
<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
|
|
</span>
|
|
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
|
|
<mat-action-list>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.TEXT_AREA)">
|
|
|
|
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Text Area icon">
|
|
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TEXT_AREA)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)">
|
|
|
|
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Rich Text Area icon">
|
|
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.FREE_TEXT)">
|
|
<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="Free Text icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.FREE_TEXT)}}
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.UPLOAD)">
|
|
<mat-icon class="input_icon" style="font-size: 14px; color: #129d99; display: inline-flex; align-items: center">upload</mat-icon>
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.UPLOAD)}}
|
|
</button>
|
|
<mat-divider></mat-divider>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)">
|
|
<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.RADIO_BOX)">
|
|
<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RADIO_BOX)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.SELECT)">
|
|
<span class="input_icon">
|
|
<img src="/assets/images/editor/icons/select.svg" alt="Select icon">
|
|
</span>
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.SELECT)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.CHECK_BOX)">
|
|
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox Icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CHECK_BOX)}}
|
|
</button>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.DATE_PICKER)">
|
|
<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker Icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATE_PICKER)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.CURRENCY)">
|
|
<img src="/assets/images/editor/icons/currency.svg" class="input_icon" alt="Currency Icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CURRENCY)}}
|
|
</button>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
|
|
<img src="/assets/images/editor/icons/api.svg" class="input_icon" alt="APIs icon">
|
|
|
|
APIs
|
|
</button>
|
|
<mat-action-list class="ml-4">
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Reference types icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.EXTERNAL_DATASETS)">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="External Datasets icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.EXTERNAL_DATASETS)}}
|
|
</button>
|
|
</mat-action-list>
|
|
|
|
<mat-divider></mat-divider>
|
|
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
|
|
<img src="/assets/images/editor/icons/argos_entities.svg" class="input_icon" alt="Argos Entities icon">
|
|
Argos Entities
|
|
</button>
|
|
<mat-action-list class="ml-4">
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.TAGS)">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TAGS)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Datset Identifier icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)}}
|
|
</button>
|
|
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.VALIDATION)">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
|
|
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.VALIDATION)}}
|
|
</button>
|
|
</mat-action-list>
|
|
</mat-action-list>
|
|
</mat-menu>
|
|
</li>
|
|
|
|
|
|
<li class="list-inline-item">
|
|
<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
|
|
<mat-error *ngIf="form.get('hasCommentField').hasError('backendError')">{{form.get('hasCommentField').getError('backendError').message}}</mat-error>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [(checked)]="isMultiplicityEnabled" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
|
|
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
|
|
</mat-checkbox>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
|
|
<mat-menu #menu="matMenu">
|
|
<!-- TODO to check -->
|
|
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>
|
|
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox>
|
|
<mat-checkbox class="mat-menu-item" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox>
|
|
</mat-menu>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</div> |