editor-screens spacing changes
This commit is contained in:
parent
6bb091868c
commit
1421dcf009
|
@ -36,22 +36,32 @@
|
||||||
</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">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="container-fluid">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 pt-1 pb-1">
|
<div class="col-12 pt-1 pb-1">
|
||||||
<span>
|
<span>
|
||||||
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}
|
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="col-12 mt-1">
|
<div class="col-12 mt-1">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}" type="text" name="name" [formControl]="formGroup.get('name')" required>
|
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.FIELDS.NAME' | translate}}" type="text" name="name" [formControl]="formGroup.get('name')" required>
|
||||||
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">
|
<mat-error *ngIf="formGroup.get('name').hasError('backendError')">{{formGroup.get('name').getError('backendError').message}}</mat-error>
|
||||||
{{formGroup.get('name').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="formGroup.get('name').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
<mat-error *ngIf="formGroup.get('name').hasError('required')">
|
|
||||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
|
@ -30,6 +30,9 @@
|
||||||
</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="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
|
@ -47,7 +50,14 @@
|
||||||
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
<div class="col-12 mt-3 mb-3">
|
<div class="col-12 mt-3 mb-3">
|
||||||
<div class="row d-flex align-items-center">
|
<div class="row d-flex align-items-center">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
|
@ -58,7 +68,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- FIELDS -->
|
<!-- FIELDS -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<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 *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
@ -143,6 +161,9 @@
|
||||||
<mat-error *ngIf="formGroup.get('definition').get('sources').hasError('backendError')">{{formGroup.get('definition').get('sources').getError('backendError').message}}</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>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
|
@ -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,8 +46,8 @@
|
||||||
<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">
|
||||||
|
@ -108,7 +109,11 @@
|
||||||
<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>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Results info -->
|
<!-- Results info -->
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESULTS' | translate}}</h3>
|
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.RESULTS' | translate}}</h3>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
|
@ -118,8 +123,14 @@
|
||||||
<mat-error *ngIf="formGroup.get('results').get('resultsArrayPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="formGroup.get('results').get('resultsArrayPath').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- fields mapping -->
|
<!-- fields mapping -->
|
||||||
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FIELD-MAPPINGS' | translate}}</h3>
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<h3>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.FIELD-MAPPINGS' | translate}}</h3>
|
||||||
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div *ngFor="let field of formGroup.get('results').get('fieldsMapping').controls; let fieldMappingIndex=index;" class="row mb-3">
|
<div *ngFor="let field of formGroup.get('results').get('fieldsMapping').controls; let fieldMappingIndex=index;" class="row mb-3">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
|
@ -147,7 +158,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Auth info -->
|
<!-- Auth info -->
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row">
|
||||||
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.AUTHENTICATION' | translate}}
|
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.AUTHENTICATION' | translate}}
|
||||||
<mat-checkbox [formControl]="formGroup.get('auth').get('enabled')"></mat-checkbox>
|
<mat-checkbox [formControl]="formGroup.get('auth').get('enabled')"></mat-checkbox>
|
||||||
</h3>
|
</h3>
|
||||||
|
@ -199,16 +214,25 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Queries info -->
|
<!-- Queries info -->
|
||||||
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERIES' | translate}}
|
<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>
|
<button mat-button type="button" class="action-btn" (click)="addQuery()" [disabled]="formGroup.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
|
||||||
</h3>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div *ngFor="let query of formGroup.get('queries').controls; let queryIndex=index;" class="row mb-3">
|
<div *ngFor="let query of formGroup.get('queries').controls; let queryIndex=index;" class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row mb-3 d-flex align-items-center">
|
<div class="row d-flex align-items-center">
|
||||||
<div class="col-auto d-flex">
|
<div class="col-auto d-flex">
|
||||||
<h4 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
|
<h4>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto d-flex">
|
<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">
|
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(queryIndex)" [disabled]="formGroup.disabled">
|
||||||
|
@ -236,13 +260,18 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Query Cases -->
|
<!-- Query Cases -->
|
||||||
<h3 class="col-12">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CASES' | translate}}
|
<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>
|
<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>
|
||||||
|
</div>
|
||||||
<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row">
|
<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row mb d-flex align-items-center">
|
<div class="row mb d-flex align-items-center">
|
||||||
<div class="col-auto d-flex">
|
<div class="col-auto mb-4">
|
||||||
<span>{{caseIndex + 1}}</span>
|
<span>{{caseIndex + 1}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
|
@ -297,7 +326,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto d-flex">
|
<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">
|
<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>
|
<mat-icon>delete</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
@ -306,11 +335,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue