notification template ui changes

This commit is contained in:
Sofia Papacharalampous 2024-04-16 16:06:28 +03:00
parent 0598067608
commit 6bb091868c
1 changed files with 254 additions and 206 deletions

View File

@ -29,80 +29,100 @@
<mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.NEW' | translate}}</mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="d-flex flex-wrap mt-4"> <div class="row mt-4">
<div class="col-md-12"> <div class="col-12">
<mat-form-field class="w-100"> <div class="container">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label> <div class="row flex-wrap">
<mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required> <div class="col-md-12">
<mat-option *ngFor="let type of notificationTypeEnum" [value]="type"> <mat-form-field class="w-100">
{{enumUtils.toNotificationTypeString(type)}} <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label>
</mat-option> <mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required>
</mat-select> <mat-option *ngFor="let type of notificationTypeEnum" [value]="type">
<mat-error *ngIf="formGroup.get('notificationType').hasError('backendError')">{{formGroup.get('notificationType').getError('backendError').message}}</mat-error> {{enumUtils.toNotificationTypeString(type)}}
<mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-option>
</mat-form-field> </mat-select>
</div> <mat-error *ngIf="formGroup.get('notificationType').hasError('backendError')">{{formGroup.get('notificationType').getError('backendError').message}}</mat-error>
<div class="col-12 col-lg-4"> <mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-form-field class="w-100"> </mat-form-field>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label> </div>
<mat-select [formControl]="formGroup.get('languageCode')" name="language" required> <div class="col-12 col-lg-4">
<mat-option *ngFor="let language of languages" [value]="language.code"> <mat-form-field class="w-100">
{{language.code}} <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
</mat-option> <mat-select [formControl]="formGroup.get('languageCode')" name="language" required>
</mat-select> <mat-option *ngFor="let language of languages" [value]="language.code">
<mat-error *ngIf="formGroup.get('languageCode').hasError('backendError')">{{formGroup.get('languageCode').getError('backendError').message}}</mat-error> {{language.code}}
<mat-error *ngIf="formGroup.get('languageCode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-option>
</mat-form-field> </mat-select>
</div> <mat-error *ngIf="formGroup.get('languageCode').hasError('backendError')">{{formGroup.get('languageCode').getError('backendError').message}}</mat-error>
<div class="col-12 col-lg-4"> <mat-error *ngIf="formGroup.get('languageCode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-form-field class="w-100"> </mat-form-field>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label> </div>
<mat-select name="kind" [formControl]="formGroup.get('kind')" required> <div class="col-12 col-lg-4">
<mat-option *ngFor="let kind of notificationTemplateKindEnum" [value]="kind"> <mat-form-field class="w-100">
{{enumUtils.toNotificationTemplateKindString(kind)}} <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KIND' | translate}}</mat-label>
</mat-option> <mat-select name="kind" [formControl]="formGroup.get('kind')" required>
</mat-select> <mat-option *ngFor="let kind of notificationTemplateKindEnum" [value]="kind">
<mat-error *ngIf="formGroup.get('kind').hasError('backendError')">{{formGroup.get('kind').getError('backendError').message}}</mat-error> {{enumUtils.toNotificationTemplateKindString(kind)}}
<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-option>
</mat-form-field> </mat-select>
</div> <mat-error *ngIf="formGroup.get('kind').hasError('backendError')">{{formGroup.get('kind').getError('backendError').message}}</mat-error>
<div class="col-12 col-lg-4"> <mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-form-field class="w-100"> </mat-form-field>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label> </div>
<mat-select name="channel" [formControl]="formGroup.get('channel')" required> <div class="col-12 col-lg-4">
<mat-option *ngFor="let channel of notificationTemplateChannelEnum" [value]="channel"> <mat-form-field class="w-100">
{{enumUtils.toNotificationTemplateChannelString(channel)}} <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CHANNEL' | translate}}</mat-label>
</mat-option> <mat-select name="channel" [formControl]="formGroup.get('channel')" required>
</mat-select> <mat-option *ngFor="let channel of notificationTemplateChannelEnum" [value]="channel">
<mat-error *ngIf="formGroup.get('channel').hasError('backendError')">{{formGroup.get('channel').getError('backendError').message}}</mat-error> {{enumUtils.toNotificationTemplateChannelString(channel)}}
<mat-error *ngIf="formGroup.get('channel').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-option>
</mat-form-field> </mat-select>
<mat-error *ngIf="formGroup.get('channel').hasError('backendError')">{{formGroup.get('channel').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('channel').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div> </div>
</div> </div>
<!-- Subject --> <!-- Subject -->
<div class="d-flex flex-wrap"> <div class="row">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3> <div class="col-12">
<div class="col-md-6"> <div class="container">
<mat-form-field class="w-100"> <div class="row flex-wrap">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label> <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-SECTION' | translate}}</h3>
<input matInput [formControl]="formGroup.get('value').get('subjectText')"> <div class="col-md-6">
<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error> <mat-form-field class="w-100">
<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label>
</mat-form-field> <input matInput [formControl]="formGroup.get('value').get('subjectText')">
</div> <mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error>
<div class="col-md-6"> <mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-form-field class="w-100"> </mat-form-field>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label> </div>
<input matInput [formControl]="formGroup.get('value').get('subjectKey')"> <div class="col-md-6">
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('backendError')">{{formGroup.get('value').get('subjectKey').getError('backendError').message}}</mat-error> <mat-form-field class="w-100">
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label>
</mat-form-field> <input matInput [formControl]="formGroup.get('value').get('subjectKey')">
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('backendError')">{{formGroup.get('value').get('subjectKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('subjectKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="container">
<div class="row">
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox>
</h4>
</div>
</div>
</div> </div>
</div> </div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="subjectFieldOptionsEnabled" (change)="subjectFieldOptionsSelectionChanged($event)"></mat-checkbox>
</h4>
<ng-container *ngIf="subjectFieldOptionsEnabled == true"> <ng-container *ngIf="subjectFieldOptionsEnabled == true">
<app-notification-template-field-options-component <app-notification-template-field-options-component
[form]="formGroup.get('value').get('subjectFieldOptions')" [form]="formGroup.get('value').get('subjectFieldOptions')"
@ -114,44 +134,58 @@
</ng-container> </ng-container>
<!-- Body --> <!-- Body -->
<div> <div class="row">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
<div class="col-md-6">
<mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('bodyKey')">
<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('backendError')">{{formGroup.get('value').get('bodyKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12"> <div class="col-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label> <div class="container">
<editor class="w-100 mt-2" [init]="{ <div class="row">
base_url: '/tinymce', <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-SECTION' | translate}}</h3>
suffix: '.min', <div class="col-md-6">
height: 800, <mat-form-field class="w-100">
menubar: true, <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
plugins: [ <input matInput [formControl]="formGroup.get('value').get('bodyKey')">
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor', <mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('backendError')">{{formGroup.get('value').get('bodyKey').getError('backendError').message}}</mat-error>
'searchreplace', 'visualblocks', 'fullpage', <mat-error *ngIf="formGroup.get('value').get('bodyKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
'insertdatetime', 'media', 'table' ,'paste', 'code', 'help', 'wordcount','importcss', </mat-form-field>
], </div>
extended_valid_elements: '*[*]', <div class="col-12">
forced_root_block: '', <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-TEXT' | translate}}</mat-label>
valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]', <editor class="w-100 mt-2" [init]="{
save_enablewhendirty: false, base_url: '/tinymce',
toolbar: suffix: '.min',
'undo redo | formatselect | bold italic backcolor | \ height: 800,
alignleft aligncenter alignright alignjustify | \ menubar: true,
bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image' plugins: [
}" [formControl]="formGroup.get('value').get('bodyText')"></editor> 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'print', 'preview', 'anchor',
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('backendError')">{{formGroup.get('value').get('bodyText').getError('backendError').message}}</mat-error> 'searchreplace', 'visualblocks', 'fullpage',
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> 'insertdatetime', 'media', 'table' ,'paste', 'code', 'help', 'wordcount','importcss',
],
extended_valid_elements: '*[*]',
forced_root_block: '',
valid_children: '+body[script],ol[li|div|p|a|ol|table],h2[span],h3[span]',
save_enablewhendirty: false,
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image'
}" [formControl]="formGroup.get('value').get('bodyText')"></editor>
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('backendError')">{{formGroup.get('value').get('bodyText').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="container">
<div class="row">
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
</h4>
</div>
</div>
</div> </div>
</div> </div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-FIELD-OPTIONS' | translate}}
<mat-checkbox [checked]="bodyFieldOptionsEnabled" (change)="bodyFieldOptionsSelectionChanged($event)"></mat-checkbox>
</h4>
<ng-container *ngIf="bodyFieldOptionsEnabled == true"> <ng-container *ngIf="bodyFieldOptionsEnabled == true">
<app-notification-template-field-options-component <app-notification-template-field-options-component
[form]="formGroup.get('value').get('bodyFieldOptions')" [form]="formGroup.get('value').get('bodyFieldOptions')"
@ -163,110 +197,124 @@
</ng-container> </ng-container>
<!--Extra Options --> <!--Extra Options -->
<div class="row"> <div class="row">
<h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3> <div class="col-12">
<div> <div class="container">
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.ALLOW-ATTACHMENTS' | translate}} <div class="row">
<mat-checkbox [formControl]="formGroup.get('value').get('allowAttachments')"></mat-checkbox> <h3 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-OPTIONS' | translate}}</h3>
<mat-error *ngIf="formGroup.get('value').get('allowAttachments').hasError('backendError')">{{formGroup.get('value').get('allowAttachments').getError('backendError').message}}</mat-error> <div>
</h4> <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.ALLOW-ATTACHMENTS' | translate}}
<mat-checkbox [formControl]="formGroup.get('value').get('allowAttachments')"></mat-checkbox>
<mat-error *ngIf="formGroup.get('value').get('allowAttachments').hasError('backendError')">{{formGroup.get('value').get('allowAttachments').getError('backendError').message}}</mat-error>
</h4>
</div>
</div>
</div>
</div> </div>
<div class="col-4"> </div>
<mat-form-field class="col-md-12"> <div class="row">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label> <div class="col-12">
<input matInput [formControl]="formGroup.get('value').get('priorityKey')"> <div class="container">
<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('backendError')">{{formGroup.get('value').get('priorityKey').getError('backendError').message}}</mat-error> <div class="row">
<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <div class="col-12 col-lg-4">
</mat-form-field> <mat-form-field class="w-100">
</div> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label>
<div class="col-4" > <input matInput [formControl]="formGroup.get('value').get('priorityKey')">
<mat-form-field class="chip-list"> <mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('backendError')">{{formGroup.get('value').get('priorityKey').getError('backendError').message}}</mat-error>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC' | translate}}</mat-label> <mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-chip-grid #cc [formControl]="formGroup.get('value').get('cc')"> </mat-form-field>
<mat-chip-row *ngFor="let field of ccValues" </div>
(removed)="removeChipListValues('cc', field)" <div class="col-12 col-lg-4">
[editable]="true" <mat-form-field class="w-100 chip-list">
(edited)="editChipListValues('cc', $event, field)"> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC' | translate}}</mat-label>
{{field}} <mat-chip-grid #cc [formControl]="formGroup.get('value').get('cc')">
<button matChipRemove> <mat-chip-row *ngFor="let field of ccValues"
<mat-icon>cancel</mat-icon> (removed)="removeChipListValues('cc', field)"
</button> [editable]="true"
</mat-chip-row> (edited)="editChipListValues('cc', $event, field)">
<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" {{field}}
[matChipInputFor]="cc" <button matChipRemove>
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" <mat-icon>cancel</mat-icon>
[matChipInputAddOnBlur]="true" </button>
(matChipInputTokenEnd)="addChipListValues('cc',$event)"/> </mat-chip-row>
</mat-chip-grid> <input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
<mat-error *ngIf="formGroup.get('value').get('cc').hasError('backendError')">{{formGroup.get('value').get('cc').getError('backendError').message}}</mat-error> [matChipInputFor]="cc"
</mat-form-field> [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
</div> [matChipInputAddOnBlur]="true"
<div class="col-4"> (matChipInputTokenEnd)="addChipListValues('cc',$event)"/>
<mat-form-field class="col-auto"> </mat-chip-grid>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC-MODE' | translate}}</mat-label> <mat-error *ngIf="formGroup.get('value').get('cc').hasError('backendError')">{{formGroup.get('value').get('cc').getError('backendError').message}}</mat-error>
<mat-select name="ccMode" [formControl]="formGroup.get('value').get('ccMode')"> </mat-form-field>
<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode"> </div>
{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}} <div class="col-12 col-lg-4">
</mat-option> <mat-form-field class="w-100">
</mat-select> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.CC-MODE' | translate}}</mat-label>
<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('backendError')">{{formGroup.get('value').get('ccMode').getError('backendError').message}}</mat-error> <mat-select name="ccMode" [formControl]="formGroup.get('value').get('ccMode')">
<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
</mat-form-field> {{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
</div> </mat-option>
<div class="col-4" > </mat-select>
<mat-form-field class="chip-list"> <mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('backendError')">{{formGroup.get('value').get('ccMode').getError('backendError').message}}</mat-error>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label> <mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-chip-grid #bcc [formControl]="formGroup.get('value').get('bcc')"> </mat-form-field>
<mat-chip-row *ngFor="let field of bccValues" </div>
(removed)="removeChipListValues('bcc', field)" <div class="col-12 col-lg-4">
[editable]="true" <mat-form-field class="w-100 chip-list">
(edited)="editChipListValues('bcc', $event, field)"> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC' | translate}}</mat-label>
{{field}} <mat-chip-grid #bcc [formControl]="formGroup.get('value').get('bcc')">
<button matChipRemove> <mat-chip-row *ngFor="let field of bccValues"
<mat-icon>cancel</mat-icon> (removed)="removeChipListValues('bcc', field)"
</button> [editable]="true"
</mat-chip-row> (edited)="editChipListValues('bcc', $event, field)">
<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" {{field}}
[matChipInputFor]="bcc" <button matChipRemove>
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" <mat-icon>cancel</mat-icon>
[matChipInputAddOnBlur]="true" </button>
(matChipInputTokenEnd)="addChipListValues('bcc',$event)"/> </mat-chip-row>
</mat-chip-grid> <input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
<mat-error *ngIf="formGroup.get('value').get('bcc').hasError('backendError')">{{formGroup.get('value').get('bcc').getError('backendError').message}}</mat-error> [matChipInputFor]="bcc"
</mat-form-field> [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
</div> [matChipInputAddOnBlur]="true"
<div class="col-4"> (matChipInputTokenEnd)="addChipListValues('bcc',$event)"/>
<mat-form-field class="col-auto"> </mat-chip-grid>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label> <mat-error *ngIf="formGroup.get('value').get('bcc').hasError('backendError')">{{formGroup.get('value').get('bcc').getError('backendError').message}}</mat-error>
<mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')"> </mat-form-field>
<mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode"> </div>
{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}} <div class="col-12 col-lg-4">
</mat-option> <mat-form-field class="w-100">
</mat-select> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BCC-MODE' | translate}}</mat-label>
<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('backendError')">{{formGroup.get('value').get('bccMode').getError('backendError').message}}</mat-error> <mat-select name="bccMode" [formControl]="formGroup.get('value').get('bccMode')">
<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-option *ngFor="let emailOverrideMode of emailOverrideModeEnum" [value]="emailOverrideMode">
</mat-form-field> {{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
</div> </mat-option>
<div class="col-4" > </mat-select>
<mat-form-field class="chip-list"> <mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('backendError')">{{formGroup.get('value').get('bccMode').getError('backendError').message}}</mat-error>
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label> <mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-chip-grid #extraDataKeys [formControl]="formGroup.get('value').get('extraDataKeys')"> </mat-form-field>
<mat-chip-row *ngFor="let field of extraDataKeys" </div>
(removed)="removeChipListValues('extraDataKeys', field)" <div class="col-12 col-lg-4">
[editable]="true" <mat-form-field class="w-100 chip-list">
(edited)="editChipListValues('extraDataKeys', $event, field)"> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.EXTRA-DATA-KEYS' | translate}}</mat-label>
{{field}} <mat-chip-grid #extraDataKeys [formControl]="formGroup.get('value').get('extraDataKeys')">
<button matChipRemove> <mat-chip-row *ngFor="let field of extraDataKeys"
<mat-icon>cancel</mat-icon> (removed)="removeChipListValues('extraDataKeys', field)"
</button> [editable]="true"
</mat-chip-row> (edited)="editChipListValues('extraDataKeys', $event, field)">
<input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}" {{field}}
[matChipInputFor]="extraDataKeys" <button matChipRemove>
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" <mat-icon>cancel</mat-icon>
[matChipInputAddOnBlur]="true" </button>
(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/> </mat-chip-row>
</mat-chip-grid> <input placeholder="{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.MANDATORY-PLACEHOLDER' | translate}}"
<mat-error *ngIf="formGroup.get('value').get('extraDataKeys').hasError('backendError')">{{formGroup.get('value').get('extraDataKeys').getError('backendError').message}}</mat-error> [matChipInputFor]="extraDataKeys"
</mat-form-field> [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/>
</mat-chip-grid>
<mat-error *ngIf="formGroup.get('value').get('extraDataKeys').hasError('backendError')">{{formGroup.get('value').get('extraDataKeys').getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
</div> </div>
</div> </div>
</mat-card-content> </mat-card-content>