add notification template editor validators

This commit is contained in:
amentis 2024-01-22 11:35:40 +02:00
parent c26c472ea8
commit 101a0aace9
4 changed files with 181 additions and 38 deletions

View File

@ -112,7 +112,7 @@ export class LanguageHttpService {
nameof<Language>(x => x.code) nameof<Language>(x => x.code)
] ]
}; };
lookup.order = { items: [nameof<Language>(x => x.code)] }; lookup.order = { items: [nameof<Language>(x => x.ordinal)] };
if (like) { lookup.like = this.filterService.transformLike(like); } if (like) { lookup.like = this.filterService.transformLike(like); }
return lookup; return lookup;
} }

View File

@ -33,21 +33,24 @@
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.NOTIFICATION-TYPE' | translate}}</mat-label>
<mat-select [value] = "notificationType" [formControl]="formGroup.get('notificationType')" name="notificationType" required> <mat-select [formControl]="formGroup.get('notificationType')" name="notificationType" required>
<mat-option *ngFor="let type of notificationTypeEnum" [value]="type"> <mat-option *ngFor="let type of notificationTypeEnum" [value]="type">
{{enumUtils.toNotificationTypeString(type)}} {{enumUtils.toNotificationTypeString(type)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('notificationType').hasError('backendError')">{{formGroup.get('notificationType').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('notificationType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="w-100"> <mat-form-field class="w-100">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.LANGUAGE' | translate}}</mat-label>
<mat-select [(value)]="languageCode" (selectionChange)="selectedLangChanged($event.value)" name="language" required> <mat-select [formControl]="formGroup.get('languageId')" name="language" required>
<mat-option *ngFor="let languageCode of availableLanguageCodes" [value]="languageCode"> <mat-option *ngFor="let language of languages" [value]="language.id">
{{languageCode}} {{language.code}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('languageId').hasError('backendError')">{{formGroup.get('languageId').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('languageId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('languageId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -59,6 +62,7 @@
{{enumUtils.toNotificationTemplateKindString(kind)}} {{enumUtils.toNotificationTemplateKindString(kind)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('kind').hasError('backendError')">{{formGroup.get('kind').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('kind').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -70,6 +74,7 @@
{{enumUtils.toNotificationTemplateChannelString(channel)}} {{enumUtils.toNotificationTemplateChannelString(channel)}}
</mat-option> </mat-option>
</mat-select> </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-error *ngIf="formGroup.get('channel').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -81,12 +86,14 @@
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-TEXT' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('subjectText')"> <input matInput [formControl]="formGroup.get('value').get('subjectText')">
<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('backendError')">{{formGroup.get('value').get('subjectText').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('value').get('subjectText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<div class="col-4"> <div class="col-4">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.SUBJECT-KEY' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('subjectKey')"> <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-error *ngIf="formGroup.get('value').get('subjectKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -114,6 +121,7 @@
[matChipInputAddOnBlur]="true" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addChipListValues('subject', $event)"/> (matChipInputTokenEnd)="addChipListValues('subject', $event)"/>
</mat-chip-grid> </mat-chip-grid>
<mat-error *ngIf="formGroup.get('value').get('subjectFieldOptions').get('mandatory').hasError('backendError')">{{formGroup.get('value').get('subjectFieldOptions').get('mandatory').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.OPTIONAL-TITLE' | translate}}</h4> <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.OPTIONAL-TITLE' | translate}}</h4>
@ -123,6 +131,7 @@
<mat-form-field class="col-auto"> <mat-form-field class="col-auto">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<input matInput [formControl]="subjectOptions.get('key')"> <input matInput [formControl]="subjectOptions.get('key')">
<mat-error *ngIf="subjectOptions.get('key').hasError('backendError')">{{subjectOptions.get('key').getError('backendError').message}}</mat-error>
<mat-error *ngIf="subjectOptions.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="subjectOptions.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -134,6 +143,7 @@
{{enumUtils.toNotificationTemplateDataTypeString(type)}} {{enumUtils.toNotificationTemplateDataTypeString(type)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="subjectOptions.get('type').hasError('backendError')">{{subjectOptions.get('type').getError('backendError').message}}</mat-error>
<mat-error *ngIf="subjectOptions.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="subjectOptions.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -141,6 +151,7 @@
<mat-form-field class="col"> <mat-form-field class="col">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput [formControl]="subjectOptions.get('value')"> <input matInput [formControl]="subjectOptions.get('value')">
<mat-error *ngIf="subjectOptions.get('value').hasError('backendError')">{{subjectOptions.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="subjectOptions.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="subjectOptions.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<div class="col-auto"> <div class="col-auto">
@ -152,7 +163,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<button mat-icon-button (click)="addOptionalItem(formGroup.get('value').get('subjectFieldOptions'))" [disabled]="formGroup.disabled"> <button mat-icon-button (click)="addSubjectOptionalItem()" [disabled]="formGroup.disabled">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
</div> </div>
@ -167,6 +178,7 @@
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput [value] ="subjectFormatting[item]" (change)="subjectFormattingValueChange($event, item)"> <input matInput [value] ="subjectFormatting[item]" (change)="subjectFormattingValueChange($event, item)">
<mat-error *ngIf="formGroup.get('value').get('subjectFieldOptions').get('formatting').hasError('backendError')">{{formGroup.get('value').get('subjectFieldOptions').get('formatting').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row" *ngFor="let item of formGroup.get('value').get('subjectFieldOptions').get('optional')['controls']; let i = index"> <div class="row" *ngFor="let item of formGroup.get('value').get('subjectFieldOptions').get('optional')['controls']; let i = index">
@ -178,6 +190,7 @@
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput [value]="subjectFormatting[item]" (change)="subjectFormattingValueChange($event, item)"> <input matInput [value]="subjectFormatting[item]" (change)="subjectFormattingValueChange($event, item)">
<mat-error *ngIf="formGroup.get('value').get('subjectFieldOptions').get('formatting').hasError('backendError')">{{formGroup.get('value').get('subjectFieldOptions').get('formatting').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -190,6 +203,7 @@
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.BODY-KEY' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('bodyKey')"> <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-error *ngIf="formGroup.get('value').get('bodyKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -214,6 +228,7 @@
alignleft aligncenter alignright alignjustify | \ alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image' bullist numlist outdent indent | code | searchreplace | preview | removeformat | help | link | image'
}" [formControl]="formGroup.get('value').get('bodyText')"></editor> }" [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> <mat-error *ngIf="formGroup.get('value').get('bodyText').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div> </div>
</div> </div>
@ -240,6 +255,7 @@
[matChipInputAddOnBlur]="true" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addChipListValues('body',$event)"/> (matChipInputTokenEnd)="addChipListValues('body',$event)"/>
</mat-chip-grid> </mat-chip-grid>
<mat-error *ngIf="formGroup.get('value').get('bodyFieldOptions').get('mandatory').hasError('backendError')">{{formGroup.get('value').get('bodyFieldOptions').get('mandatory').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.OPTIONAL-TITLE' | translate}}</h4> <h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.OPTIONAL-TITLE' | translate}}</h4>
@ -249,6 +265,7 @@
<mat-form-field class="col-auto"> <mat-form-field class="col-auto">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.KEY' | translate}}</mat-label>
<input matInput [formControl]="bodyOptions.get('key')"> <input matInput [formControl]="bodyOptions.get('key')">
<mat-error *ngIf="bodyOptions.get('key').hasError('backendError')">{{bodyOptions.get('key').getError('backendError').message}}</mat-error>
<mat-error *ngIf="bodyOptions.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="bodyOptions.get('key').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -260,6 +277,7 @@
{{enumUtils.toNotificationTemplateDataTypeString(type)}} {{enumUtils.toNotificationTemplateDataTypeString(type)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="bodyOptions.get('type').hasError('backendError')">{{bodyOptions.get('type').getError('backendError').message}}</mat-error>
<mat-error *ngIf="bodyOptions.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="bodyOptions.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -267,6 +285,7 @@
<mat-form-field class="col"> <mat-form-field class="col">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput [formControl]="bodyOptions.get('value')"> <input matInput [formControl]="bodyOptions.get('value')">
<mat-error *ngIf="bodyOptions.get('value').hasError('backendError')">{{bodyOptions.get('value').getError('backendError').message}}</mat-error>
<mat-error *ngIf="bodyOptions.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="bodyOptions.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<div class="col-auto"> <div class="col-auto">
@ -278,7 +297,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<button mat-icon-button (click)="addOptionalItem(formGroup.get('value').get('bodyFieldOptions'))" [disabled]="formGroup.disabled"> <button mat-icon-button (click)="addBodyOptionalItem()" [disabled]="formGroup.disabled">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
</button> </button>
</div> </div>
@ -292,6 +311,7 @@
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput [value] ="bodyFormatting[item]" (change)="bodyFormattingValueChange($event, item)"> <input matInput [value] ="bodyFormatting[item]" (change)="bodyFormattingValueChange($event, item)">
<mat-error *ngIf="formGroup.get('value').get('bodyFieldOptions').get('formatting').hasError('backendError')">{{formGroup.get('value').get('bodyFieldOptions').get('formatting').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row" *ngFor="let item of formGroup.get('value').get('bodyFieldOptions').get('optional')['controls']; let i = index"> <div class="row" *ngFor="let item of formGroup.get('value').get('bodyFieldOptions').get('optional')['controls']; let i = index">
@ -303,6 +323,7 @@
<mat-form-field class="col-md-4"> <mat-form-field class="col-md-4">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
<input matInput [value]="bodyFormatting[item]" (change)="bodyFormattingValueChange($event, item)"> <input matInput [value]="bodyFormatting[item]" (change)="bodyFormattingValueChange($event, item)">
<mat-error *ngIf="formGroup.get('value').get('bodyFieldOptions').get('formatting').hasError('backendError')">{{formGroup.get('value').get('bodyFieldOptions').get('formatting').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
@ -314,12 +335,14 @@
<div> <div>
<h4 class="col-md-12">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.ALLOW-ATTACHMENTS' | translate}} <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-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> </h4>
</div> </div>
<div class="col-4"> <div class="col-4">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label> <mat-label>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.FIELDS.PRIORITY-KEY' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('value').get('priorityKey')"> <input matInput [formControl]="formGroup.get('value').get('priorityKey')">
<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('backendError')">{{formGroup.get('value').get('priorityKey').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('value').get('priorityKey').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -342,6 +365,7 @@
[matChipInputAddOnBlur]="true" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addChipListValues('cc',$event)"/> (matChipInputTokenEnd)="addChipListValues('cc',$event)"/>
</mat-chip-grid> </mat-chip-grid>
<mat-error *ngIf="formGroup.get('value').get('cc').hasError('backendError')">{{formGroup.get('value').get('cc').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
@ -352,6 +376,7 @@
{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}} {{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('backendError')">{{formGroup.get('value').get('ccMode').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('value').get('ccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -374,6 +399,7 @@
[matChipInputAddOnBlur]="true" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addChipListValues('bcc',$event)"/> (matChipInputTokenEnd)="addChipListValues('bcc',$event)"/>
</mat-chip-grid> </mat-chip-grid>
<mat-error *ngIf="formGroup.get('value').get('bcc').hasError('backendError')">{{formGroup.get('value').get('bcc').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-4"> <div class="col-4">
@ -384,6 +410,7 @@
{{enumUtils.toEmailOverrideModeString(emailOverrideMode)}} {{enumUtils.toEmailOverrideModeString(emailOverrideMode)}}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('backendError')">{{formGroup.get('value').get('bccMode').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('value').get('bccMode').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -406,6 +433,7 @@
[matChipInputAddOnBlur]="true" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/> (matChipInputTokenEnd)="addChipListValues('extraDataKeys',$event)"/>
</mat-chip-grid> </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> </mat-form-field>
</div> </div>
</div> </div>

View File

@ -46,7 +46,7 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
isNew = true; isNew = true;
isDeleted = false; isDeleted = false;
formGroup: UntypedFormGroup = null; formGroup: UntypedFormGroup = null;
availableLanguageCodes: string[] = []; languages: Language[] = [];
subjectMandatoryFields: string[] = []; subjectMandatoryFields: string[] = [];
bodyMandatoryFields: string[] = []; bodyMandatoryFields: string[] = [];
subjectFieldOptionsEnabled: Boolean = false; subjectFieldOptionsEnabled: Boolean = false;
@ -54,7 +54,6 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
ccValues: string[] = []; ccValues: string[] = [];
bccValues: string[] = []; bccValues: string[] = [];
extraDataKeys: string[] = []; extraDataKeys: string[] = [];
languageCode: string;
subjectFormatting: { [key: string]: string } = {}; subjectFormatting: { [key: string]: string } = {};
bodyFormatting: { [key: string]: string } = {}; bodyFormatting: { [key: string]: string } = {};
notificationType: string; notificationType: string;
@ -103,10 +102,10 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
ngOnInit(): void { ngOnInit(): void {
this.matomoService.trackPageView('Admin: Notification Tempplates'); this.matomoService.trackPageView('Admin: Notification Tempplates');
super.ngOnInit(); super.ngOnInit();
this.languageHttpService.queryAvailableCodes(this.languageHttpService.buildAutocompleteLookup()) this.languageHttpService.query(this.languageHttpService.buildAutocompleteLookup())
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe( .subscribe(
data => this.availableLanguageCodes = data.items, data => this.languages = data.items,
); );
} }
@ -141,7 +140,6 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
this.ccValues = this.editorModel.value.cc; this.ccValues = this.editorModel.value.cc;
this.bccValues = this.editorModel.value.bcc; this.bccValues = this.editorModel.value.bcc;
this.extraDataKeys = this.editorModel.value.extraDataKeys; this.extraDataKeys = this.editorModel.value.extraDataKeys;
this.languageCode = data.language.code;
} }
this.isDeleted = data ? data.isActive === IsActive.Inactive : false; this.isDeleted = data ? data.isActive === IsActive.Inactive : false;
this.buildForm(); this.buildForm();
@ -154,6 +152,11 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
buildForm() { buildForm() {
this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !this.authService.hasPermission(AppPermission.EditNotificationTemplate)); this.formGroup = this.editorModel.buildForm(null, this.isDeleted || !this.authService.hasPermission(AppPermission.EditNotificationTemplate));
this.notificationTemplateEditorService.setValidationErrorModel(this.editorModel.validationErrorModel); this.notificationTemplateEditorService.setValidationErrorModel(this.editorModel.validationErrorModel);
NotificationTemplateEditorModel.reApplyValueValidators({
formGroup: this.formGroup,
validationErrorModel: this.editorModel.validationErrorModel
}
)
} }
refreshData(): void { refreshData(): void {
@ -188,9 +191,9 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
formSubmit(): void { formSubmit(): void {
console.log(this.formGroup); console.log(this.formGroup);
this.formService.touchAllFormFields(this.formGroup); this.formService.touchAllFormFields(this.formGroup);
if (!this.isFormValid()) { // if (!this.isFormValid()) {
return; // return;
} // }
this.persistEntity(); this.persistEntity();
} }
@ -224,18 +227,6 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
} }
selectedLangChanged(code: string){
this.languageHttpService.getSingleWithCode(code, [nameof<Language>(x => x.id),nameof<Language>(x => x.code)])
.pipe(takeUntil(this._destroyed))
.subscribe(
data => {
this.formGroup.get('languageId').patchValue(data.id);
}
);
}
subjectFieldOptionsSelectionChanged(matCheckBox: MatCheckboxChange){ subjectFieldOptionsSelectionChanged(matCheckBox: MatCheckboxChange){
if(matCheckBox.checked == true){ if(matCheckBox.checked == true){
this.subjectFieldOptionsEnabled = true; this.subjectFieldOptionsEnabled = true;
@ -332,9 +323,12 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
//options fields //options fields
addOptionalItem(formGroup: UntypedFormGroup) { addSubjectOptionalItem() {
const fieldInfo: NotificationFieldInfoEditorModel = new NotificationFieldInfoEditorModel(); (this.formGroup.get('value').get('subjectFieldOptions').get('optional') as FormArray).push(this.editorModel.createSubjectOptionalField((this.formGroup.get('value').get('subjectFieldOptions').get('optional') as FormArray).length));
(formGroup.get('optional') as FormArray).push(fieldInfo.buildForm()); }
addBodyOptionalItem() {
(this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).push(this.editorModel.createBodyOptionalField((this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).length));
} }
removeSubjectOptionalItem(optionalIndex: number): void { removeSubjectOptionalItem(optionalIndex: number): void {
@ -342,12 +336,30 @@ export class NotificationTemplateEditorComponent extends BaseEditor<Notification
this.deleteSubjectFormattingItem(key); this.deleteSubjectFormattingItem(key);
(this.formGroup.get('value').get('subjectFieldOptions').get('optional') as FormArray).removeAt(optionalIndex); (this.formGroup.get('value').get('subjectFieldOptions').get('optional') as FormArray).removeAt(optionalIndex);
//Reapply validators
NotificationTemplateEditorModel.reApplyValueValidators(
{
formGroup: this.formGroup,
validationErrorModel: this.editorModel.validationErrorModel
}
);
this.formGroup.get('value').get('subjectFieldOptions').get('optional').markAsDirty();
} }
removeBodyOptionalItem(optionalIndex: number): void { removeBodyOptionalItem(optionalIndex: number): void {
const key = (this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).at(optionalIndex).get("key").value; const key = (this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).at(optionalIndex).get("key").value;
this.deleteBodyFormattingItem(key); this.deleteBodyFormattingItem(key);
(this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).removeAt(optionalIndex); (this.formGroup.get('value').get('bodyFieldOptions').get('optional') as FormArray).removeAt(optionalIndex);
//Reapply validators
NotificationTemplateEditorModel.reApplyValueValidators(
{
formGroup: this.formGroup,
validationErrorModel: this.editorModel.validationErrorModel
}
);
this.formGroup.get('value').get('bodyFieldOptions').get('optional').markAsDirty();
} }
// subject formatting // subject formatting

View File

@ -1,4 +1,4 @@
import { FormArray, FormControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { FormArray, FormControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { NotificationFieldInfo, NotificationFieldInfoPersist, NotificationFieldOptions, NotificationFieldOptionsPersist, NotificationTemplate, NotificationTemplatePersist, NotificationTemplateValue, NotificationTemplateValuePersist } from '@app/core/model/notification-template/notification-template'; import { NotificationFieldInfo, NotificationFieldInfoPersist, NotificationFieldOptions, NotificationFieldOptionsPersist, NotificationTemplate, NotificationTemplatePersist, NotificationTemplateValue, NotificationTemplateValuePersist } from '@app/core/model/notification-template/notification-template';
import { BackendErrorValidator } from '@common/forms/validation/custom-validator'; import { BackendErrorValidator } from '@common/forms/validation/custom-validator';
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model'; import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
@ -31,7 +31,7 @@ export class NotificationTemplateEditorModel extends BaseEditorModel implements
this.notificationType = item.notificationType; this.notificationType = item.notificationType;
this.kind = item.kind; this.kind = item.kind;
if(item.language && item.language.id) this.languageId = item.language.id; if(item.language && item.language.id) this.languageId = item.language.id;
if (item.value) { this.value = new NotificationTemplateValueEditorModel().fromModel(item.value); } if (item.value) { this.value = new NotificationTemplateValueEditorModel(this.validationErrorModel).fromModel(item.value); }
} }
return this; return this;
@ -67,6 +67,30 @@ export class NotificationTemplateEditorModel extends BaseEditorModel implements
baseContext.validation = baseValidationArray; baseContext.validation = baseValidationArray;
return baseContext; return baseContext;
} }
createSubjectOptionalField(index: number): UntypedFormGroup {
const source: NotificationFieldInfoEditorModel = new NotificationFieldInfoEditorModel(this.validationErrorModel);
return source.buildForm({ rootPath: 'value.subjectFieldOptions.optional[' + index + '].' });
}
createBodyOptionalField(index: number): UntypedFormGroup {
const source: NotificationFieldInfoEditorModel = new NotificationFieldInfoEditorModel(this.validationErrorModel);
return source.buildForm({ rootPath: 'value.bodyFieldOptions.optional[' + index + '].' });
}
static reApplyValueValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
}): void {
const { formGroup, validationErrorModel } = params;
const control = formGroup?.get('value');
NotificationTemplateValueEditorModel.reapplyValidators({
formGroup: control as UntypedFormGroup,
rootPath: `value.`,
validationErrorModel: validationErrorModel
});
}
} }
export class NotificationTemplateValueEditorModel implements NotificationTemplateValuePersist { export class NotificationTemplateValueEditorModel implements NotificationTemplateValuePersist {
@ -94,7 +118,7 @@ export class NotificationTemplateValueEditorModel implements NotificationTemplat
if (item) { if (item) {
this.subjectText = item.subjectText; this.subjectText = item.subjectText;
this.subjectKey = item.subjectKey; this.subjectKey = item.subjectKey;
if (item.subjectFieldOptions) this.subjectFieldOptions = new NotificationFieldOptionsEditorModel().fromModel(item.subjectFieldOptions); if (item.subjectFieldOptions) this.subjectFieldOptions = new NotificationFieldOptionsEditorModel(this.validationErrorModel).fromModel(item.subjectFieldOptions);
this.bodyText = item.bodyText; this.bodyText = item.bodyText;
this.bodyKey = item.bodyKey; this.bodyKey = item.bodyKey;
this.priorityKey = item.priorityKey; this.priorityKey = item.priorityKey;
@ -104,7 +128,7 @@ export class NotificationTemplateValueEditorModel implements NotificationTemplat
this.bcc = item.bcc; this.bcc = item.bcc;
this.bccMode = item.bccMode; this.bccMode = item.bccMode;
this.extraDataKeys = item.extraDataKeys; this.extraDataKeys = item.extraDataKeys;
if (item.bodyFieldOptions) this.bodyFieldOptions = new NotificationFieldOptionsEditorModel().fromModel(item.bodyFieldOptions); if (item.bodyFieldOptions) this.bodyFieldOptions = new NotificationFieldOptionsEditorModel(this.validationErrorModel).fromModel(item.bodyFieldOptions);
} }
return this; return this;
} }
@ -125,7 +149,7 @@ export class NotificationTemplateValueEditorModel implements NotificationTemplat
subjectText: [{ value: this.subjectText, disabled: disabled }, context.getValidation('subjectText').validators], subjectText: [{ value: this.subjectText, disabled: disabled }, context.getValidation('subjectText').validators],
subjectKey: [{ value: this.subjectKey, disabled: disabled }, context.getValidation('subjectKey').validators], subjectKey: [{ value: this.subjectKey, disabled: disabled }, context.getValidation('subjectKey').validators],
subjectFieldOptions: this.subjectFieldOptions.buildForm({ subjectFieldOptions: this.subjectFieldOptions.buildForm({
rootPath: `subjectFieldOptions.` rootPath: `${rootPath}subjectFieldOptions.`
}), }),
bodyText: [{ value: this.bodyText, disabled: disabled }, context.getValidation('bodyText').validators], bodyText: [{ value: this.bodyText, disabled: disabled }, context.getValidation('bodyText').validators],
bodyKey: [{ value: this.bodyKey, disabled: disabled }, context.getValidation('bodyKey').validators], bodyKey: [{ value: this.bodyKey, disabled: disabled }, context.getValidation('bodyKey').validators],
@ -137,7 +161,7 @@ export class NotificationTemplateValueEditorModel implements NotificationTemplat
bccMode: [{ value: this.bccMode, disabled: disabled }, context.getValidation('bccMode').validators], bccMode: [{ value: this.bccMode, disabled: disabled }, context.getValidation('bccMode').validators],
extraDataKeys: [{ value: this.extraDataKeys, disabled: disabled }, context.getValidation('extraDataKeys').validators], extraDataKeys: [{ value: this.extraDataKeys, disabled: disabled }, context.getValidation('extraDataKeys').validators],
bodyFieldOptions: this.bodyFieldOptions.buildForm({ bodyFieldOptions: this.bodyFieldOptions.buildForm({
rootPath: `bodyFieldOptions.` rootPath: `${rootPath}bodyFieldOptions.`
}), }),
}); });
} }
@ -165,6 +189,37 @@ export class NotificationTemplateValueEditorModel implements NotificationTemplat
baseContext.validation = baseValidationArray; baseContext.validation = baseValidationArray;
return baseContext; return baseContext;
} }
static reapplyValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
rootPath: string
}): void {
const { formGroup, rootPath, validationErrorModel } = params;
const context = NotificationTemplateValueEditorModel.createValidationContext({
rootPath,
validationErrorModel
});
['subjectText', 'subjectKey', 'bodyText', 'bodyKey', 'priorityKey', 'allowAttachments', 'cc', 'ccMode', 'bcc', 'bccMode','extraDataKeys'].forEach(keyField => {
const control = formGroup?.get(keyField);
control?.clearValidators();
control?.addValidators(context.getValidation(keyField).validators);
});
NotificationFieldOptionsEditorModel.reapplyValidators({
formGroup: formGroup?.get('subjectFieldOptions') as UntypedFormGroup,
rootPath: `${rootPath}subjectFieldOptions.`,
validationErrorModel: validationErrorModel
});
NotificationFieldOptionsEditorModel.reapplyValidators({
formGroup: formGroup?.get('bodyFieldOptions') as UntypedFormGroup,
rootPath: `${rootPath}bodyFieldOptions.`,
validationErrorModel: validationErrorModel
});
}
} }
export class NotificationFieldOptionsEditorModel implements NotificationFieldOptionsPersist { export class NotificationFieldOptionsEditorModel implements NotificationFieldOptionsPersist {
@ -181,7 +236,7 @@ export class NotificationFieldOptionsEditorModel implements NotificationFieldOpt
public fromModel(item: NotificationFieldOptions): NotificationFieldOptionsEditorModel { public fromModel(item: NotificationFieldOptions): NotificationFieldOptionsEditorModel {
if (item) { if (item) {
this.mandatory = item.mandatory; this.mandatory = item.mandatory;
if(item.optional) { item.optional.map(x => this.optional.push(new NotificationFieldInfoEditorModel().fromModel(x))); } if(item.optional) { item.optional.map(x => this.optional.push(new NotificationFieldInfoEditorModel(this.validationErrorModel).fromModel(x))); }
this.formatting = item.formatting; this.formatting = item.formatting;
} }
return this; return this;
@ -208,7 +263,7 @@ export class NotificationFieldOptionsEditorModel implements NotificationFieldOpt
(item, index) => new NotificationFieldInfoEditorModel( (item, index) => new NotificationFieldInfoEditorModel(
this.validationErrorModel this.validationErrorModel
).fromModel(item).buildForm({ ).fromModel(item).buildForm({
rootPath: `optional[${index}].` rootPath: `${rootPath}optional[${index}].`
}), context.getValidation('optional') }), context.getValidation('optional')
) )
), ),
@ -231,6 +286,34 @@ export class NotificationFieldOptionsEditorModel implements NotificationFieldOpt
return baseContext; return baseContext;
} }
static reapplyValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
rootPath: string
}): void {
const { formGroup, rootPath, validationErrorModel } = params;
const context = NotificationFieldOptionsEditorModel.createValidationContext({
rootPath,
validationErrorModel
});
['mandatory', 'formatting'].forEach(keyField => {
const control = formGroup?.get(keyField);
control?.clearValidators();
control?.addValidators(context.getValidation(keyField).validators);
});
(formGroup.get('optional') as FormArray).controls?.forEach(
(control, index) => NotificationFieldInfoEditorModel.reapplyValidators({
formGroup: control as UntypedFormGroup,
rootPath: `${rootPath}optional[${index}].`,
validationErrorModel: validationErrorModel
}
)
);
}
} }
export class NotificationFieldInfoEditorModel implements NotificationFieldInfoPersist { export class NotificationFieldInfoEditorModel implements NotificationFieldInfoPersist {
@ -287,4 +370,24 @@ export class NotificationFieldInfoEditorModel implements NotificationFieldInfoPe
baseContext.validation = baseValidationArray; baseContext.validation = baseValidationArray;
return baseContext; return baseContext;
} }
static reapplyValidators(params: {
formGroup: UntypedFormGroup,
validationErrorModel: ValidationErrorModel,
rootPath: string
}): void {
const { formGroup, rootPath, validationErrorModel } = params;
const context = NotificationFieldInfoEditorModel.createValidationContext({
rootPath,
validationErrorModel
});
['key', 'type', 'value'].forEach(keyField => {
const control = formGroup?.get(keyField);
control?.clearValidators();
control?.addValidators(context.getValidation(keyField).validators);
});
}
} }