UI: Minor fixed in notification dialog

Author: vvlladd28

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

@@ -140,20 +140,24 @@ <h2>{{ dialogTitle | translate }}</h2>
     <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">

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;

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();
   }

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);
 

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

@@ -71,14 +71,16 @@ <h2>{{ dialogTitle | translate }}</h2>
     </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>

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;
     }
   }