UI: Change style notification system and improv notification ws

ui-ngx/src/app/modules/home/components/notification/notification-bell.component.ts

@@ -30,6 +30,9 @@ import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { ShowNotificationPopoverComponent } from '@home/components/notification/show-notification-popover.component';
 import { NotificationSubscriber } from '@shared/models/websocket/notification-ws.models';
+import { select, Store } from '@ngrx/store';
+import { selectIsAuthenticated } from '@core/auth/auth.selectors';
+import { AppState } from '@core/core.state';
 
 @Component({
   selector: 'tb-notification-bell',
@@ -56,8 +59,14 @@ export class NotificationBellComponent implements OnDestroy {
     private cd: ChangeDetectorRef,
     private popoverService: TbPopoverService,
     private renderer: Renderer2,
-    private viewContainerRef: ViewContainerRef) {
+    private viewContainerRef: ViewContainerRef,
+    private store: Store<AppState>,) {
     this.initSubscription();
+    this.store.pipe(select(selectIsAuthenticated)).subscribe((value) => {
+      if (value) {
+        this.initSubscription();
+      }
+    })
   }
 
   ngOnDestroy() {

ui-ngx/src/app/modules/home/pages/notification-center/inbox-table/inbox-table-header.component.scss

@@ -37,7 +37,7 @@
         left: 2px;
         right: 2px;
         bottom: 2px;
-        border-radius: 12px;
+        border-radius: 14px;
       }
     }
 
@@ -60,8 +60,9 @@
 
     .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
       line-height: 24px;
-      font-size: 16px;
+      font-size: 14px;
       font-weight: 500;
+      letter-spacing: .25px;
     }
 
     .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {

ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts

@@ -66,7 +66,7 @@ export class InboxTableConfig extends EntityTableConfig<Notification> {
     }];
 
     this.columns.push(
-      new DateEntityTableColumn<Notification>('createdTime', 'notification.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<Notification>('createdTime', 'notification.created-time', this.datePipe, '170px'),
       new EntityTableColumn<Notification>('type', 'notification.type', '10%', (notification) =>
         this.translate.instant(NotificationTemplateTypeTranslateMap.get(notification.type).name)),
       new EntityTableColumn<Notification>('subject', 'notification.subject', '30%'),

ui-ngx/src/app/modules/home/pages/notification-center/notification-table/request-table-config.ts

@@ -69,14 +69,14 @@ export class RequestTableConfig extends EntityTableConfig<NotificationRequest, P
     this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
 
     this.columns.push(
-      new DateEntityTableColumn<NotificationRequestInfo>('createdTime', 'notification.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<NotificationRequestInfo>('createdTime', 'notification.created-time', this.datePipe, '170px'),
       new EntityTableColumn<NotificationRequestInfo>('status', 'notification.status', '15%',
         request => this.requestStatus(request.status), request => this.requestStatusStyle(request.status)),
-      new EntityTableColumn<NotificationRequest>('deliveryMethods', 'notification.delivery-method', '35%',
+      new EntityTableColumn<NotificationRequest>('deliveryMethods', 'notification.delivery-method', '15%',
         (request) => request.deliveryMethods
           .map((deliveryMethod) => this.translate.instant(NotificationDeliveryMethodTranslateMap.get(deliveryMethod))).join(', '),
         () => ({}), false),
-      new EntityTableColumn<NotificationRequest>('templateName', 'notification.template', '50%')
+      new EntityTableColumn<NotificationRequest>('templateName', 'notification.template', '70%')
     );
   }
 
@@ -131,7 +131,7 @@ export class RequestTableConfig extends EntityTableConfig<NotificationRequest, P
         backgroundColor = 'rgba(212, 125, 24, 0.08)';
         break;
     }
-    return `<div style="border-radius: 16px; height: 32px; line-height: 32px; padding: 0 12px; width: fit-content; background-color: ${backgroundColor}">
+    return `<div style="border-radius: 12px; height: 24px; line-height: 24px; padding: 0 10px; width: fit-content; background-color: ${backgroundColor}">
                 ${this.translate.instant(translateKey)}
             </div>`;
   }

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html

@@ -28,7 +28,7 @@
 </mat-progress-bar>
 <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
 <div mat-dialog-content>
-  <mat-horizontal-stepper [linear]="true" labelPosition="end" #createNotification
+  <mat-horizontal-stepper [linear]="true" #createNotification
                           [orientation]="(stepperOrientation | async)"
                           (selectionChange)="changeStep($event)">
     <ng-template matStepperIcon="edit">
@@ -41,8 +41,8 @@
           <mat-button-toggle-group class="tb-notification-use-template-toggle-group"
                                    style="width: 320px;"
                                    formControlName="useTemplate">
-            <mat-button-toggle fxFlex [value]=true>{{ 'notification.use-template' | translate }}</mat-button-toggle>
             <mat-button-toggle fxFlex [value]=false>{{ 'notification.start-from-scratch' | translate }}</mat-button-toggle>
+            <mat-button-toggle fxFlex [value]=true>{{ 'notification.use-template' | translate }}</mat-button-toggle>
           </mat-button-toggle-group>
         </div>
         <tb-template-autocomplete
@@ -75,7 +75,8 @@
                      [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
                 {{ "notification.delivery-methods" | translate }}
               </label>
-              <section formGroupName="deliveryMethodsTemplates" fxLayout="row wrap">
+              <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"
                          [formGroupName]="deliveryMethods" fxFlex="50%" [ngClass]={even:isEven}>
                   <mat-slide-toggle class="delivery-method" formControlName="enabled">
@@ -83,7 +84,6 @@
                   </mat-slide-toggle>
                 </section>
               </section>
-              <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
             </section>
           </section>
         </ng-template>
@@ -270,7 +270,7 @@
       <div *ngIf="preview" style="padding-bottom: 16px">
         <section class="preview-group notification" *ngIf="preview.processedTemplates.PUSH?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon svgIcon="mdi:bell-badge"></mat-icon>
+            <mat-icon class="tb-mat-18" svgIcon="mdi:bell-badge"></mat-icon>
             <div class="group-title" translate>notification.delivery-method-type.push-preview</div>
           </div>
           <div class="web-preview">
@@ -279,7 +279,7 @@
         </section>
         <section class="preview-group notification" *ngIf="preview.processedTemplates.EMAIL?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon svgIcon="mdi:email"></mat-icon>
+            <mat-icon class="tb-mat-18" svgIcon="mdi:email"></mat-icon>
             <div class="group-title" translate>notification.delivery-method-type.email-preview</div>
           </div>
           <div class="notification-content">
@@ -290,7 +290,7 @@
         </section>
         <section class="preview-group notification" *ngIf="preview.processedTemplates.SMS?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon svgIcon="mdi:message-processing"></mat-icon>
+            <mat-icon class="tb-mat-18" svgIcon="mdi:message-processing"></mat-icon>
             <div class="group-title" translate>notification.delivery-method-type.sms-preview</div>
           </div>
           <div class="notification-content">
@@ -299,7 +299,7 @@
         </section>
         <section class="preview-group notification" *ngIf="preview.processedTemplates.SLACK?.enabled">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon svgIcon="mdi:slack"></mat-icon>
+            <mat-icon class="tb-mat-18" svgIcon="mdi:slack"></mat-icon>
             <div class="group-title" translate>notification.delivery-method-type.slack-preview</div>
           </div>
           <div class="notification-content">
@@ -308,7 +308,7 @@
         </section>
         <section class="preview-group">
           <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
-            <mat-icon>supervisor_account</mat-icon>
+            <mat-icon  class="tb-mat-18">supervisor_account</mat-icon>
             <div class="group-title">{{ 'notification.recipients-count' | translate : {count: preview.totalRecipientsCount} }}</div>
           </div>
           <div class="details-recipients" *ngIf="notificationRequestForm.get('targets').value.length > 1">

ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss

@@ -25,7 +25,16 @@
   flex-direction: column;
 
   .tb-form-fields {
-    margin-bottom: 8px;
+    margin-bottom: 18px;
+  }
+
+  .tb-title {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .tb-hint {
+    padding: 0 0 8px;
   }
 
   .tb-hint-available-params {
@@ -47,7 +56,7 @@
 
     .delivery-method {
       padding: 16px 12px;
-      border: 1px solid rgba(0, 0, 0, 0.12);
+      border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 6px;
       width: 100%;
       height: 100%;
@@ -55,15 +64,15 @@
   }
 
   .additional-config-group {
-    padding: 16px 16px 4px;
+    padding: 16px 16px 0;
     margin-bottom: 12px;
-    border: 1px solid rgba(0, 0, 0, 0.12);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 6px;
     width: 100%;
     height: 100%;
 
     .toggle {
-      margin-bottom: 12px;
+      margin-bottom: 16px;
     }
   }
 
@@ -79,7 +88,7 @@
 
     .group-title {
       font-weight: 500;
-      letter-spacing: .25px;
+      font-size: 14px;
     }
 
     &> div:not(:last-child) {
@@ -89,7 +98,6 @@
     .details-recipient {
       font-size: 14px;
       line-height: 14px;
-      letter-spacing: .2px;
 
       .number {
         font-weight: 500;
@@ -110,13 +118,14 @@
       tb-notification {
         border: 1px groove $tb-primary-color;
         border-radius: 4px;
+        max-width: 400px;
         width: 80%;
         background-color: #fff;
       }
     }
 
     .notification-content {
-      border: 1px solid rgba(0, 0, 0, 0.12);
+      border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 4px;
       background: #fff;
       padding: 12px 16px;
@@ -154,7 +163,7 @@
       }
 
       .mat-horizontal-content-container {
-        height: 600px;
+        height: 680px;
         max-height: 100%;
         width: 100%;;
         overflow-y: auto;
@@ -170,7 +179,7 @@
     &.mat-button-toggle-group-appearance-standard {
       border: none;
       border-radius: 18px;
-      margin-bottom: 8px;
+      margin-bottom: 24px;
 
       .mat-button-toggle + .mat-button-toggle {
         border-left: none;

ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss

@@ -42,7 +42,7 @@
     .mat-mdc-radio-button {
       flex: 1 1 100%;
       padding: 4px;
-      border: 1px solid rgba(0, 0, 0, 0.12);
+      border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 6px;
 
       &.mat-mdc-radio-checked {

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

@@ -72,6 +72,7 @@
                  [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}">
             {{ "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"
                      [formGroupName]="deliveryMethods" fxFlex="50%" [ngClass]={even:isEven}>
@@ -80,7 +81,6 @@
               </mat-slide-toggle>
             </section>
           </section>
-          <div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
         </section>
       </form>
     </mat-step>

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

@@ -25,11 +25,16 @@
   flex-direction: column;
 
   .tb-form-fields {
-    margin-bottom: 8px;
+    margin-bottom: 18px;
+  }
+
+  .tb-title {
+    font-size: 16px;
+    line-height: 24px;
   }
 
   .tb-hint {
-    padding: 0;
+    padding: 0 0 8px;
   }
 
   .tb-hint-available-params {
@@ -51,7 +56,7 @@
 
     .delivery-method {
       padding: 16px 12px;
-      border: 1px solid rgba(0, 0, 0, 0.12);
+      border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 6px;
       width: 100%;
       height: 100%;
@@ -61,7 +66,7 @@
   .additional-config-group {
     padding: 16px 16px 4px;
     margin-bottom: 12px;
-    border: 1px solid rgba(0, 0, 0, 0.12);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 6px;
     width: 100%;
     height: 100%;

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

@@ -14,18 +14,13 @@
 /// limitations under the License.
 ///
 
-import {
-  NotificationDeliveryMethod,
-  NotificationDeliveryMethodTranslateMap,
-  NotificationTemplate,
-  NotificationType
-} from '@shared/models/notification.models';
+import { NotificationDeliveryMethod, NotificationTemplate, NotificationType } from '@shared/models/notification.models';
 import { Component, Inject, OnDestroy, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 import { NotificationService } from '@core/http/notification.service';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import { Observable } from 'rxjs';

ui-ngx/src/app/shared/components/notification/notification.component.html

@@ -38,7 +38,7 @@
   </div>
   <div class="description" fxLayout="column" fxLayoutAlign="start end">
     <div fxLayout="row" fxLayoutAlign="end center" class="mark-read">
-      <span class="time" *ngIf="!preview">{{ notification.createdTime | dateAgo }}</span>
+      <span class="time">{{ notification.createdTime ?? currentDate | dateAgo }}</span>
       <button mat-icon-button class="tb-mat-28" (click)="markRead($event)">
         <mat-icon>check_circle_outline</mat-icon>
       </button>

ui-ngx/src/app/shared/components/notification/notification.component.ts

@@ -24,11 +24,11 @@ import {
 } from '@shared/models/notification.models';
 import { UtilsService } from '@core/services/utils.service';
 import { Router } from '@angular/router';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { alarmSeverityTranslations } from '@shared/models/alarm.models';
 import * as tinycolor_ from 'tinycolor2';
 import { StateObject } from '@core/api/widget-api.models';
 import { objToBase64URI } from '@core/utils';
+import { coerceBoolean } from '@shared/decorators/coerce-boolean';
 
 @Component({
   selector: 'tb-notification',
@@ -46,14 +46,9 @@ export class NotificationComponent implements OnInit {
   @Output()
   markAsRead = new EventEmitter<string>();
 
-  private previewValue = false;
-  get preview(): boolean {
-    return this.previewValue;
-  }
   @Input()
-  set preview(value: boolean) {
-    this.previewValue = coerceBooleanProperty(value);
-  }
+  @coerceBoolean()
+  preview = false;
 
   showIcon = false;
   showButton = false;
@@ -65,6 +60,8 @@ export class NotificationComponent implements OnInit {
   notificationTypeIcons = NotificationTypeIcons;
   alarmSeverityTranslations = alarmSeverityTranslations;
 
+  currentDate = Date.now();
+
   constructor(
     private utils: UtilsService,
     private router: Router