You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
288 lines
18 KiB
HTML
288 lines
18 KiB
HTML
<ng-container *ngIf="expandView">
|
|
|
|
<!-- ACTIONS PER FIELD -->
|
|
<div class="row justify-content-end mb-1 mt-1">
|
|
<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]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.MAKE-IT-REQUIRED' | translate" [disabled]="!viewType">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}
|
|
</mat-slide-toggle>
|
|
</li>
|
|
<li class="list-inline-item" *ngIf="!viewOnly && viewType && canApplyVisibility">
|
|
<mat-icon style="cursor: pointer;" (click)="addNewRule()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">visibility</mat-icon>
|
|
</li>
|
|
<li class="list-inline-item" *ngIf="!viewOnly && viewType && canBeDeleted">
|
|
<mat-icon style="cursor: pointer;" (click)="onDelete()" [matTooltip]="'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.DELETE-INPUT' | translate">delete</mat-icon>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<!-- <mat-form-field class="col">
|
|
<input matInput placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ID' | translate}}" type="text" [formControl]="this.form.get('id')"
|
|
required>
|
|
<mat-error *ngIf="this.form.get('id').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
<mat-error *ngIf="this.form.get('id').hasError('pattern')">{{'GENERAL.VALIDATION.PATTERN-_' | translate}}</mat-error>
|
|
</mat-form-field> -->
|
|
|
|
<mat-form-field class="col">
|
|
<!-- <mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [formControl]="this.form.get('viewStyle').get('renderStyle')"
|
|
required>
|
|
<mat-option [value]="viewStyleEnum.TextArea">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.TextArea)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.FreeText">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.FreeText)}}</mat-option>
|
|
<mat-divider></mat-divider>
|
|
<mat-option [value]="viewStyleEnum.BooleanDecision">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.BooleanDecision)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.RadioBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.RadioBox)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.CheckBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.CheckBox)}}</mat-option>
|
|
|
|
<mat-option [value]="viewStyleEnum.ComboBox">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ComboBox)}}</mat-option>
|
|
<mat-divider></mat-divider>
|
|
|
|
<mat-option [value]="viewStyleEnum.DatePicker">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatePicker)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.Currency">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Currency)}}</mat-option>
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
|
|
<mat-optgroup label="APIs">
|
|
<mat-option [value]="viewStyleEnum.Registries">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Registries)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.Services">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Services)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.Researchers">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Researchers)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.Organizations">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Organizations)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.ExternalDatasets">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.ExternalDatasets)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.DataRepositories">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DataRepositories)}}</mat-option>
|
|
</mat-optgroup>
|
|
|
|
<mat-divider></mat-divider>
|
|
<mat-optgroup label="Argos Entities">
|
|
<mat-option [value]="viewStyleEnum.InternalDmpEntities">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.InternalDmpEntities)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.Tags">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Tags)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.DatasetIdentifier">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.DatasetIdentifier)}}</mat-option>
|
|
<mat-option [value]="viewStyleEnum.Validation">{{enumUtils.toDatasetProfileFieldViewStyleString(viewStyleEnum.Validation)}}</mat-option>
|
|
</mat-optgroup>
|
|
|
|
</mat-select> -->
|
|
|
|
<!-- NEW VERSION -->
|
|
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(ngModel)]="viewType" (selectionChange)="onInputTypeChange()"
|
|
[disabled]="viewOnly"
|
|
[errorStateMatcher]="this"
|
|
>
|
|
<mat-option [value]="viewTypeEnum.TextArea">
|
|
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="TextArea icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.TextArea)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.FreeText">
|
|
<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="FreeText icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.FreeText)}}
|
|
</mat-option>
|
|
<mat-divider></mat-divider>
|
|
<mat-option [value]="viewTypeEnum.BooleanDecision">
|
|
<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.BooleanDecision)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.RadioBox">
|
|
<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.RadioBox)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Select">
|
|
<span class="input_icon">
|
|
<img src="/assets/images/editor/icons/select.svg" style="padding-right: 7px;" alt="Select icon">
|
|
</span>
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Select)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.CheckBox">
|
|
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.CheckBox)}}
|
|
</mat-option>
|
|
<!-- TODO -->
|
|
<mat-divider></mat-divider>
|
|
|
|
<mat-option [value]="viewTypeEnum.DatePicker">
|
|
<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatePicker)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Currency">
|
|
<img src="/assets/images/editor/icons/currency.svg" class="input_icon" alt="Current icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Currency)}}
|
|
</mat-option>
|
|
|
|
<mat-divider></mat-divider>
|
|
<!-- APIS -->
|
|
|
|
<mat-optgroup label="APIs">
|
|
<mat-option [value]="viewTypeEnum.Registries">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Registries)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Services">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Services icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Services)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Researchers">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Researchers icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Researchers)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Organizations">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Organizations icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Organizations)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.ExternalDatasets">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="ExternalDatasets icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.ExternalDatasets)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.DataRepositories">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DataRepositories icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DataRepositories)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Other">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Other icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Other)}}
|
|
</mat-option>
|
|
</mat-optgroup>
|
|
<!-- TODO -->
|
|
<mat-divider></mat-divider>
|
|
<mat-optgroup label="Argos Entities">
|
|
<mat-option [value]="viewTypeEnum.InternalDmpEntities">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.InternalDmpEntities)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Tags">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Tags)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.DatasetIdentifier">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DatasetIdentifier icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.DatasetIdentifier)}}
|
|
</mat-option>
|
|
<mat-option [value]="viewTypeEnum.Validation">
|
|
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
|
|
{{enumUtils.toDatasetProfileViewTypeString(viewTypeEnum.Validation)}}
|
|
</mat-option>
|
|
</mat-optgroup>
|
|
|
|
</mat-select>
|
|
<!-- <mat-error *ngIf="this.form.get('viewStyle').get('renderStyle').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>
|
|
|
|
<!-- Combo Box -->
|
|
<mat-form-field *ngIf="showOrdinal" class="col">
|
|
<input matInput type="number" placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.ORDER' | translate}}" [formControl]="this.form.get('ordinal')" required>
|
|
</mat-form-field>
|
|
|
|
<!-- Validation -->
|
|
<!-- <mat-form-field class="col" *ngIf="!(defaulValueRequired(form.get('viewStyle').get('renderStyle').value))">
|
|
<mat-select placeholder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.VALIDATION' | translate}}" [formControl]="this.form.get('validations')"
|
|
multiple>
|
|
<mat-option [value]="validationTypeEnum.Required">{{enumUtils.toDatasetProfileFieldValidationTypeString(validationTypeEnum.Required)}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field> -->
|
|
|
|
<mat-form-field class="col">
|
|
<mat-label>{{'DATASET-PROFILE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.RDA-COMMON-STANDARDS' | translate}}</mat-label>
|
|
<mat-select [formControl]="this.form.get('rdaCommonStandard')">
|
|
<mat-option>--</mat-option>
|
|
<mat-option *ngFor="let property of datasetProfileService.getRDACommonStandards()" [value]="property">
|
|
{{property}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<!-- Default Value -->
|
|
<app-component-profile-editor-default-value-component *ngIf="form.get('viewStyle').get('renderStyle').value" class="col-12"
|
|
[viewStyle]="form.get('viewStyle').get('renderStyle').value" [form]="this.form.get('defaultValue').get('value')" [formArrayOptions]="form.get('data')?.get('options')"
|
|
[comboBoxType]="this.form.get('data')?.get('type')?.value" [internalDmpEntitiesType]="this.form.get('data')?.get('type')?.value"
|
|
placeHolder="{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}">
|
|
</app-component-profile-editor-default-value-component>
|
|
|
|
</div>
|
|
<div class="row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value" *ngIf="expandView">
|
|
<app-dataset-profile-editor-combo-box-field-component *ngSwitchCase="viewStyleEnum.ComboBox" class="col-12" [form]="form"></app-dataset-profile-editor-combo-box-field-component>
|
|
<app-dataset-profile-internal-dmp-entities-field-component *ngSwitchCase="viewStyleEnum.InternalDmpEntities" class="col-12" [form]="form"></app-dataset-profile-internal-dmp-entities-field-component>
|
|
<app-dataset-profile-editor-radio-box-field-component *ngSwitchCase="viewStyleEnum.RadioBox" class="col-12" [form]="form"></app-dataset-profile-editor-radio-box-field-component>
|
|
<app-dataset-profile-editor-free-text-field-component *ngSwitchCase="viewStyleEnum.FreeText" class="col-12" [form]="form"></app-dataset-profile-editor-free-text-field-component>
|
|
<app-dataset-profile-editor-text-area-field-component *ngSwitchCase="viewStyleEnum.TextArea" class="col-12" [form]="form"></app-dataset-profile-editor-text-area-field-component>
|
|
<app-dataset-profile-editor-date-picker-field-component *ngSwitchCase="viewStyleEnum.DatePicker" class="col-12" [form]="form"></app-dataset-profile-editor-date-picker-field-component>
|
|
|
|
<app-dataset-profile-editor-boolean-decision-field-component *ngSwitchCase="viewStyleEnum.BooleanDecision" class="col-12"
|
|
[form]="form"></app-dataset-profile-editor-boolean-decision-field-component>
|
|
<app-dataset-profile-editor-checkbox-field-component *ngSwitchCase="viewStyleEnum.CheckBox" class="col-12" [form]="form"></app-dataset-profile-editor-checkbox-field-component>
|
|
|
|
<app-dataset-profile-editor-external-datasets-field-component *ngSwitchCase="viewStyleEnum.ExternalDatasets" class="col-12" [form]="form"></app-dataset-profile-editor-external-datasets-field-component>
|
|
<app-dataset-profile-editor-data-repositories-field-component *ngSwitchCase="viewStyleEnum.DataRepositories" class="col-12" [form]="form"></app-dataset-profile-editor-data-repositories-field-component>
|
|
<app-dataset-profile-editor-registries-field-component *ngSwitchCase="viewStyleEnum.Registries" class="col-12" [form]="form"></app-dataset-profile-editor-registries-field-component>
|
|
<app-dataset-profile-editor-services-field-component *ngSwitchCase="viewStyleEnum.Services" class="col-12" [form]="form"></app-dataset-profile-editor-services-field-component>
|
|
<app-dataset-profile-editor-tags-field-component *ngSwitchCase="viewStyleEnum.Tags" class="col-12" [form]="form"></app-dataset-profile-editor-tags-field-component>
|
|
<app-dataset-profile-editor-researchers-field-component *ngSwitchCase="viewStyleEnum.Researchers" class="col-12" [form]="form"></app-dataset-profile-editor-researchers-field-component>
|
|
<app-dataset-profile-editor-organizations-field-component *ngSwitchCase="viewStyleEnum.Organizations" class="col-12" [form]="form"></app-dataset-profile-editor-organizations-field-component>
|
|
<app-dataset-profile-editor-dataset-identifier-field-component *ngSwitchCase="viewStyleEnum.DatasetIdentifier" class="col-12" [form]="form"></app-dataset-profile-editor-dataset-identifier-field-component>
|
|
<app-dataset-profile-editor-currency-field-component *ngSwitchCase="viewStyleEnum.Currency" class="col-12" [form]="form"></app-dataset-profile-editor-currency-field-component>
|
|
<app-dataset-profile-editor-validator-field-component *ngSwitchCase="viewStyleEnum.Validation" class="col-12" [form]="form"></app-dataset-profile-editor-validator-field-component>
|
|
</div>
|
|
<div class="row" *ngIf="this.form.get('viewStyle').get('renderStyle').value">
|
|
|
|
|
|
|
|
<ng-container *ngIf="form.get('visible').get('rules')?.value.length">
|
|
<h4 class="col-12" style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.FIELDS.RULES-TITLE' | translate}}
|
|
</h4>
|
|
<app-dataset-profile-editor-rule-component class="col-12" [form]="form.get('visible').get('rules')" [viewStyleForCheck]="form.get('viewStyle').get('renderStyle').value"
|
|
[formArrayOptionsForCheck]="this.form.get('data')?.get('options')" [comboBoxTypeForCheck]="this.form.get('data')?.get('type')?.value"
|
|
[viewOnly]="viewOnly"
|
|
[formControlForCheck]="form"></app-dataset-profile-editor-rule-component>
|
|
<!-- <div class="col-12" *ngIf="!viewOnly">
|
|
<button mat-button class="full-width" (click)="addNewRule()" [disabled]="!form.get('viewStyle').get('renderStyle').value">{{'DATASET-PROFILE-EDITOR.STEPS.FORM.FIELD.ACTIONS.ADD-RULE' | translate}}</button>
|
|
</div> -->
|
|
</ng-container>
|
|
|
|
|
|
<!-- <div class="row">
|
|
<button (click)="generatePreview()">Generate Preview</button>
|
|
</div> -->
|
|
</div>
|
|
</ng-container>
|
|
|
|
|
|
<!-- PREVIEW -->
|
|
<!-- <ng-container *ngIf="false">
|
|
<div class="row">
|
|
<div class="col-12" *ngIf="expandView && previewForm">
|
|
<span style="font-weight: bold">{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
|
|
</div> -->
|
|
<!-- <div class="col-12">
|
|
<mat-radio-group [(ngModel)]="showPreview">
|
|
<mat-radio-button [value]="true">Yes</mat-radio-button>
|
|
<mat-radio-button [value]="false">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div> -->
|
|
|
|
<!--
|
|
<div class="col-12" *ngIf="showPreview">
|
|
<ng-container *ngIf="viewType === viewTypeEnum.Other else regularField">
|
|
<app-form-field [form]="previewForm" *ngIf="previewForm" [autocompleteOptions]="form.get('data').get('autoCompleteSingleDataList').getRawValue()">
|
|
|
|
</app-form-field>
|
|
</ng-container>
|
|
|
|
<ng-template #regularField>
|
|
<app-form-field [form]="previewForm" *ngIf="previewForm">
|
|
|
|
</app-form-field>
|
|
</ng-template>
|
|
</div>
|
|
<div class="col-12" *ngIf="!this.form.get('viewStyle').get('renderStyle').value">
|
|
<em>
|
|
{{'DATASET-PROFILE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
|
|
</em>
|
|
</div>
|
|
</div>
|
|
</ng-container> -->
|
|
<!-- {{form.touched|json}} -->
|