|
|
|
@ -27,7 +27,6 @@ |
|
|
|
</mat-toolbar> |
|
|
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|
|
|
</mat-progress-bar> |
|
|
|
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|
|
|
<div mat-dialog-content> |
|
|
|
<mat-horizontal-stepper linear #createNotification |
|
|
|
[labelPosition]="(stepperLabelPosition | async)" |
|
|
|
@ -40,12 +39,11 @@ |
|
|
|
<ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template> |
|
|
|
<form [formGroup]="notificationRequestForm"> |
|
|
|
<div fxLayout="row" fxLayoutAlign="center"> |
|
|
|
<mat-button-toggle-group class="tb-notification-use-template-toggle-group" |
|
|
|
style="width: 320px;" |
|
|
|
formControlName="useTemplate"> |
|
|
|
<mat-button-toggle fxFlex [value]=false>{{ 'notification.start-from-scratch' | translate }}</mat-button-toggle> |
|
|
|
<mat-button-toggle fxFlex [value]=true>{{ 'notification.use-template' | translate }}</mat-button-toggle> |
|
|
|
</mat-button-toggle-group> |
|
|
|
<tb-toggle-select class="tb-notification-use-template-toggle-group" appearance="fill" |
|
|
|
formControlName="useTemplate"> |
|
|
|
<tb-toggle-option [value]="false">{{ 'notification.start-from-scratch' | translate }}</tb-toggle-option> |
|
|
|
<tb-toggle-option [value]="true">{{ 'notification.use-template' | translate }}</tb-toggle-option> |
|
|
|
</tb-toggle-select> |
|
|
|
</div> |
|
|
|
<div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate"> |
|
|
|
<tb-template-autocomplete |
|
|
|
@ -172,73 +170,82 @@ |
|
|
|
{{ 'notification.message-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
<section formGroupName="additionalConfig"> |
|
|
|
<section formGroupName="icon" class="additional-config-group"> |
|
|
|
<mat-slide-toggle formControlName="enabled" class="toggle"> |
|
|
|
<section formGroupName="additionalConfig" class="tb-form-panel no-padding no-border"> |
|
|
|
<div class="tb-form-row space-between" formGroupName="icon"> |
|
|
|
<mat-slide-toggle formControlName="enabled" class="mat-slide"> |
|
|
|
{{ 'icon.icon' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
<div *ngIf="webTemplateForm.get('additionalConfig.icon.enabled').value" |
|
|
|
fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column"> |
|
|
|
<tb-material-icon-select formControlName="icon" required fxFlex> |
|
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|
|
|
<tb-material-icon-select asBoxInput |
|
|
|
[color]="webTemplateForm.get('additionalConfig.icon.color').value" |
|
|
|
formControlName="icon"> |
|
|
|
</tb-material-icon-select> |
|
|
|
<tb-color-input formControlName="color" fxFlex> |
|
|
|
<tb-color-input asBoxInput |
|
|
|
formControlName="color"> |
|
|
|
</tb-color-input> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<section formGroupName="actionButtonConfig" class="additional-config-group"> |
|
|
|
<mat-slide-toggle formControlName="enabled" class="toggle"> |
|
|
|
{{ 'notification.action-button' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
<div *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.enabled').value"> |
|
|
|
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column"> |
|
|
|
<mat-form-field class="mat-block" fxFlex> |
|
|
|
<mat-label translate>notification.button-text</mat-label> |
|
|
|
<input matInput formControlName="text" required> |
|
|
|
<mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('required')"> |
|
|
|
{{ 'notification.button-text-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
<mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('maxlength')"> |
|
|
|
{{ 'notification.button-text-max-length' | translate : |
|
|
|
{length: webTemplateForm.get('additionalConfig.actionButtonConfig.text').getError('maxlength').requiredLength} |
|
|
|
}} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column"> |
|
|
|
<mat-form-field fxFlex="30" fxFlex.xs="100"> |
|
|
|
<mat-label translate>notification.action-type</mat-label> |
|
|
|
<mat-select formControlName="linkType"> |
|
|
|
<mat-option *ngFor="let actionButtonLinkType of actionButtonLinkTypes" [value]="actionButtonLinkType"> |
|
|
|
{{ actionButtonLinkTypeTranslateMap.get(actionButtonLinkType) | translate }} |
|
|
|
</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field fxFlex |
|
|
|
*ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.linkType').value === actionButtonLinkType.LINK; else dashboardSelector"> |
|
|
|
<mat-label translate>notification.link</mat-label> |
|
|
|
<input matInput formControlName="link" required> |
|
|
|
<mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.link').hasError('required')"> |
|
|
|
{{ 'notification.link-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
<ng-template #dashboardSelector> |
|
|
|
<tb-dashboard-autocomplete |
|
|
|
fxFlex="35" fxFlex.xs="100" |
|
|
|
required |
|
|
|
formControlName="dashboardId"> |
|
|
|
</tb-dashboard-autocomplete> |
|
|
|
<tb-dashboard-state-autocomplete fxFlex="35" fxFlex.xs="100" |
|
|
|
[dashboardId]="webTemplateForm.get('additionalConfig.actionButtonConfig.dashboardId').value" |
|
|
|
formControlName="dashboardState"> |
|
|
|
</tb-dashboard-state-autocomplete> |
|
|
|
</ng-template> |
|
|
|
</div> |
|
|
|
<mat-slide-toggle formControlName="setEntityIdInState" class="toggle" |
|
|
|
*ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.linkType').value === actionButtonLinkType.DASHBOARD"> |
|
|
|
{{ 'notification.set-entity-from-notification' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
<div class="tb-form-panel tb-slide-toggle stroked" formGroupName="actionButtonConfig"> |
|
|
|
<mat-expansion-panel class="tb-settings" [expanded]="webTemplateForm.get('additionalConfig.actionButtonConfig.enabled').value"> |
|
|
|
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width"> |
|
|
|
<mat-panel-title fxFlex="60"> |
|
|
|
<mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()" |
|
|
|
fxLayoutAlign="center"> |
|
|
|
{{ 'notification.action-button' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
</mat-panel-title> |
|
|
|
</mat-expansion-panel-header> |
|
|
|
<ng-template matExpansionPanelContent class="tb-extension-panel"> |
|
|
|
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column"> |
|
|
|
<mat-form-field class="mat-block" fxFlex> |
|
|
|
<mat-label translate>notification.button-text</mat-label> |
|
|
|
<input matInput formControlName="text" required> |
|
|
|
<mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('required')"> |
|
|
|
{{ 'notification.button-text-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
<mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.text').hasError('maxlength')"> |
|
|
|
{{ 'notification.button-text-max-length' | translate : |
|
|
|
{length: webTemplateForm.get('additionalConfig.actionButtonConfig.text').getError('maxlength').requiredLength} |
|
|
|
}} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column"> |
|
|
|
<mat-form-field fxFlex="30" fxFlex.xs="100"> |
|
|
|
<mat-label translate>notification.action-type</mat-label> |
|
|
|
<mat-select formControlName="linkType"> |
|
|
|
<mat-option *ngFor="let actionButtonLinkType of actionButtonLinkTypes" [value]="actionButtonLinkType"> |
|
|
|
{{ actionButtonLinkTypeTranslateMap.get(actionButtonLinkType) | translate }} |
|
|
|
</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field fxFlex |
|
|
|
*ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.linkType').value === actionButtonLinkType.LINK; else dashboardSelector"> |
|
|
|
<mat-label translate>notification.link</mat-label> |
|
|
|
<input matInput formControlName="link" required> |
|
|
|
<mat-error *ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.link').hasError('required')"> |
|
|
|
{{ 'notification.link-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
<ng-template #dashboardSelector> |
|
|
|
<tb-dashboard-autocomplete |
|
|
|
fxFlex="35" fxFlex.xs="100" |
|
|
|
required |
|
|
|
formControlName="dashboardId"> |
|
|
|
</tb-dashboard-autocomplete> |
|
|
|
<tb-dashboard-state-autocomplete fxFlex="35" fxFlex.xs="100" |
|
|
|
[dashboardId]="webTemplateForm.get('additionalConfig.actionButtonConfig.dashboardId').value" |
|
|
|
formControlName="dashboardState"> |
|
|
|
</tb-dashboard-state-autocomplete> |
|
|
|
</ng-template> |
|
|
|
</div> |
|
|
|
<mat-slide-toggle formControlName="setEntityIdInState" class="toggle" |
|
|
|
*ngIf="webTemplateForm.get('additionalConfig.actionButtonConfig.linkType').value === actionButtonLinkType.DASHBOARD"> |
|
|
|
{{ 'notification.set-entity-from-notification' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
</ng-template> |
|
|
|
</mat-expansion-panel> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</form> |
|
|
|
</mat-step> |
|
|
|
@ -333,6 +340,78 @@ |
|
|
|
</mat-form-field> |
|
|
|
</form> |
|
|
|
</mat-step> |
|
|
|
<mat-step *ngIf="!notificationRequestForm.get('useTemplate').value && |
|
|
|
notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.MICROSOFT_TEAMS.enabled').value" |
|
|
|
[stepControl]="microsoftTeamsTemplateForm"> |
|
|
|
<ng-template matStepLabel>{{ 'notification.delivery-method.microsoft-teams' | translate }}</ng-template> |
|
|
|
<div class="tb-hint-available-params mat-body-2"> |
|
|
|
<span class="content">{{ 'notification.input-fields-support-templatization' | translate}}</span> |
|
|
|
<span tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}" |
|
|
|
tb-help-popup-placement="bottom" |
|
|
|
trigger-style="letter-spacing:0.25px" |
|
|
|
[tb-help-popup-style]="{maxWidth: '800px'}" |
|
|
|
trigger-text="{{ 'notification.see-documentation' | translate }}"></span> |
|
|
|
</div> |
|
|
|
<form [formGroup]="microsoftTeamsTemplateForm"> |
|
|
|
<mat-form-field class="mat-block"> |
|
|
|
<mat-label translate>notification.subject</mat-label> |
|
|
|
<input matInput formControlName="subject"> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field class="mat-block"> |
|
|
|
<mat-label translate>notification.message</mat-label> |
|
|
|
<textarea matInput |
|
|
|
cdkTextareaAutosize |
|
|
|
cols="1" |
|
|
|
cdkAutosizeMinRows="1" |
|
|
|
formControlName="body"> |
|
|
|
</textarea> |
|
|
|
<mat-error *ngIf="microsoftTeamsTemplateForm.get('body').hasError('required')"> |
|
|
|
{{ 'notification.message-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
<div class="tb-form-panel no-padding no-border"> |
|
|
|
<div class="tb-form-row space-between"> |
|
|
|
<div translate>notification.theme-color</div> |
|
|
|
<tb-color-input asBoxInput formControlName="themeColor"></tb-color-input> |
|
|
|
</div> |
|
|
|
<div class="tb-form-panel tb-slide-toggle stroked" formGroupName="button"> |
|
|
|
<mat-expansion-panel class="tb-settings" [expanded]="microsoftTeamsTemplateForm.get('button.enabled').value"> |
|
|
|
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width"> |
|
|
|
<mat-panel-title fxFlex="60"> |
|
|
|
<mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()" |
|
|
|
fxLayoutAlign="center"> |
|
|
|
{{ 'notification.action-button' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
</mat-panel-title> |
|
|
|
</mat-expansion-panel-header> |
|
|
|
<ng-template matExpansionPanelContent> |
|
|
|
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column"> |
|
|
|
<mat-form-field class="mat-block" fxFlex> |
|
|
|
<mat-label translate>notification.button-text</mat-label> |
|
|
|
<input matInput formControlName="name" required> |
|
|
|
<mat-error *ngIf="microsoftTeamsTemplateForm.get('button.name').hasError('required')"> |
|
|
|
{{ 'notification.button-text-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
<mat-error *ngIf="microsoftTeamsTemplateForm.get('button.name').hasError('maxlength')"> |
|
|
|
{{ 'notification.button-text-max-length' | translate : |
|
|
|
{length: microsoftTeamsTemplateForm.get('button.name').getError('maxlength').requiredLength} |
|
|
|
}} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field fxFlex> |
|
|
|
<mat-label translate>notification.link</mat-label> |
|
|
|
<input matInput formControlName="uri" required> |
|
|
|
<mat-error *ngIf="microsoftTeamsTemplateForm.get('button.uri').hasError('required')"> |
|
|
|
{{ 'notification.link-required' | translate }} |
|
|
|
</mat-error> |
|
|
|
</mat-form-field> |
|
|
|
</div> |
|
|
|
</ng-template> |
|
|
|
</mat-expansion-panel> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
</mat-step> |
|
|
|
<mat-step> |
|
|
|
<ng-template matStepLabel>{{ 'notification.review' | translate }}</ng-template> |
|
|
|
<mat-progress-spinner color="warn" mode="indeterminate" |
|
|
|
@ -377,6 +456,16 @@ |
|
|
|
{{ preview.processedTemplates.SLACK.body }} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<section class="preview-group notification" *ngIf="preview.processedTemplates.MICROSOFT_TEAMS?.enabled"> |
|
|
|
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
|
|
|
<mat-icon class="tb-mat-18" svgIcon="mdi:microsoft-teams"></mat-icon> |
|
|
|
<div class="group-title" translate>notification.delivery-method.microsoft-teams-preview</div> |
|
|
|
</div> |
|
|
|
<div class="notification-content mini"> |
|
|
|
<div class="subject">{{ preview.processedTemplates.MICROSOFT_TEAMS.subject }}</div> |
|
|
|
{{ preview.processedTemplates.MICROSOFT_TEAMS.body }} |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<section class="preview-group"> |
|
|
|
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> |
|
|
|
<mat-icon class="tb-mat-18">supervisor_account</mat-icon> |
|
|
|
@ -399,7 +488,7 @@ |
|
|
|
</mat-horizontal-stepper> |
|
|
|
</div> |
|
|
|
<mat-divider></mat-divider> |
|
|
|
<div mat-dialog-actions fxLayout="row"> |
|
|
|
<div mat-dialog-actions class="tb-dialog-actions"> |
|
|
|
<button mat-stroked-button *ngIf="selectedIndex > 0" |
|
|
|
(click)="backStep()">{{ 'action.back' | translate }}</button> |
|
|
|
<span fxFlex></span> |
|
|
|
|
Vladyslav_Prykhodko
3 years ago