editor-screens spacing changes

This commit is contained in:
Sofia Papacharalampous 2024-04-16 18:03:59 +03:00
parent 6bb091868c
commit 1421dcf009
4 changed files with 430 additions and 371 deletions

View File

@ -37,19 +37,29 @@
<mat-card-content> <mat-card-content>
<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup"> <form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
<div class="row"> <div class="row">
<div class="col-12 pt-1 pb-1"> <div class="col-12">
<span> <div class="container-fluid">
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}} <div class="row">
</span> <div class="col-12 pt-1 pb-1">
<span>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}
</span>
</div>
</div>
</div>
</div> </div>
<div class="col-12 mt-1"> <div class="col-12 mt-1">
<mat-form-field class="w-100"> <div class="container-fluid">
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}" type="text" name="name" [formControl]="formGroup.get('name')" required> <div class="row">
<mat-error *ngIf="formGroup.get('name').hasError('backendError')"> <div class="col-12">
{{formGroup.get('name').getError('backendError').message}}</mat-error> <mat-form-field class="w-100">
<mat-error *ngIf="formGroup.get('name').hasError('required')"> <input matInput placeholder="{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}" type="text" name="name" [formControl]="formGroup.get('name')" required>
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
</mat-form-field> <mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div> </div>
</div> </div>
</form> </form>

View File

@ -30,117 +30,138 @@
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup"> <form (ngSubmit)="formSubmit()" [formGroup]="formGroup" *ngIf="formGroup">
<div class="row mt-3">
<div class="col-12">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<mat-form-field class="w-100">
<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="col-6">
<mat-form-field class="w-100">
<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>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-12">
<mat-form-field class="w-100"> <div class="container-fluid">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.NAME' | translate}}</mat-label> <div class="row">
<input matInput type="text" name="name" [formControl]="formGroup.get('name')" required> <div class="col-12 mt-3 mb-3">
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error> <div class="row d-flex align-items-center">
<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <div class="col-auto">
</mat-form-field> <h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
</div> </div>
<div class="col-6"> <div class="col-auto">
<mat-form-field class="w-100"> <button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label> </div>
<input matInput type="text" name="name" [formControl]="formGroup.get('code')" required> </div>
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error> </div>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 mt-3 mb-3">
<div class="row d-flex align-items-center">
<div class="col-auto">
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- FIELDS --> <!-- FIELDS -->
<div class="row">
<div class="col-12"> <div class="col-12">
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3"> <div class="container-fluid">
<div class="col-12"> <div class="row">
<div class="row d-flex align-items-center"> <div class="col-12">
<div class="col-auto pb-3 d-flex"> <div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<span>{{fieldIndex + 1}}</span> <div class="col-12">
<div class="row d-flex align-items-center">
<div class="col-auto pb-3 d-flex">
<span>{{fieldIndex + 1}}</span>
</div>
<div class="col">
<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">
<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">
<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">
<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('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto pb-3 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>
</div>
</div> </div>
<div class="col"> <button mat-button class="action-btn" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
<mat-form-field class="w-100"> </div>
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.LABEL' | translate}}</mat-label> <div class="col-12 mt-3 mb-3">
<input matInput type="text" name="label" [formControl]="field.get('label')" required> <div class="row d-flex align-items-center">
<mat-error *ngIf="field.get('label').hasError('backendError')">{{field.get('label').getError('backendError').message}}</mat-error> <div class="col-auto">
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
</mat-form-field> </div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
</div>
</div> </div>
<div class="col"> </div>
<mat-form-field class="w-100"> <div class="col-12">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.DESCRIPTION' | translate}}</mat-label> <div *ngFor="let source of formGroup.get('definition').get('sources').controls; let sourceIndex=index;" class="row">
<input matInput type="text" name="description" [formControl]="field.get('description')"> <div class="col-12">
<mat-error *ngIf="field.get('description').hasError('backendError')">{{field.get('description').getError('backendError').message}}</mat-error> <div class="row mb-3 d-flex align-items-center">
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <div class="col-auto d-flex">
</mat-form-field> <mat-card-title>{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCE-CONFIGURATION' | translate}} {{sourceIndex + 1}}</mat-card-title>
</div> </div>
<div class="col"> <div class="col-auto d-flex">
<mat-form-field class="w-100"> <button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-TYPE-EDITOR.ACTIONS.REMOVE-SOURCE' | translate}}" (click)="removeSource(sourceIndex)" [disabled]="formGroup.disabled">
<mat-label>{{'REFERENCE-TYPE-EDITOR.FIELDS.CODE' | translate}}</mat-label> <mat-icon>delete</mat-icon>
<input matInput type="text" name="code" [formControl]="field.get('code')" required> </button>
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error> </div>
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </div>
</mat-form-field> <app-external-fetcher-source-component [formGroup]="source" [fieldsForm]="formGroup.get('definition').get('fields')" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.sources[' + sourceIndex + '].'" [referenceTypeSourceIndex]="sourceIndex" [referenceTypes]="referenceTypes" [sourceKeysMap]="sourceKeysMap">
</div> </app-external-fetcher-source-component>
<div class="col"> </div>
<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('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto pb-3 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-error *ngIf="formGroup.get('definition').get('sources').dirty && formGroup.get('definition').get('sources').hasError('required')">{{'REFERENCE-TYPE-EDITOR.SOURCES-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('sources').hasError('backendError')">{{formGroup.get('definition').get('sources').getError('backendError').message}}</mat-error>
</div> </div>
</div> </div>
</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">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
</div>
<div class="col-12 mt-3 mb-3">
<div class="row d-flex align-items-center">
<div class="col-auto">
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addSource()" [disabled]="formGroup.disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
</div>
</div>
</div>
<div class="col-12">
<div *ngFor="let source of formGroup.get('definition').get('sources').controls; let sourceIndex=index;" class="row">
<div class="col-12">
<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>
<app-external-fetcher-source-component [formGroup]="source" [fieldsForm]="formGroup.get('definition').get('fields')" [validationErrorModel]="editorModel.validationErrorModel" [validationRootPath]="'definition.sources[' + sourceIndex + '].'" [referenceTypeSourceIndex]="sourceIndex" [referenceTypes]="referenceTypes" [sourceKeysMap]="sourceKeysMap">
</app-external-fetcher-source-component>
</div>
</div>
<mat-error *ngIf="formGroup.get('definition').get('sources').dirty && formGroup.get('definition').get('sources').hasError('required')">{{'REFERENCE-TYPE-EDITOR.SOURCES-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('sources').hasError('backendError')">{{formGroup.get('definition').get('sources').getError('backendError').message}}</mat-error>
</div> </div>
</div> </div>
</form> </form>

View File

@ -1,3 +1,4 @@
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
@ -45,272 +46,299 @@
<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<ng-container *ngIf="formGroup.get('type').value == externalFetcherSourceType.API">
<div class="col-12" *ngIf="formGroup.get('type').value == externalFetcherSourceType.API"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.URL' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.URL' | translate}}</mat-label>
<input matInput type="text" name="ordinal" [formControl]="formGroup.get('url')"> <input matInput type="text" name="ordinal" [formControl]="formGroup.get('url')">
<mat-error *ngIf="formGroup.get('url').hasError('backendError')">{{formGroup.get('url').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('url').hasError('backendError')">{{formGroup.get('url').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('url').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('url').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-6"> <div class="col-6">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.PAGINATION-PATH' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.PAGINATION-PATH' | translate}}</mat-label>
<input matInput type="text" name="paginationPath" [formControl]="formGroup.get('paginationPath')"> <input matInput type="text" name="paginationPath" [formControl]="formGroup.get('paginationPath')">
<mat-error *ngIf="formGroup.get('paginationPath').hasError('backendError')">{{formGroup.get('paginationPath').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('paginationPath').hasError('backendError')">{{formGroup.get('paginationPath').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('paginationPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('paginationPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3"> <div class="col-3">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CONTENT-TYPE' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CONTENT-TYPE' | translate}}</mat-label>
<input matInput type="text" name="contentType" [formControl]="formGroup.get('contentType')"> <input matInput type="text" name="contentType" [formControl]="formGroup.get('contentType')">
<mat-error *ngIf="formGroup.get('contentType').hasError('backendError')">{{formGroup.get('contentType').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('contentType').hasError('backendError')">{{formGroup.get('contentType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('contentType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('contentType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3"> <div class="col-3">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FIRST-PAGE' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FIRST-PAGE' | translate}}</mat-label>
<input matInput type="text" name="firstPage" [formControl]="formGroup.get('firstPage')"> <input matInput type="text" name="firstPage" [formControl]="formGroup.get('firstPage')">
<mat-error *ngIf="formGroup.get('firstPage').hasError('backendError')">{{formGroup.get('firstPage').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('firstPage').hasError('backendError')">{{formGroup.get('firstPage').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('firstPage').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('firstPage').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3"> <div class="col-3">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label>
<mat-select name="httpMethod" [formControl]="formGroup.get('httpMethod')"> <mat-select name="httpMethod" [formControl]="formGroup.get('httpMethod')">
<mat-option *ngFor="let httpMethod of externalFetcherApiHTTPMethodTypeEnum" [value]="httpMethod"> <mat-option *ngFor="let httpMethod of externalFetcherApiHTTPMethodTypeEnum" [value]="httpMethod">
{{enumUtils.toExternalFetcherApiHTTPMethodTypeString(httpMethod)}} {{enumUtils.toExternalFetcherApiHTTPMethodTypeString(httpMethod)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('httpMethod').hasError('backendError')">{{formGroup.get('httpMethod').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('httpMethod').hasError('backendError')">{{formGroup.get('httpMethod').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('httpMethod').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('httpMethod').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3" *ngIf="formGroup.get('httpMethod').value == externalFetcherApiHTTPMethodType.POST"> <div class="col-3" *ngIf="formGroup.get('httpMethod').value == externalFetcherApiHTTPMethodType.POST">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
<input matInput type="text" name="requestBody" [formControl]="formGroup.get('requestBody')"> <input matInput type="text" name="requestBody" [formControl]="formGroup.get('requestBody')">
<mat-error *ngIf="formGroup.get('requestBody').hasError('backendError')">{{formGroup.get('requestBody').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('requestBody').hasError('backendError')">{{formGroup.get('requestBody').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('requestBody').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('requestBody').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-3"> <div class="col-3">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FILTER-TYPE' | translate}}</mat-label> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FILTER-TYPE' | translate}}</mat-label>
<input matInput type="text" name="filterType" [formControl]="formGroup.get('filterType')"> <input matInput type="text" name="filterType" [formControl]="formGroup.get('filterType')">
<mat-error *ngIf="formGroup.get('filterType').hasError('backendError')">{{formGroup.get('filterType').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('filterType').hasError('backendError')">{{formGroup.get('filterType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('filterType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('filterType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
<!-- Results info -->
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESULTS' | translate}}</h3>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESULTS-PATH' | translate}}</mat-label>
<input matInput type="text" name="resultsArrayPath" [formControl]="formGroup.get('results').get('resultsArrayPath')">
<mat-error *ngIf="formGroup.get('results').get('resultsArrayPath').hasError('backendError')">{{formGroup.get('results').get('resultsArrayPath').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('results').get('resultsArrayPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<!-- fields mapping -->
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FIELD-MAPPINGS' | translate}}</h3>
<div class="col-12">
<div *ngFor="let field of formGroup.get('results').get('fieldsMapping').controls; let fieldMappingIndex=index;" class="row mb-3">
<div class="col-12">
<div class="row d-flex align-items-center">
<div class="col-auto pb-3 d-flex">
<span>{{fieldMappingIndex + 1}}</span>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<input matInput type="text" [readonly]="field.get('code').disabled" name="code" [formControl]="field.get('code')" [readOnly]="true">
<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">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESPONSE-PATH' | translate}}</mat-label>
<input matInput type="text" name="responsePath" [formControl]="field.get('responsePath')">
<mat-error *ngIf="field.get('responsePath').hasError('backendError')">{{field.get('responsePath').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('responsePath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- Auth info --> </div>
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.AUTHENTICATION' | translate}} <!-- Results info -->
<mat-checkbox [formControl]="formGroup.get('auth').get('enabled')"></mat-checkbox> <div class="col-12">
</h3> <div class="row">
<div class="col-12" *ngIf="formGroup.get('auth').get('enabled').value == true"> <h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESULTS' | translate}}</h3>
<div class="row"> <div class="col-12">
<div class="col-12"> <mat-form-field class="w-100">
<mat-form-field class="w-100"> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESULTS-PATH' | translate}}</mat-label>
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.URL' | translate}}</mat-label> <input matInput type="text" name="resultsArrayPath" [formControl]="formGroup.get('results').get('resultsArrayPath')">
<input matInput type="text" name="authUrl" [formControl]="formGroup.get('auth').get('authUrl')"> <mat-error *ngIf="formGroup.get('results').get('resultsArrayPath').hasError('backendError')">{{formGroup.get('results').get('resultsArrayPath').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authUrl').hasError('backendError')">{{formGroup.get('auth').get('authUrl').getError('backendError').message}}</mat-error> <mat-error *ngIf="formGroup.get('results').get('resultsArrayPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authUrl').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-form-field>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label>
<mat-select name="httpMethod" [formControl]="formGroup.get('auth').get('authMethod')">
<mat-option *ngFor="let httpMethod of externalFetcherApiHTTPMethodTypeEnum" [value]="httpMethod">
{{enumUtils.toExternalFetcherApiHTTPMethodTypeString(httpMethod)}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('auth').get('authMethod').hasError('backendError')">{{formGroup.get('auth').get('authMethod').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authMethod').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.TOKEN-PATH' | translate}}</mat-label>
<input matInput type="text" name="authTokenPath" [formControl]="formGroup.get('auth').get('authTokenPath')">
<mat-error *ngIf="formGroup.get('auth').get('authTokenPath').hasError('backendError')">{{formGroup.get('auth').get('authTokenPath').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authTokenPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.TYPE' | translate}}</mat-label>
<input matInput type="text" name="type" [formControl]="formGroup.get('auth').get('type')">
<mat-error *ngIf="formGroup.get('auth').get('type').hasError('backendError')">{{formGroup.get('auth').get('type').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
<input matInput type="text" name="authRequestBody" [formControl]="formGroup.get('auth').get('authRequestBody')">
<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('backendError')">{{formGroup.get('auth').get('authRequestBody').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div> </div>
</div> </div>
<!-- Queries info --> </div>
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERIES' | translate}} <!-- fields mapping -->
<button mat-button type="button" class="action-btn" (click)="addQuery()" [disabled]="formGroup.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button> <div class="col-12">
</h3> <div class="row">
<div class="col-12"> <div class="col-12">
<div *ngFor="let query of formGroup.get('queries').controls; let queryIndex=index;" class="row mb-3"> <h3>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FIELD-MAPPINGS' | translate}}</h3>
<div class="col-12"> </div>
<div class="row mb-3 d-flex align-items-center"> <div class="col-12">
<div class="col-auto d-flex"> <div *ngFor="let field of formGroup.get('results').get('fieldsMapping').controls; let fieldMappingIndex=index;" class="row mb-3">
<h4 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4> <div class="col-12">
</div> <div class="row d-flex align-items-center">
<div class="col-auto d-flex"> <div class="col-auto pb-3 d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(queryIndex)" [disabled]="formGroup.disabled"> <span>{{fieldMappingIndex + 1}}</span>
<mat-icon>delete</mat-icon> </div>
</button> <div class="col">
</div> <mat-form-field class="w-100">
</div> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
<div class="row"> <input matInput type="text" [readonly]="field.get('code').disabled" name="code" [formControl]="field.get('code')" [readOnly]="true">
<div class="col-6"> <mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
<mat-form-field class="w-100"> <mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.NAME' | translate}}</mat-label> </mat-form-field>
<input matInput type="text" name="name" [formControl]="query.get('name')" required> </div>
<mat-error *ngIf="query.get('name').hasError('backendError')">{{query.get('name').getError('backendError').message}}</mat-error> <div class="col">
<mat-error *ngIf="query.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-form-field class="w-100">
</mat-form-field> <mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESPONSE-PATH' | translate}}</mat-label>
</div> <input matInput type="text" name="responsePath" [formControl]="field.get('responsePath')">
<div class="col-6"> <mat-error *ngIf="field.get('responsePath').hasError('backendError')">{{field.get('responsePath').getError('backendError').message}}</mat-error>
<mat-form-field class="w-100"> <mat-error *ngIf="field.get('responsePath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.DEFAULT-VALUE' | translate}}</mat-label> </mat-form-field>
<input matInput type="text" name="defaultValue" [formControl]="query.get('defaultValue')">
<mat-error *ngIf="query.get('defaultValue').hasError('backendError')">{{query.get('defaultValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="query.get('defaultValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<!-- Query Cases -->
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CASES' | translate}}
<button mat-button class="action-btn" type="button" (click)="addCase(queryIndex)" [disabled]="formGroup.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
</h3>
<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row">
<div class="col-12">
<div class="row mb d-flex align-items-center">
<div class="col-auto d-flex">
<span>{{caseIndex + 1}}</span>
</div>
<div class="col">
<div class="row">
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.LIKE-PATTERN' | translate}}</mat-label>
<input matInput type="text" name="likePattern" [formControl]="case.get('likePattern')">
<mat-error *ngIf="case.get('likePattern').hasError('backendError')">{{case.get('likePattern').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('likePattern').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.SEPARATOR' | translate}}</mat-label>
<input matInput type="text" name="separator" [formControl]="case.get('separator')">
<mat-error *ngIf="case.get('separator').hasError('backendError')">{{case.get('separator').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('separator').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput type="text" name="value" [formControl]="case.get('value')">
<mat-error *ngIf="case.get('value').hasError('backendError')">{{case.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-6" *ngIf="formGroup.get('referenceTypeDependencyIds').value">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.DEPENDENCY' | translate}}</mat-label>
<mat-select name="referenceTypeId" [formControl]="case.get('referenceTypeId')">
<mat-option *ngFor="let referenceType of referenceTypeDependenciesMap.get(referenceTypeSourceIndex)" [value]="referenceType.id">
{{referenceType.code}}
</mat-option>
</mat-select>
<mat-error *ngIf="case.get('referenceTypeId').hasError('backendError')">{{case.get('referenceTypeId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-6" *ngIf="case.get('referenceTypeId').value">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.SOURCE-KEY' | translate}}</mat-label>
<mat-select name='referenceTypeSourceKey' [formControl]="case.get('referenceTypeSourceKey')">
<mat-option *ngFor="let sourceKey of sourceKeysMap.get(case.get('referenceTypeId').value)" [value]="sourceKey">
{{sourceKey}}
</mat-option>
</mat-select>
<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('backendError')">{{case.get('referenceTypeSourceKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-CASE' | translate}}" (click)="removeCase(queryIndex, caseIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- Auth info -->
<div class="col-12">
<div class="row">
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.AUTHENTICATION' | translate}}
<mat-checkbox [formControl]="formGroup.get('auth').get('enabled')"></mat-checkbox>
</h3>
<div class="col-12" *ngIf="formGroup.get('auth').get('enabled').value == true">
<div class="row">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.URL' | translate}}</mat-label>
<input matInput type="text" name="authUrl" [formControl]="formGroup.get('auth').get('authUrl')">
<mat-error *ngIf="formGroup.get('auth').get('authUrl').hasError('backendError')">{{formGroup.get('auth').get('authUrl').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authUrl').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.HTTP-METHOD' | translate}}</mat-label>
<mat-select name="httpMethod" [formControl]="formGroup.get('auth').get('authMethod')">
<mat-option *ngFor="let httpMethod of externalFetcherApiHTTPMethodTypeEnum" [value]="httpMethod">
{{enumUtils.toExternalFetcherApiHTTPMethodTypeString(httpMethod)}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('auth').get('authMethod').hasError('backendError')">{{formGroup.get('auth').get('authMethod').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authMethod').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.TOKEN-PATH' | translate}}</mat-label>
<input matInput type="text" name="authTokenPath" [formControl]="formGroup.get('auth').get('authTokenPath')">
<mat-error *ngIf="formGroup.get('auth').get('authTokenPath').hasError('backendError')">{{formGroup.get('auth').get('authTokenPath').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authTokenPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.TYPE' | translate}}</mat-label>
<input matInput type="text" name="type" [formControl]="formGroup.get('auth').get('type')">
<mat-error *ngIf="formGroup.get('auth').get('type').hasError('backendError')">{{formGroup.get('auth').get('type').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.REQUEST-BODY' | translate}}</mat-label>
<input matInput type="text" name="authRequestBody" [formControl]="formGroup.get('auth').get('authRequestBody')">
<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('backendError')">{{formGroup.get('auth').get('authRequestBody').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('auth').get('authRequestBody').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
<!-- Queries info -->
<div class="col-12">
<div class="row align-items-center">
<div class="col-auto pr-0">
<h3 class="m-0">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERIES' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button type="button" class="action-btn" (click)="addQuery()" [disabled]="formGroup.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
</div>
</div>
</div>
<div class="col-12">
<div *ngFor="let query of formGroup.get('queries').controls; let queryIndex=index;" class="row">
<div class="col-12">
<div class="row d-flex align-items-center">
<div class="col-auto d-flex">
<h4>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
</div>
<div class="col-auto d-flex">
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(queryIndex)" [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>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="query.get('name')" required>
<mat-error *ngIf="query.get('name').hasError('backendError')">{{query.get('name').getError('backendError').message}}</mat-error>
<mat-error *ngIf="query.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-6">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.DEFAULT-VALUE' | translate}}</mat-label>
<input matInput type="text" name="defaultValue" [formControl]="query.get('defaultValue')">
<mat-error *ngIf="query.get('defaultValue').hasError('backendError')">{{query.get('defaultValue').getError('backendError').message}}</mat-error>
<mat-error *ngIf="query.get('defaultValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
<!-- Query Cases -->
<div class="row mb-2">
<div class="col-auto pr-0">
<h3 class="m-0">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CASES' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="action-btn" type="button" (click)="addCase(queryIndex)" [disabled]="formGroup.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
</div>
</div>
<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row">
<div class="col-12">
<div class="row mb d-flex align-items-center">
<div class="col-auto mb-4">
<span>{{caseIndex + 1}}</span>
</div>
<div class="col">
<div class="row">
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.LIKE-PATTERN' | translate}}</mat-label>
<input matInput type="text" name="likePattern" [formControl]="case.get('likePattern')">
<mat-error *ngIf="case.get('likePattern').hasError('backendError')">{{case.get('likePattern').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('likePattern').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.SEPARATOR' | translate}}</mat-label>
<input matInput type="text" name="separator" [formControl]="case.get('separator')">
<mat-error *ngIf="case.get('separator').hasError('backendError')">{{case.get('separator').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('separator').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput type="text" name="value" [formControl]="case.get('value')">
<mat-error *ngIf="case.get('value').hasError('backendError')">{{case.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-6" *ngIf="formGroup.get('referenceTypeDependencyIds').value">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.DEPENDENCY' | translate}}</mat-label>
<mat-select name="referenceTypeId" [formControl]="case.get('referenceTypeId')">
<mat-option *ngFor="let referenceType of referenceTypeDependenciesMap.get(referenceTypeSourceIndex)" [value]="referenceType.id">
{{referenceType.code}}
</mat-option>
</mat-select>
<mat-error *ngIf="case.get('referenceTypeId').hasError('backendError')">{{case.get('referenceTypeId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-6" *ngIf="case.get('referenceTypeId').value">
<mat-form-field class="w-100">
<mat-label>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.SOURCE-KEY' | translate}}</mat-label>
<mat-select name='referenceTypeSourceKey' [formControl]="case.get('referenceTypeSourceKey')">
<mat-option *ngFor="let sourceKey of sourceKeysMap.get(case.get('referenceTypeId').value)" [value]="sourceKey">
{{sourceKey}}
</mat-option>
</mat-select>
<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('backendError')">{{case.get('referenceTypeSourceKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="case.get('referenceTypeSourceKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<div class="col-auto mb-4">
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-CASE' | translate}}" (click)="removeCase(queryIndex, caseIndex)" [disabled]="formGroup.disabled">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<!-- Static Items --> <!-- Static Items -->
<div class="col-12" *ngIf="formGroup.get('type').value == externalFetcherSourceType.STATIC"> <div class="col-12" *ngIf="formGroup.get('type').value == externalFetcherSourceType.STATIC">

View File

@ -31,7 +31,7 @@
<mat-card-content> <mat-card-content>
<div class="row mt-4"> <div class="row mt-4">
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container-fluid">
<div class="row flex-wrap"> <div class="row flex-wrap">
<div class="col-md-12"> <div class="col-md-12">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
@ -89,7 +89,7 @@
<!-- Subject --> <!-- Subject -->
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container-fluid">
<div class="row flex-wrap"> <div class="row flex-wrap">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3> <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3>
<div class="col-md-6"> <div class="col-md-6">
@ -114,7 +114,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container-fluid">
<div class="row"> <div class="row">
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}} <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox> <mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox>
@ -136,7 +136,7 @@
<!-- Body --> <!-- Body -->
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container-fluid">
<div class="row"> <div class="row">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3> <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
<div class="col-md-6"> <div class="col-md-6">
@ -177,7 +177,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container-fluid">
<div class="row"> <div class="row">
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}} <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox> <mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
@ -198,7 +198,7 @@
<!--Extra Options --> <!--Extra Options -->
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="container"> <div class="container-fluid">
<div class="row"> <div class="row">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3> <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3>
<div> <div>