From 3f48b2a0ee42691bfff77538373b1c37de686030 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 21 Feb 2024 18:24:00 +0200
Subject: [PATCH] UI: Minor fixed in notification dialog

---
 .../sent-notification-dialog.component.html   | 26 +++++++++++--------
 .../sent-notification-dialog.component.scss   |  9 +++++++
 .../sent/sent-notification-dialog.componet.ts |  2 ++
 ...tion-template-configuration.component.scss |  2 +-
 ...emplate-notification-dialog.component.html | 18 +++++++------
 .../template-notification-dialog.component.ts |  1 +
 6 files changed, 38 insertions(+), 20 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 8f5d41de34..bf59950953 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
@@ -140,20 +140,24 @@
     <mat-step *ngIf="!notificationRequestForm.get('useTemplate').value"
               [stepControl]="notificationTemplateConfigurationForm" #composeStep=matStep>
       <ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
-      <form [formGroup]="notificationTemplateConfigurationForm">
-        <tb-template-configuration
-          [notificationType]="templateNotificationForm.get('notificationType').value"
-          [predefinedDeliveryMethodsTemplate]="deliveryConfiguration"
-          [interacted]="composeStep.interacted"
-          formControlName="deliveryMethodsTemplates">
-        </tb-template-configuration>
-      </form>
+      <ng-template matStepContent>
+        <form [formGroup]="notificationTemplateConfigurationForm">
+          <tb-template-configuration
+            notificationType="{{ notificationType.GENERAL }}"
+            [predefinedDeliveryMethodsTemplate]="deliveryConfiguration"
+            [interacted]="composeStep.interacted"
+            formControlName="deliveryMethodsTemplates">
+          </tb-template-configuration>
+        </form>
+      </ng-template>
     </mat-step>
     <mat-step>
       <ng-template matStepLabel>{{ 'notification.review' | translate }}</ng-template>
-      <mat-progress-spinner color="warn" mode="indeterminate"
-                            strokeWidth="5" *ngIf="(isLoading$ | async) && !preview">
-      </mat-progress-spinner>
+      <div class="tb-loader" *ngIf="(isLoading$ | async) && !preview">
+        <mat-progress-spinner color="warn" mode="indeterminate"
+                              strokeWidth="5">
+        </mat-progress-spinner>
+      </div>
       <div *ngIf="preview" class="tb-form-panel no-padding no-border">
         <section class="preview-group tb-form-panel stroked no-gap">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
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 ee0c8aeedc..a6e8def974 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
@@ -110,6 +110,15 @@
     margin-bottom: 16px;
   }
 
+  .tb-loader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 400px;
+    max-height: 100%;
+  }
+
   .preview-group {
     &.notification {
       background-color: #F3F6FA;
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 4d2d184dbd..7060baf5cc 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
@@ -147,6 +147,7 @@ export class SentNotificationDialogComponent extends
       this.notificationRequestForm.reset({}, {emitEvent: false});
       this.notificationRequestForm.patchValue(this.data.request, {emitEvent: false});
       this.notificationRequestForm.get('template.name').setValue(guid());
+      this.notificationRequestForm.get('template.notificationType').setValue(NotificationType.GENERAL);
       let useTemplate = true;
       if (isDefinedAndNotNull(this.data.request.template)) {
         useTemplate = false;
@@ -155,6 +156,7 @@ export class SentNotificationDialogComponent extends
         }, {emitEvent: false});
       }
       this.notificationRequestForm.get('useTemplate').setValue(useTemplate, {onlySelf : true});
+      this.deliveryConfiguration = this.templateNotificationForm.get('configuration.deliveryMethodsTemplates').value;
     }
     this.refreshAllowDeliveryMethod();
   }
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss
index 312f69bdc7..eed548f07b 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.scss
@@ -17,7 +17,7 @@
   .tb-template-header {
     position: sticky;
     top: 0;
-    z-index: 1;
+    z-index: 5;
     padding-bottom: 12px;
     background-color: var(--mdc-dialog-container-color, white);
 
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 73618fd939..2d3e642dd2 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
@@ -71,14 +71,16 @@
     </mat-step>
     <mat-step [stepControl]="notificationTemplateConfigurationForm" #composeStep=matStep>
       <ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
-      <form [formGroup]="notificationTemplateConfigurationForm">
-        <tb-template-configuration
-          [notificationType]="templateNotificationForm.get('notificationType').value"
-          [predefinedDeliveryMethodsTemplate]="deliveryConfiguration"
-          [interacted]="composeStep.interacted"
-          formControlName="deliveryMethodsTemplates">
-        </tb-template-configuration>
-      </form>
+      <ng-template matStepContent>
+        <form [formGroup]="notificationTemplateConfigurationForm">
+          <tb-template-configuration
+            [notificationType]="templateNotificationForm.get('notificationType').value"
+            [predefinedDeliveryMethodsTemplate]="deliveryConfiguration"
+            [interacted]="composeStep.interacted"
+            formControlName="deliveryMethodsTemplates">
+          </tb-template-configuration>
+        </form>
+      </ng-template>
     </mat-step>
   </mat-horizontal-stepper>
 </div>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
index b34e5e5c4f..c0ae4f1abb 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts
@@ -102,6 +102,7 @@ export class TemplateNotificationDialogComponent
       this.notificationTemplateConfigurationForm.patchValue({
         deliveryMethodsTemplates: this.templateNotification.configuration.deliveryMethodsTemplates
       }, {emitEvent: false});
+      this.deliveryConfiguration = this.templateNotificationForm.get('configuration.deliveryMethodsTemplates').value;
     }
   }