UI: Add refresh delivery notification method

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

@@ -59,9 +59,21 @@
           <ng-container *ngTemplateOutlet="recipientsList"></ng-container>
           <section formGroupName="template">
             <section formGroupName="configuration">
-              <label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
+              <div class="delivery-title">
-                     class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
+                <div>
-              <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
+                  <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>
+                </div>
+                <button
+                  matTooltip="Refresh allow delivery method"
+                  matTooltipPosition="above"
+                  (click)="refreshAllowDeliveryMethod()"
+                  *ngIf="showRefresh"
+                  mat-icon-button>
+                  <mat-icon>refresh</mat-icon>
+                </button>
+              </div>
               <section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
                 <ng-container *ngFor="let deliveryMethods of notificationDeliveryMethods">
                   <a *ngIf="isInteractDeliveryMethod(deliveryMethods); else deliveryMethod"

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

@@ -60,6 +60,13 @@
     }
   }
 
+  .delivery-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   .delivery-methods-container {
     margin-bottom: 20px;
     display: flex;

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts

@@ -80,6 +80,8 @@ export class SentNotificationDialogComponent extends
 
   dialogTitle = 'notification.notify-again';
 
+  showRefresh = false;
+
   private authUser: AuthUser = getCurrentAuthUser(this.store);
 
   constructor(protected store: Store<AppState>,
@@ -162,15 +164,7 @@ export class SentNotificationDialogComponent extends
       this.notificationRequestForm.get('useTemplate').setValue(useTemplate, {onlySelf : true});
     }
 
-    this.notificationService.getAvailableDeliveryMethods({ignoreLoading: true}).subscribe(allowMethods => {
+    this.refreshAllowDeliveryMethod();
-      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() {
@@ -340,4 +334,18 @@ export class SentNotificationDialogComponent extends
         return '/settings/notifications';
     }
   }
+
+  refreshAllowDeliveryMethod() {
+    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).disable({emitEvent: true});
+          this.getDeliveryMethodsTemplatesControl(method).setValue(false, {emitEvent: true}); //used for notify again
+        }
+      });
+      this.showRefresh = (this.notificationDeliveryMethods.length !== allowMethods.length);
+    });
+  }
 }