diff --git a/ui-ngx/src/app/core/http/notification.service.ts b/ui-ngx/src/app/core/http/notification.service.ts index d46913d2d2..a92007643a 100644 --- a/ui-ngx/src/app/core/http/notification.service.ts +++ b/ui-ngx/src/app/core/http/notification.service.ts @@ -22,6 +22,7 @@ import { PageLink } from '@shared/models/page/page-link'; import { PageData } from '@shared/models/page/page-data'; import { Notification, + NotificationDeliveryMethod, NotificationRequest, NotificationRequestInfo, NotificationRequestPreview, @@ -71,6 +72,10 @@ export class NotificationService { return this.http.get(`/api/notification/request/${id}`, defaultHttpOptionsFromConfig(config)); } + public getAvailableDeliveryMethods(config?: RequestConfig): Observable> { + return this.http.get>(`/api/notification/deliveryMethods`, defaultHttpOptionsFromConfig(config)); + } + public deleteNotificationRequest(id: string, config?: RequestConfig): Observable { return this.http.delete(`/api/notification/request/${id}`, defaultHttpOptionsFromConfig(config)); } diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html index 7fbde30dce..6aac94f03b 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html @@ -62,13 +62,33 @@
notification.at-least-one-should-be-selected
-
-
- - {{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }} - -
+
+ + + + {{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }} + + + chevron_right + + + +
+ + {{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }} + +
+ +
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss index 55542b3905..2a472f8c69 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss @@ -60,19 +60,28 @@ } } - .delivery-method-container { - padding-bottom: 8px; + .delivery-methods-container { + margin-bottom: 20px; + display: flex; + flex-wrap: wrap; + gap: 8px; - &.even { - padding-right: 8px; - } - - .delivery-method { + .delivery-method-container { + display: inline-flex; + flex: 1 1 calc(50% - 8px); padding: 16px 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; - width: 100%; - height: 100%; + + &.interact { + cursor: pointer; + color: inherit; + } + + .delivery-method { + width: 100%; + height: 100%; + } } } @@ -258,3 +267,13 @@ } } } + +:host ::ng-deep { + .delivery-methods-container { + .delivery-method-container { + &.interact * { + cursor: pointer; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts index 4efb374ff1..f52a54ad05 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts +++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts @@ -27,7 +27,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { Router } from '@angular/router'; import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { NotificationService } from '@core/http/notification.service'; import { deepTrim, guid, isDefinedAndNotNull } from '@core/utils'; import { Observable } from 'rxjs'; @@ -44,6 +44,10 @@ import { } from '@home/pages/notification/recipient/recipient-notification-dialog.component'; import { MatButton } from '@angular/material/button'; import { TemplateConfiguration } from '@home/pages/notification/template/template-configuration'; +import { Authority } from '@shared/models/authority.enum'; +import { AuthUser } from '@shared/models/user.model'; +import { getCurrentAuthUser } from '@core/auth/auth.selectors'; +import { TranslateService } from '@ngx-translate/core'; export interface RequestNotificationDialogData { request?: NotificationRequest; @@ -76,6 +80,8 @@ export class SentNotificationDialogComponent extends dialogTitle = 'notification.notify-again'; + private authUser: AuthUser = getCurrentAuthUser(this.store); + constructor(protected store: Store, protected router: Router, protected dialogRef: MatDialogRef, @@ -83,9 +89,16 @@ export class SentNotificationDialogComponent extends private breakpointObserver: BreakpointObserver, protected fb: FormBuilder, private notificationService: NotificationService, - private dialog: MatDialog) { + private dialog: MatDialog, + private translate: TranslateService) { super(store, router, dialogRef, fb); + this.notificationDeliveryMethods.forEach(method => { + if (method !== NotificationDeliveryMethod.WEB) { + this.templateNotificationForm.get('configuration.deliveryMethodsTemplates').get(method).disable({emitEvent: false}); + } + }); + this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-sm']) .pipe(map(({matches}) => matches ? 'horizontal' : 'vertical')); @@ -148,6 +161,16 @@ export class SentNotificationDialogComponent extends } this.notificationRequestForm.get('useTemplate').setValue(useTemplate, {onlySelf : true}); } + + this.notificationService.getAvailableDeliveryMethods({ignoreLoading: true}).subscribe(allowMethods => { + this.notificationDeliveryMethods.forEach(method => { + if (allowMethods.includes(method)) { + this.getDeliveryMethodsTemplatesControl(method).enable({emitEvent: true}); + } else { + this.getDeliveryMethodsTemplatesControl(method).setValue(false, {emitEvent: true}); //used for notify again + } + }); + }); } ngOnDestroy() { @@ -240,6 +263,14 @@ export class SentNotificationDialogComponent extends }); } + private isSysAdmin(): boolean { + return this.authUser.authority === Authority.SYS_ADMIN; + } + + private isTenantAdmin(): boolean { + return this.authUser.authority === Authority.TENANT_ADMIN; + } + minDate(): Date { return new Date(getCurrentTime(this.notificationRequestForm.get('additionalConfig.timezone').value).format('lll')); } @@ -272,4 +303,41 @@ export class SentNotificationDialogComponent extends } }); } + + getDeliveryMethodsTemplatesControl(deliveryMethod: NotificationDeliveryMethod): AbstractControl { + return this.templateNotificationForm.get('configuration.deliveryMethodsTemplates').get(deliveryMethod).get('enabled'); + } + + getDeliveryMethodsTooltip(deliveryMethod: NotificationDeliveryMethod): string { + if (this.allowConfigureDeliveryMethod(deliveryMethod)) { + return this.translate.instant('notification.delivery-method-not-configure-click'); + } + return this.translate.instant('notification.delivery-method-not-configure-contact'); + } + + allowConfigureDeliveryMethod(deliveryMethod: NotificationDeliveryMethod): boolean { + if (deliveryMethod === NotificationDeliveryMethod.WEB) { + return false; + } + if(this.isSysAdmin()) { + return true; + } else if (this.isTenantAdmin()) { + return deliveryMethod === NotificationDeliveryMethod.SLACK; + } + return false; + } + + isInteractDeliveryMethod(deliveryMethod: NotificationDeliveryMethod) { + return this.getDeliveryMethodsTemplatesControl(deliveryMethod).disabled && this.allowConfigureDeliveryMethod(deliveryMethod); + } + + configurationPage(deliveryMethod: NotificationDeliveryMethod) { + switch (deliveryMethod) { + case NotificationDeliveryMethod.EMAIL: + return '/settings/outgoing-mail'; + case NotificationDeliveryMethod.SMS: + case NotificationDeliveryMethod.SLACK: + return '/settings/notifications'; + } + } } diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html index 6af12c1f32..98775839ba 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html @@ -57,9 +57,10 @@
notification.at-least-one-should-be-selected
-
-
+
+
{{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }} diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss index 9c52098ac9..1a5fa270a8 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss @@ -61,19 +61,23 @@ } } - .delivery-method-container { - padding-bottom: 8px; + .delivery-methods-container { + margin-bottom: 20px; + display: flex; + flex-wrap: wrap; + gap: 8px; - &.even { - padding-right: 8px; - } - - .delivery-method { + .delivery-method-container { + display: inline-flex; + flex: 1 1 calc(50% - 8px); padding: 16px 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; - width: 100%; - height: 100%; + + .delivery-method { + width: 100%; + height: 100%; + } } } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 9ca2fd416f..a266de2410 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2820,6 +2820,8 @@ "web": "Web", "web-preview": "Web notification preview" }, + "delivery-method-not-configure-click": "Delivery method is not configured. Click to setup.", + "delivery-method-not-configure-contact": "Delivery method is not configured. Contact your system administrator.", "delivery-methods": "Delivery methods", "description": "Description", "device-activity-trigger-settings": "Device active trigger settings", @@ -2906,7 +2908,7 @@ }, "recipients": "Recipients", "recipients-count": "{ count, plural, =1 {1 recipient} other {# recipients} }", - "recipients-required": "Recipients is required", + "recipients-required": "Recipients are required", "request-search": "Request search", "request-status": { "processing": "Processing",