argos/dmp-frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor...

244 lines
20 KiB
HTML

<ng-container *ngIf="expandView">
<!-- ACTIONS PER FIELD -->
<div class="row justify-content-end mb-1 mr-2">
<ng-content></ng-content>
<div class="col-auto">
<ul class="list-unstyled list-inline d-flex align-items-center">
<li class="list-inline-item">
<mat-slide-toggle class="field-toggler" [checked]="isRequired" (change)="toggleRequired($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType">
{{'GENERAL.VALIDATION.REQUIRED' | translate}}
</mat-slide-toggle>
</li>
<li *ngIf="fieldType === descriptionTemplateFieldTypeEnum.FREE_TEXT" class="list-inline-item">
<mat-slide-toggle class="field-toggler" [checked]="isURL" (change)="toggleURL($event)" labelPosition="before" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!fieldType">
{{'GENERAL.VALIDATION.URL.LABEL' | translate}}
</mat-slide-toggle>
</li>
<!-- <li class="list-inline-item" *ngIf="!viewOnly && fieldType && canApplyVisibility">
<mat-icon style="cursor: pointer;" (click)="addNewRule()" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">visibility</mat-icon>
</li> -->
<li class="text-muted" *ngIf="!viewOnly && fieldType && canBeDeleted">
<mat-icon style="cursor: pointer; opacity: 0.7; transform:translateY(2px) translateX(10px) ;" (click)="onDelete()" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.DELETE-INPUT' | translate">delete</mat-icon>
</li>
</ul>
</div>
</div>
<div class="row">
<mat-form-field class="col-6">
<!-- NEW VERSION -->
<mat-select #select placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(ngModel)]="fieldType" (selectionChange)="onInputTypeChange()" [disabled]="viewOnly" [errorStateMatcher]="this">
<mat-select-trigger>
{{enumUtils.toDescriptionTemplateFieldTypeString(select.value)}}
</mat-select-trigger>
<mat-option [value]="descriptionTemplateFieldTypeEnum.TEXT_AREA">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="TextArea icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TEXT_AREA)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="RichTextArea icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.FREE_TEXT">
<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="FreeText icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.FREE_TEXT)}}
</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="descriptionTemplateFieldTypeEnum.UPLOAD">
<!-- <img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Upload icon">-->
<mat-icon class="input_icon" style="font-size: 14px; color: #129d99; display: inline-flex; align-items: center">upload</mat-icon>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.UPLOAD)}}
</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION">
<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.RADIO_BOX">
<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RADIO_BOX)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.SELECT">
<span class="input_icon">
<img src="/assets/images/editor/icons/select.svg" style="padding-right: 7px;" alt="Select icon">
</span>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.SELECT)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.CHECK_BOX">
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CHECK_BOX)}}
</mat-option>
<!-- TODO -->
<mat-divider></mat-divider>
<mat-option [value]="descriptionTemplateFieldTypeEnum.DATE_PICKER">
<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATE_PICKER)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.CURRENCY">
<img src="/assets/images/editor/icons/currency.svg" class="input_icon" alt="Current icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CURRENCY)}}
</mat-option>
<mat-divider></mat-divider>
<!-- APIS -->
<mat-optgroup label="APIs">
<mat-option [value]="descriptionTemplateFieldTypeEnum.REGISTRIES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.REGISTRIES)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.SERVICES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Services icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.SERVICES)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.RESEARCHERS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Researchers icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RESEARCHERS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.ORGANIZATIONS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Organizations icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.ORGANIZATIONS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.EXTERNAL_DATASETS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="ExternalDatasets icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.EXTERNAL_DATASETS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.DATA_REPOSITORIES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DataRepositories icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATA_REPOSITORIES)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.PUB_REPOSITORIES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="PubRepositories icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.PUB_REPOSITORIES)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.JOURNAL_REPOSITORIES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Journal Repositories icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.JOURNAL_REPOSITORIES)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.TAXONOMIES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Taxonomies icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TAXONOMIES)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.LICENSES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="licenses icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.LICENSES)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.PUBLICATIONS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Publications icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.PUBLICATIONS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.EXTERNAL_SELECT">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Other icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.EXTERNAL_SELECT)}}
</mat-option>
</mat-optgroup>
<!-- TODO -->
<mat-divider></mat-divider>
<mat-optgroup label="Argos Entities">
<mat-option [value]="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DMPS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DMPS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DATASETS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DATASETS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_RESEARCHERS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_RESEARCHERS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.TAGS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TAGS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DatasetIdentifier icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.VALIDATION">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.VALIDATION)}}
</mat-option>
</mat-optgroup>
</mat-select>
<!-- <mat-error *ngIf="this.form.get('data').get('fieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
<mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<!-- <mat-error *ngIf="this.form.hasError('inputTypeNotValid')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
</mat-form-field>
<mat-form-field class="col-6">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}" [hidePlaceholder]="true" required='false' [separatorKeysCodes]="separatorKeysCodes" [formControl]="this.form.get('schematics')" [configuration]="semanticsAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="form.get('schematics').hasError('backendError')">{{form.get('schematics').getError('backendError').message}}</mat-error>
</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}}
<mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error>
</mat-checkbox>
<!-- 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>
<div class="col-12"></div>
<div class="col-auto mb-4 mt-2">
<div class="add-visibility-button" (click)="addNewRule()" *ngIf="!viewOnly && fieldType && canApplyVisibility">
<img src="/assets/images/editor/icons/add_visibility_rule_2.svg" class="visibility-icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate}}</span>
</div>
</div>
</div>
<div class="row" *ngIf="this.form.get('data')?.get('fieldType')?.value">
<ng-container *ngIf="form.get('visibilityRules')?.value.length">
<h4 class="col-12" style="font-weight: bold">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
</h4>
<app-description-template-editor-visibility-rule-component class="col-12" [form]="form.get('visibilityRules')" [validationErrorModel]="validationErrorModel" [rootPath]="rootPath" [fieldTypeForCheck]="form.get('data').get('fieldType').value" [formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [viewOnly]="viewOnly"></app-description-template-editor-visibility-rule-component>
<!-- <div class="col-12" *ngIf="!viewOnly">
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('data').get('fieldType').value">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
</div> -->
</ng-container>
</div>
<div class="row" [ngSwitch]="form.get('data')?.get('fieldType')?.value " *ngIf="expandView">
<app-description-template-editor-external-select-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.EXTERNAL_SELECT" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-external-select-field-component>
<app-description-template-editor-select-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.SELECT" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-select-field-component>
<app-description-template-editor-radio-box-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.RADIO_BOX" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-radio-box-field-component>
<app-description-template-editor-upload-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.UPLOAD" class="col-12" [form]="form" [validationErrorModel]= "validationErrorModel" [rootPath]="rootPath"></app-description-template-editor-upload-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.CHECK_BOX" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.FREE_TEXT" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.TEXT_AREA" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATE_PICKER" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAGS" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.CURRENCY" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-label-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.VALIDATION" class="col-12" [form]="form"></app-description-template-editor-label-field-component>
<app-description-template-editor-external-datasets-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.EXTERNAL_DATASETS" class="col-12" [form]="form"></app-description-template-editor-external-datasets-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_RESEARCHERS" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DMPS" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.INTERNAL_DMP_ENTRIES_DATASETS" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.DATA_REPOSITORIES" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.JOURNAL_REPOSITORIES" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.PUB_REPOSITORIES" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.LICENSES" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.TAXONOMIES" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.PUBLICATIONS" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.REGISTRIES" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.SERVICES" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.RESEARCHERS" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
<app-description-template-editor-multiplicity-field-component *ngSwitchCase="descriptionTemplateFieldTypeEnum.ORGANIZATIONS" class="col-12" [form]="form"></app-description-template-editor-multiplicity-field-component>
</div>
</ng-container>