574 lines
31 KiB
HTML
574 lines
31 KiB
HTML
<div class="reference-type-editor">
|
|
<div class="col-md-8 offset-md-2 colums-gapped">
|
|
|
|
<div class="row justify-content-between align-items-center">
|
|
<div class="col">
|
|
<h3 *ngIf="isNew">{{'REFERENCE-TYPE-EDITOR.NEW' | translate}}</h3>
|
|
<app-navigation-breadcrumb />
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
|
</div>
|
|
<div class="col-auto" *ngIf="canDelete">
|
|
<button mat-button (click)="delete()" class="action-btn" type="button">
|
|
<mat-icon>delete</mat-icon>
|
|
{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
|
|
</button>
|
|
</div>
|
|
<div class="col-auto" *ngIf="canSave">
|
|
<button mat-button class="action-btn" (click)="formSubmit()">
|
|
<mat-icon>save</mat-icon>
|
|
{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<mat-card appearance="outlined">
|
|
<mat-card-header>
|
|
<mat-card-title *ngIf="isNew">{{'REFERENCE-TYPE-EDITOR.NEW' | translate}}</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
|
|
<div class="info-grid">
|
|
<div class="info-grid-value">
|
|
<mat-form-field class="col-lg-6">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.NAME' | translate}}</mat-label>
|
|
<input matInput type="text" name="name" [formControl]="formGroup.get('name')" required>
|
|
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="info-grid-value">
|
|
<mat-form-field class="col-lg-6">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
|
|
<input matInput type="text" name="name" [formControl]="formGroup.get('code')" required>
|
|
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">
|
|
{{formGroup.get('code').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('code').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
|
|
<mat-card appearance="outlined">
|
|
<mat-card-header>
|
|
<!-- <mat-card-title >{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-card-title> -->
|
|
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
|
|
|
|
<!-- FIELDS -->
|
|
<div class="col-12">
|
|
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<mat-card-header>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-auto d-flex">
|
|
<mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELD' | translate}} {{fieldIndex + 1}}</mat-card-title>
|
|
</div>
|
|
|
|
<div class="col-auto d-flex">
|
|
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
|
|
<input matInput type="text" name="label" [formControl]="field.get('label')" required>
|
|
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DESCRIPTION' | translate}}</mat-label>
|
|
<input matInput type="text" name="description" [formControl]="field.get('description')">
|
|
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
|
|
<input matInput type="text" name="code" [formControl]="field.get('code')" required>
|
|
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
|
|
<mat-select name="dataType" [formControl]="field.get('dataType')">
|
|
<mat-option *ngFor="let fieldDataType of referenceFieldDataTypeEnum" [value]="fieldDataType">
|
|
{{enumUtils.toReferenceFieldDataTypeString(fieldDataType)}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="field.get('dataType').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
</div>
|
|
</mat-card-content>
|
|
</div>
|
|
</div>
|
|
<button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''"
|
|
type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">Submit</button>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
<mat-card appearance="outlined">
|
|
<mat-card-header>
|
|
<!-- <mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-card-title> -->
|
|
<mat-card-header>
|
|
<button mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
|
|
</mat-card-header>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
|
|
<!-- Source Config Info -->
|
|
<div class="col-12">
|
|
<div *ngFor="let source of formGroup.get('definition').get('sources').controls; let sourceIndex=index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<mat-card-content>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-auto d-flex">
|
|
<mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-CONFIGURATION' | translate}} {{sourceIndex + 1}}</mat-card-title>
|
|
</div>
|
|
<div class="col-auto d-flex">
|
|
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-SOURCE' | translate}}" (click)="removeSource(sourceIndex)" [disabled]="formGroup.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row" >
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
|
|
<input matInput type="text" name="key" [formControl]="source.get('key')" required>
|
|
<mat-error *ngIf="source.get('key').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
|
|
<input matInput type="text" name="label" [formControl]="source.get('label')" required>
|
|
<mat-error *ngIf="source.get('label').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.ORDINAL' | translate}}</mat-label>
|
|
<input matInput type="text" name="ordinal" [formControl]="source.get('ordinal')" required>
|
|
<mat-error *ngIf="source.get('ordinal').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-TYPE' | translate}}</mat-label>
|
|
<mat-select name="type" [formControl]="source.get('type')" required>
|
|
<mat-option *ngFor="let sourceType of referenceTypeSourceTypeEnum" [value]="sourceType">
|
|
{{enumUtils.toReferenceTypeSourceTypeString(sourceType)}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="source.get('type').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="row" *ngIf="source.get('type').value == referenceTypeSourceType.API">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.URL' | translate}}</mat-label>
|
|
<input matInput type="text" name="ordinal" [formControl]="source.get('url')">
|
|
<mat-error *ngIf="source.get('url').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.PAGINATION-PATH' | translate}}</mat-label>
|
|
<input matInput type="text" name="paginationPath" [formControl]="source.get('paginationPath')">
|
|
<mat-error *ngIf="source.get('paginationPath').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CONTENT-TYPE' | translate}}</mat-label>
|
|
<input matInput type="text" name="contentType" [formControl]="source.get('contentType')">
|
|
<mat-error *ngIf="source.get('contentType').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.FIRST-PAGE' | translate}}</mat-label>
|
|
<input matInput type="text" name="firstPage" [formControl]="source.get('firstPage')">
|
|
<mat-error *ngIf="source.get('firstPage').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label>
|
|
<mat-select name="httpMethod" [formControl]="source.get('httpMethod')">
|
|
<mat-option *ngFor="let httpMethod of referenceTypeExternalApiHTTPMethodTypeEnum" [value]="httpMethod">
|
|
{{enumUtils.toReferenceTypeExternalApiHTTPMethodTypeString(httpMethod)}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="source.get('httpMethod').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6" *ngIf="source.get('httpMethod').value == referenceTypeExternalApiHTTPMethodType.POST" >
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
|
|
<input matInput type="text" name="requestBody" [formControl]="source.get('requestBody')">
|
|
<mat-error *ngIf="source.get('requestBody').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.FILTER-TYPE' | translate}}ype</mat-label>
|
|
<input matInput type="text" name="filterType" [formControl]="source.get('filterType')">
|
|
<mat-error *ngIf="source.get('filterType').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- Results info -->
|
|
<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.RESULTS' | translate}}</h3>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.RESULTS-PATH' | translate}}</mat-label>
|
|
<input matInput type="text" name="resultsArrayPath" [formControl]="source.get('results').get('resultsArrayPath')">
|
|
<mat-error *ngIf="source.get('results').get('resultsArrayPath').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- fields mapping -->
|
|
<div class="col-12">
|
|
<div *ngFor="let field of source.get('results').get('fieldsMapping').controls; let fieldMappingIndex=index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<mat-card-header>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-auto d-flex">
|
|
<h4 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELD-MAPPING' | translate}} {{fieldMappingIndex + 1}}</h4>
|
|
</div>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
|
|
<input matInput type="text" [readonly]="field.get('code').disabled" name="code" [formControl]="field.get('code')">
|
|
<mat-error *ngIf="field.get('code').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.RESPONSE-PATH' | translate}}</mat-label>
|
|
<input matInput type="text" name="responsePath" [formControl]="field.get('responsePath')">
|
|
<mat-error *ngIf="field.get('responsePath').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Auth info -->
|
|
<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.AUTHENTICATION' | translate}}
|
|
<mat-checkbox [formControl]="source.get('auth').get('enabled')"></mat-checkbox>
|
|
</h3>
|
|
<div class="row" *ngIf="source.get('auth').get('enabled').value == true">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.URL' | translate}}</mat-label>
|
|
<input matInput type="text" name="authUrl" [formControl]="source.get('auth').get('authUrl')">
|
|
<mat-error *ngIf="source.get('auth').get('authUrl').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label>
|
|
<mat-select name="httpMethod" [formControl]="source.get('auth').get('authMethod')">
|
|
<mat-option *ngFor="let httpMethod of referenceTypeExternalApiHTTPMethodTypeEnum" [value]="httpMethod">
|
|
{{enumUtils.toReferenceTypeExternalApiHTTPMethodTypeString(httpMethod)}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="source.get('auth').get('authMethod').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.TOKEN-PATH' | translate}}</mat-label>
|
|
<input matInput type="text" name="authTokenPath" [formControl]="source.get('auth').get('authTokenPath')">
|
|
<mat-error *ngIf="source.get('auth').get('authTokenPath').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
|
|
<input matInput type="text" name="authRequestBody" [formControl]="source.get('auth').get('authRequestBody')">
|
|
<mat-error *ngIf="source.get('auth').get('authRequestBody').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.TYPE' | translate}}</mat-label>
|
|
<input matInput type="text" name="type" [formControl]="source.get('auth').get('type')">
|
|
<mat-error *ngIf="source.get('auth').get('type').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<!-- Queries info -->
|
|
<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.QUERIES' | translate}}
|
|
<button mat-button type="button" (click)="addQuery(sourceIndex)" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
|
|
</h3>
|
|
<div class="col-12">
|
|
<div *ngFor="let query of source.get('queries').controls; let queryIndex=index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<mat-card-header>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-auto d-flex">
|
|
<h4 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
|
|
</div>
|
|
<div class="col-auto d-flex">
|
|
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(sourceIndex, queryIndex)" [disabled]="formGroup.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CONDITION' | translate}}</mat-label>
|
|
<input matInput type="text" name="condition" [formControl]="query.get('condition')" required>
|
|
<mat-error *ngIf="query.get('condition').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.SEPARATOR' | translate}}</mat-label>
|
|
<input matInput type="text" name="separator" [formControl]="query.get('separator')" required>
|
|
<mat-error *ngIf="query.get('separator').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
|
|
<input matInput type="text" name="value" [formControl]="query.get('value')" required>
|
|
<mat-error *ngIf="query.get('value').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.ORDINAL' | translate}}</mat-label>
|
|
<input matInput type="text" name="value" [formControl]="query.get('ordinal')" required>
|
|
<mat-error *ngIf="query.get('ordinal').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Options -->
|
|
<div class="row" *ngIf="source.get('type').value == referenceTypeSourceType.STATIC">
|
|
<div class="col-12">
|
|
<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.OPTIONS' | translate}}</h3>
|
|
<div *ngFor="let option of source.get('options').controls; let optionsIndex=index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<mat-card-header>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-auto d-flex">
|
|
<h4 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.OPTION' | translate}} {{optionsIndex + 1}}</h4>
|
|
</div>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
|
|
<input matInput type="text" [readonly]="option.get('code').disabled" name="code" [formControl]="option.get('code')">
|
|
<mat-error *ngIf="option.get('code').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
|
|
<input matInput type="text" name="value" [formControl]="option.get('value')">
|
|
<mat-error *ngIf="option.get('value').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Dependencies -->
|
|
<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.DEPENDENCIES' | translate}}
|
|
<button mat-button type="button" (click)="addDependency(sourceIndex)" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-DEPENDENCY' | translate}}</button>
|
|
</h3>
|
|
<div class="col-12">
|
|
<div *ngFor="let dependency of source.get('dependencies').controls; let dependencyIndex= index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<mat-card-header>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-auto d-flex">
|
|
<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.DEPENDENCY' | translate}} {{dependencyIndex + 1}}</h3>
|
|
</div>
|
|
<div class="col-auto d-flex">
|
|
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-DEPENDENCY' | translate}}" (click)="removeDependency(sourceIndex, dependencyIndex)" [disabled]="formGroup.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
|
|
<mat-select (selectionChange)="selectedReferenceTypeChanged($event.value)" name="referenceTypeCode" [formControl]="dependency.get('referenceTypeCode')" required>
|
|
<mat-option *ngFor="let referenceType of referenceTypes" [value]="referenceType.code">
|
|
{{referenceType.code}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="dependency.get('referenceTypeCode').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6" *ngIf="dependency.get('referenceTypeCode').value">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
|
|
<mat-select name = 'key' [formControl]="dependency.get('key')" required>
|
|
<mat-option *ngFor="let key of sourceKeysMap.get(dependency.get('referenceTypeCode').value)" [value]="key">
|
|
{{key}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="dependency.get('key').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-label>
|
|
<input matInput type="text" name="required" [formControl]="dependency.get('required')" required>
|
|
<mat-error *ngIf="dependency.get('required').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<!-- Properties -->
|
|
<h3 class="col-12">{{'REFERENCE-TYPE-EDITOR.FIELDS.PROPERTIES' | translate}}
|
|
<button mat-button type="button" (click)="addProperty(sourceIndex, dependencyIndex)" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-PROPERTY' | translate}}</button>
|
|
</h3>
|
|
<div class="col-12">
|
|
<div *ngFor="let property of dependency.get('properties').controls; let propertyIndex= index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-auto d-flex">
|
|
<h4>{{'REFERENCE-TYPE-EDITOR.FIELDS.PROPERTY' | translate}} {{propertyIndex + 1}}</h4>
|
|
</div>
|
|
<div class="col-auto d-flex">
|
|
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-PROPERTY' | translate}}" (click)="removeProperty(sourceIndex, dependencyIndex, propertyIndex)" [disabled]="formGroup.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
|
|
<mat-select name="code" [formControl]="property.get('code')" required>
|
|
<mat-option *ngFor="let code of propertyCodes" [value]="code">
|
|
{{code}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="property.get('code').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.TARGET' | translate}}</mat-label>
|
|
<mat-select name = 'target' [formControl]="property.get('target')" required>
|
|
<mat-option *ngFor="let targetCode of targetPropertyCodesMap.get(dependency.get('referenceTypeCode').value)" [value]="targetCode">
|
|
{{targetCode}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="property.get('target').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-6">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.REQUIRED' | translate}}</mat-label>
|
|
<input matInput type="text" name="required" [formControl]="property.get('required')" required>
|
|
<mat-error *ngIf="property.get('required').hasError('required')">
|
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</mat-card-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
</div>
|
|
</div>
|
|
|