Merge pull request #8362 from vvlladd28/improvement/notification/delivery-setting

Notification system improvements
4 years ago · 0f5f8ee714
8 changed files with 74 additions and 19 deletions
--- 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,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>
@ -246,7 +250,7 @@
              trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
      </div>
      <form [formGroup]="smsTemplateForm">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic">
          <mat-label translate>notification.message</mat-label>
          <textarea matInput
                    cdkTextareaAutosize
@ -257,6 +261,11 @@
          <mat-error *ngIf="smsTemplateForm.get('body').hasError('required')">
            {{ 'notification.message-required' | translate }}
          </mat-error>
+          <mat-error *ngIf="smsTemplateForm.get('body').hasError('maxlength')">
+            {{ 'notification.message-max-length' | translate :
+            {length: smsTemplateForm.get('body').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
        </mat-form-field>
      </form>
    </mat-step>
--- 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
@ -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 {
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
@ -156,7 +156,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
    });

    this.smsTemplateForm = this.fb.group({
-      body: ['', Validators.required]
+      body: ['', [Validators.required, Validators.maxLength(320)]]
    });

    this.slackTemplateForm = this.fb.group({
--- 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
@ -54,10 +54,8 @@
          </mat-select>
        </mat-form-field>
        <section formGroupName="configuration">
-          <label class="tb-title tb-required"
-                 [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
-            {{ "notification.delivery-methods" | translate }}
-          </label>
+          <label [ngClass]="{'tb-error': templateNotificationForm.get('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 warap">
            <section *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"
@ -167,7 +165,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 +184,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>
@ -203,7 +207,7 @@
              trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
      </div>
      <form [formGroup]="smsTemplateForm">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" subscriptSizing="dynamic">
          <mat-label translate>notification.message</mat-label>
          <textarea matInput
                    cdkTextareaAutosize
@ -214,6 +218,11 @@
          <mat-error *ngIf="smsTemplateForm.get('body').hasError('required')">
            {{ 'notification.message-required' | translate }}
          </mat-error>
+          <mat-error *ngIf="smsTemplateForm.get('body').hasError('maxlength')">
+            {{ 'notification.message-max-length' | translate :
+            {length: smsTemplateForm.get('body').getError('maxlength').requiredLength}
+            }}
+          </mat-error>
        </mat-form-field>
      </form>
    </mat-step>
--- a/ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
+++ b/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 {
--- 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
@ -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';
--- a/ui-ngx/src/app/shared/components/notification/notification.component.ts
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.ts
@ -95,7 +95,8 @@ export class NotificationComponent implements OnInit {
      let link: string;
      if (this.notification.additionalConfig.actionButtonConfig.linkType === ActionButtonLinkType.DASHBOARD) {
        let state = null;
-        if (this.notification.additionalConfig.actionButtonConfig.dashboardState) {
+        if (this.notification.additionalConfig.actionButtonConfig.dashboardState ||
+          this.notification.additionalConfig.actionButtonConfig.setEntityIdInState) {
          const stateObject: StateObject = {};
          if (this.notification.additionalConfig.actionButtonConfig.setEntityIdInState) {
            stateObject.params = {
@ -104,7 +105,9 @@ export class NotificationComponent implements OnInit {
          } else {
            stateObject.params = {};
          }
-          stateObject.id = this.notification.additionalConfig.actionButtonConfig.dashboardState;
+          if (this.notification.additionalConfig.actionButtonConfig.dashboardState) {
+            stateObject.id = this.notification.additionalConfig.actionButtonConfig.dashboardState;
+          }
          state = objToBase64URI([ stateObject ]);
        }
        link = `/dashboards/${this.notification.additionalConfig.actionButtonConfig.dashboardId}`;
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@ -2841,6 +2841,7 @@
        "mark-as-read": "Mark as read",
        "message": "Message",
        "message-required": "Message is required",
+        "message-max-length": "Message should be less than or equal to {{ length }} characters",
        "name": "Name",
        "name-required": "Name is required",
        "new-notification": "New notification",