UI: Add check allow delivery method when send notification without template

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<NotificationRequest>(`/api/notification/request/${id}`, defaultHttpOptionsFromConfig(config));
   }
 
+  public getAvailableDeliveryMethods(config?: RequestConfig): Observable<Array<NotificationDeliveryMethod>> {
+    return this.http.get<Array<NotificationDeliveryMethod>>(`/api/notification/deliveryMethods`, defaultHttpOptionsFromConfig(config));
+  }
+
   public deleteNotificationRequest(id: string, config?: RequestConfig): Observable<void> {
     return this.http.delete<void>(`/api/notification/request/${id}`, defaultHttpOptionsFromConfig(config));
   }

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html

@@ -62,13 +62,33 @@
               <label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
                      class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
               <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
-              <section formGroupName="deliveryMethodsTemplates" fxLayout="row wrap" style="margin-bottom: 12px;">
+              <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
-                <section *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"
+                <ng-container *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                         [formGroupName]="deliveryMethods" fxFlex="50%" [ngClass]={even:isEven}>
+                  <a *ngIf="isInteractDeliveryMethod(deliveryMethods); else deliveryMethod"
+                     class="delivery-method-container interact"
+                     [routerLink]="configurationPage(deliveryMethods)"
+                     [formGroupName]="deliveryMethods"
+                     [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
+                     matTooltipPosition="above">
+                    <mat-slide-toggle class="delivery-method" formControlName="enabled">
+                      {{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
+                    </mat-slide-toggle>
+                    <mat-icon *ngIf="isInteractDeliveryMethod(deliveryMethods)">
+                      chevron_right
+                    </mat-icon>
+                  </a>
+                  <ng-template #deliveryMethod>
+                    <section class="delivery-method-container"
+                             [formGroupName]="deliveryMethods"
+                             [matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
+                             [matTooltipDisabled]="getDeliveryMethodsTemplatesControl(deliveryMethods).enabled"
+                             matTooltipPosition="above">
                       <mat-slide-toggle class="delivery-method" formControlName="enabled">
                         {{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
                       </mat-slide-toggle>
                     </section>
+                  </ng-template>
+                </ng-container>
               </section>
             </section>
           </section>

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss

@@ -60,21 +60,30 @@
     }
   }
 
+  .delivery-methods-container {
+    margin-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
     .delivery-method-container {
-    padding-bottom: 8px;
+      display: inline-flex;
-
+      flex: 1 1 calc(50% - 8px);
-    &.even {
-      padding-right: 8px;
-    }
-
-    .delivery-method {
       padding: 16px 12px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 6px;
+
+      &.interact {
+        cursor: pointer;
+        color: inherit;
+      }
+
+      .delivery-method {
         width: 100%;
         height: 100%;
       }
     }
+  }
 
   .additional-config-group {
     padding: 16px 16px 0;
@@ -258,3 +267,13 @@
     }
   }
 }
+
+:host ::ng-deep {
+  .delivery-methods-container {
+    .delivery-method-container {
+      &.interact * {
+        cursor: pointer;
+      }
+    }
+  }
+}

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<AppState>,
               protected router: Router,
               protected dialogRef: MatDialogRef<SentNotificationDialogComponent, NotificationRequest>,
@@ -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';
+    }
+  }
 }

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html

@@ -57,9 +57,10 @@
           <label [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
             class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
           <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
-          <section formGroupName="deliveryMethodsTemplates" fxLayout="row warap">
+          <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
-            <section *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"
+            <section *ngFor="let deliveryMethods of notificationDeliveryMethods"
-                     [formGroupName]="deliveryMethods" fxFlex="50%" [ngClass]={even:isEven}>
+                     class="delivery-method-container"
+                     [formGroupName]="deliveryMethods">
               <mat-slide-toggle class="delivery-method" formControlName="enabled">
                 {{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
               </mat-slide-toggle>

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss

@@ -61,21 +61,25 @@
     }
   }
 
+  .delivery-methods-container {
+    margin-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
     .delivery-method-container {
-    padding-bottom: 8px;
+      display: inline-flex;
-
+      flex: 1 1 calc(50% - 8px);
-    &.even {
-      padding-right: 8px;
-    }
-
-    .delivery-method {
       padding: 16px 12px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 6px;
+
+      .delivery-method {
         width: 100%;
         height: 100%;
       }
     }
+  }
 
   .additional-config-group {
     padding: 16px 16px 4px;

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",