From 03efbe3f7d4ca20f9c41c3bc051ca4d2ad008ca3 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 24 Apr 2023 15:55:36 +0300
Subject: [PATCH] UI: Add refresh delivery notification method

---
 .../sent-notification-dialog.component.html   | 18 ++++++++++---
 .../sent-notification-dialog.component.scss   |  7 +++++
 .../sent/sent-notification-dialog.componet.ts | 26 ++++++++++++-------
 3 files changed, 39 insertions(+), 12 deletions(-)

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 6aac94f03b..fe5211d024 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
@@ -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')}"
-                     class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
-              <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
+              <div class="delivery-title">
+                <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"
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 2a472f8c69..0702d6bf52 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,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;
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 f52a54ad05..3d8857694b 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
@@ -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.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
-        }
-      });
-    });
+    this.refreshAllowDeliveryMethod();
   }
 
   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);
+    });
+  }
 }