UI: Added in notification email template highlight for message field is required

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

@@ -59,10 +59,8 @@
           <ng-container *ngTemplateOutlet="recipientsList"></ng-container>
           <section formGroupName="template">
             <section formGroupName="configuration">
-              <label class="tb-title tb-required"
-                     [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
-                {{ "notification.delivery-methods" | translate }}
-              </label>
+              <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 *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"
@@ -209,7 +207,7 @@
     </mat-step>
     <mat-step *ngIf="!notificationRequestForm.get('useTemplate').value &&
                      notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.EMAIL.enabled').value"
-              [stepControl]="emailTemplateForm">
+              [stepControl]="emailTemplateForm"  #emailStep="matStep">
       <ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
       <ng-template matStepContent>
         <div class="tb-hint-available-params mat-body-2">
@@ -228,8 +226,14 @@
               {{ 'notification.subject-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-label class="tb-title" translate>notification.message</mat-label>
+          <mat-label class="tb-title tb-required"
+                     [ngClass]="{'tb-error': (emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')}"
+                     translate>notification.message</mat-label>
           <editor [init]="tinyMceOptions" formControlName="body"></editor>
+          <mat-error class="tb-mat-error"
+                     *ngIf="(emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')">
+            {{ 'notification.message-required' | translate }}
+          </mat-error>
         </form>
       </ng-template>
     </mat-step>

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

@@ -27,6 +27,22 @@
   .tb-title {
     font-size: 16px;
     line-height: 24px;
+    &.tb-required::after {
+      font-size: initial;
+      content: "*";
+    }
+
+    &.tb-error {
+      color: var(--mdc-theme-error, #f44336);
+
+      &.tb-required::after {
+        color: var(--mdc-theme-error, #f44336);
+      }
+    }
+  }
+
+  .tb-mat-error {
+    font-size: 13px;
   }
 
   .tb-hint {

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

@@ -167,7 +167,7 @@
       </form>
     </mat-step>
     <mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.EMAIL.enabled').value"
-      [stepControl]="emailTemplateForm">
+      [stepControl]="emailTemplateForm" #emailStep="matStep">
       <ng-template matStepLabel>{{ 'notification.delivery-method.email' | translate }}</ng-template>
       <ng-template matStepContent>
         <div class="tb-hint-available-params mat-body-2">
@@ -186,8 +186,14 @@
               {{ 'notification.subject-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-label class="tb-title" translate>notification.message</mat-label>
-          <editor [init]="tinyMceOptions" formControlName="body"></editor>
+          <mat-label class="tb-title tb-required"
+                     [ngClass]="{'tb-error': (emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')}"
+                     translate>notification.message</mat-label>
+          <editor [init]="tinyMceOptions" matInput formControlName="body"></editor>
+          <mat-error class="tb-mat-error"
+            *ngIf="(emailStep.interacted || emailTemplateForm.get('body').dirty) && emailTemplateForm.get('body').hasError('required')">
+            {{ 'notification.message-required' | translate }}
+          </mat-error>
         </form>
       </ng-template>
     </mat-step>

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

@@ -27,6 +27,23 @@
   .tb-title {
     font-size: 16px;
     line-height: 24px;
+
+    &.tb-required::after {
+      font-size: initial;
+      content: "*";
+    }
+
+    &.tb-error {
+      color: var(--mdc-theme-error, #f44336);
+
+      &.tb-required::after {
+        color: var(--mdc-theme-error, #f44336);
+      }
+    }
+  }
+
+  .tb-mat-error {
+    font-size: 13px;
   }
 
   .tb-hint {

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

@@ -138,7 +138,7 @@ export class TemplateNotificationDialogComponent
   }
 
   nextStepLabel(): string {
-    if (this.selectedIndex >= this.maxStepperIndex) {
+    if (this.selectedIndex >= this.maxStepperIndex && this.selectedIndex !== 0) {
       return (this.data.isAdd || this.data.isCopy) ? 'action.add' : 'action.save';
     }
     return 'action.next';