Merge pull request #8903 from ArtemDzhereleiko/AD/imp/user-notification-settings

Improvements for user notification settings

ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.html

@@ -18,19 +18,17 @@
 <form [formGroup]="notificationSettingsFormGroup" fxLayout="column">
   <div fxLayout="row" style="height: 48px;">
     <div fxFlex="50" fxLayoutAlign="start center">
-      <button mat-icon-button
+      <mat-checkbox color="primary"
-        (click)="toggleEnabled()">
+                    [checked]="notificationSettingsFormGroup.get('enabled').value"
-        <mat-icon style="color: rgba(0, 0, 0, 0.54);"
+                    (click)="toggleEnabled()">
-                  [svgIcon]="notificationSettingsFormGroup.get('enabled').value ? 'mdi:toggle-switch': 'mdi:toggle-switch-off-outline'">
+        <span class="notification-type"
-        </mat-icon>
+              [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
-      </button>
+          {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
-      <span class="notification-type"
+        </span>
-            [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
+      </mat-checkbox>
-        {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
-      </span>
     </div>
-    <div fxFlex fxLayout="row" *ngFor="let deliveryMethods of notificationDeliveryMethodMap">
+    <div fxFlex fxLayout="row" *ngFor="let deliveryMethods of deliveryMethods">
-      <div fxFlex fxLayoutAlign="center center">
+      <div fxFlex fxLayoutAlign="start center">
         <mat-checkbox color="primary"
                       [disabled]="!allowDeliveryMethods?.includes(deliveryMethods) || !notificationSettingsFormGroup.get('enabled').value"
                       [checked]="getChecked(deliveryMethods)"

ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts

@@ -43,12 +43,13 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   disabled: boolean;
 
   @Input()
-  allowDeliveryMethods = [];
+  deliveryMethods: NotificationDeliveryMethod[] = [];
+
+  @Input()
+  allowDeliveryMethods: NotificationDeliveryMethod[] = [];
 
   notificationSettingsFormGroup: UntypedFormGroup;
 
-  notificationDeliveryMethod = NotificationDeliveryMethod;
-  notificationDeliveryMethodMap = [NotificationDeliveryMethod.WEB, NotificationDeliveryMethod.SMS, NotificationDeliveryMethod.EMAIL];
   notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap;
 
   private propagateChange = null;
@@ -67,11 +68,17 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   }
 
   ngOnInit() {
+    const deliveryMethod = {};
+    this.deliveryMethods.forEach(value => {
+      deliveryMethod[value] = true;
+    });
     this.notificationSettingsFormGroup = this.fb.group(
       {
         name: [''],
         enabled: [true],
-        enabledDeliveryMethods: []
+        enabledDeliveryMethods: this.fb.group({
+          ...deliveryMethod
+        })
       });
     this.valueChange$ = this.notificationSettingsFormGroup.valueChanges.subscribe(() => {
       this.updateModel();
@@ -99,17 +106,12 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   }
 
   getChecked(deliveryMethod: NotificationDeliveryMethod): boolean {
-    return this.notificationSettingsFormGroup.get('enabledDeliveryMethods').value.includes(deliveryMethod);
+    return this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod).value;
   }
 
   toggleDeliviryMethod(deliveryMethod: NotificationDeliveryMethod) {
-    const enabledDeliveryMethods = this.notificationSettingsFormGroup.get('enabledDeliveryMethods').value;
+    this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod)
-    if (enabledDeliveryMethods.includes(deliveryMethod)) {
+      .patchValue(!this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod).value);
-      enabledDeliveryMethods.splice(enabledDeliveryMethods.indexOf(deliveryMethod), 1);
-    } else {
-      enabledDeliveryMethods.push(deliveryMethod);
-    }
-    this.notificationSettingsFormGroup.get('enabledDeliveryMethods').patchValue(enabledDeliveryMethods);
   }
 
   writeValue(value: NotificationUserSetting): void {

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

@@ -16,7 +16,7 @@
 
 -->
 <div>
-  <mat-card appearance="outlined" class="settings-card">
+  <mat-card appearance="outlined" class="settings-card tb-absolute-fill">
     <mat-card-header>
       <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="8px"
            fxLayoutAlign="space-between start" fxLayoutAlign.xs="start start">
@@ -33,8 +33,8 @@
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
     </mat-progress-bar>
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
-    <mat-card-content style="padding-top: 16px;">
+    <mat-card-content style="padding-top: 16px; overflow: hidden;">
-      <form [formGroup]="notificationSettings" (ngSubmit)="save()">
+      <form [formGroup]="notificationSettings" class="notification-form">
         <section class="notification-section">
           <div  class="notification-section-block">
             <div fxLayout="row" fxLayoutAlign="start center" style="height: 44px;">
@@ -48,7 +48,7 @@
                 </mat-checkbox>
               </div>
               <div fxFlex *ngFor="let deliveryMethods of notificationDeliveryMethods">
-                <div fxFlex fxLayoutAlign="center center">
+                <div fxFlex fxLayoutAlign="start center">
                   <mat-checkbox color="warn"
                                 [disabled]="!allowNotificationDeliveryMethods?.includes(deliveryMethods) || !getSomeChecked()"
                                 [checked]="getChecked(deliveryMethods)"
@@ -62,19 +62,23 @@
             </div>
             <mat-divider></mat-divider>
             <div *ngFor="let settingsControl of notificationSettingsFormArray.controls; let i = index; let $last = last;">
-              <tb-notification-setting-form [formControl]="settingsControl" [allowDeliveryMethods]="allowNotificationDeliveryMethods"></tb-notification-setting-form>
+              <tb-notification-setting-form [formControl]="settingsControl"
+                                            [deliveryMethods]="notificationDeliveryMethods"
+                                            [allowDeliveryMethods]="allowNotificationDeliveryMethods">
+              </tb-notification-setting-form>
               <mat-divider *ngIf="!$last"></mat-divider>
             </div>
           </div>
         </section>
-        <div fxLayout="row" fxLayoutAlign="end start">
-          <button mat-button mat-raised-button color="primary"
-                  type="submit"
-                  [disabled]="(isLoading$ | async) || notificationSettings.invalid || !notificationSettings.dirty">
-            {{ 'action.save' | translate }}
-          </button>
-        </div>
       </form>
     </mat-card-content>
+    <div fxLayout="row" fxLayoutAlign="end start" style="padding: 16px;">
+      <button mat-button mat-raised-button color="primary"
+              type="button"
+              (click)="save()"
+              [disabled]="(isLoading$ | async) || notificationSettings.invalid || !notificationSettings.dirty">
+        {{ 'action.save' | translate }}
+      </button>
+    </div>
   </mat-card>
 </div>

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

@@ -24,13 +24,17 @@
     .mat-headline-5 {
       margin: 0;
     }
+    .notification-form {
+      height: 100%;
+      min-height: min-content;
+      max-height: min-content;
+    }
     .notification-section {
-      margin-bottom: 16px;
+      height: 100%;
       border: 1px solid rgba(0, 0, 0, 0.12);
-      overflow-y: hidden;
+      overflow: scroll;
-      overflow-x: scroll;
       &-block {
-        min-width: 700px;
+        min-width: 470px;
       }
     }
   }

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

@@ -40,7 +40,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
 
   notificationSettings: UntypedFormGroup;
 
-  notificationDeliveryMethods = [NotificationDeliveryMethod.WEB, NotificationDeliveryMethod.SMS, NotificationDeliveryMethod.EMAIL];
+  notificationDeliveryMethods: NotificationDeliveryMethod[];
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
 
   allowNotificationDeliveryMethods: Array<NotificationDeliveryMethod>;
@@ -55,6 +55,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
   }
 
   ngOnInit() {
+    this.notificationDeliveryMethods = this.getNotificationDeliveryMethods();
 
     this.notificationService.getAvailableDeliveryMethods({ignoreLoading: true}).subscribe(allowMethods => {
       this.allowNotificationDeliveryMethods = allowMethods;
@@ -64,6 +65,13 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
     this.patchNotificationSettings(this.route.snapshot.data.userSettings);
   }
 
+  private getNotificationDeliveryMethods(): NotificationDeliveryMethod[] {
+    const deliveryMethods = new Set([
+      NotificationDeliveryMethod.SLACK
+    ]);
+    return Object.values(NotificationDeliveryMethod).filter(type => !deliveryMethods.has(type));
+  }
+
   private buildNotificationSettingsForm() {
     this.notificationSettings = this.fb.group({
       prefs: this.fb.array([])
@@ -76,6 +84,10 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
     if (settings.prefs) {
       preparedSettings = this.prepareNotificationSettings(settings.prefs);
       preparedSettings.forEach((setting) => {
+        setting.enabledDeliveryMethods = Object.assign(
+          this.notificationDeliveryMethods.reduce((a, v) => ({ ...a, [v]: true}), {}),
+          setting.enabledDeliveryMethods
+        );
         notificationSettingsControls.push(this.fb.control(setting, [Validators.required]));
       });
     }
@@ -105,7 +117,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
           if (settings) {
             settings.forEach((setting) => {
               setting.enabled = true;
-              setting.enabledDeliveryMethods = this.notificationDeliveryMethods;
+              setting.enabledDeliveryMethods = this.notificationDeliveryMethods.reduce((a, v) => ({ ...a, [v]: true}), {});
               notificationSettingsControls.push(this.fb.control(setting, [Validators.required]));
             });
           }
@@ -119,7 +131,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
   getChecked = (method: NotificationDeliveryMethod = null): boolean => {
     const type = this.notificationSettings.get('prefs').value;
     if (isDefinedAndNotNull(method)) {
-      return isDefinedAndNotNull(type) && type.every(resource => resource.enabledDeliveryMethods.includes(method));
+      return isDefinedAndNotNull(type) && type.every(resource => resource.enabledDeliveryMethods[method]);
     }
     return isDefinedAndNotNull(type) && type.every(resource => resource.enabled);
   };
@@ -133,7 +145,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
     const type = this.notificationSettings.get('prefs').value;
     if (isDefinedAndNotNull(type)) {
       const checkedResource = isDefinedAndNotNull(deliveryMethod) ?
-        type.filter(resource => resource.enabledDeliveryMethods.includes(deliveryMethod)) :
+        type.filter(resource => resource.enabledDeliveryMethods[deliveryMethod]) :
         type.filter(resource => resource.enabled);
       return checkedResource.length !== 0 && checkedResource.length !== type.length;
     }
@@ -143,13 +155,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
   changeInstanceTypeCheckBox = (value: boolean, deliveryMethod: NotificationDeliveryMethod = null): void => {
     const type = deepClone(this.notificationSettings.get('prefs').value);
     if (isDefinedAndNotNull(deliveryMethod)) {
-      type.forEach(notificationType => {
+      type.forEach(notificationType => notificationType.enabledDeliveryMethods[deliveryMethod] = value);
-        if (value && !notificationType.enabledDeliveryMethods.includes(deliveryMethod)) {
-          notificationType.enabledDeliveryMethods.push(deliveryMethod);
-        } else if (!value && notificationType.enabledDeliveryMethods.includes(deliveryMethod)) {
-          notificationType.enabledDeliveryMethods.splice(notificationType.enabledDeliveryMethods.indexOf(deliveryMethod), 1);
-        }
-      });
     } else {
       type.forEach(notificationType => notificationType.enabled = value);
     }

ui-ngx/src/app/shared/models/notification.models.ts

@@ -596,6 +596,5 @@ export interface NotificationUserSettings {
 
 export interface NotificationUserSetting {
   enabled: boolean;
-  enabledDeliveryMethods: Array<NotificationDeliveryMethod>;
+  enabledDeliveryMethods: {[key: string]: boolean};
 }
-