UI: Improvement for notification settings

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

@@ -19,20 +19,21 @@
   <div fxLayout="row" style="height: 48px;">
     <div fxFlex="50" fxLayoutAlign="start center">
       <mat-checkbox color="primary"
-                    [checked]="notificationSettingsFormGroup.get('enabled').value"
+                    (click)="$event.stopPropagation()"
-                    (click)="toggleEnabled()">
+                    (change)="changeInstanceTypeCheckBox($event.checked)"
+                    [checked]="getChecked()"
+                    [indeterminate]="getIndeterminate()">
         <span class="notification-type"
               [ngClass]="{'notification-type-disabled': !notificationSettingsFormGroup.get('enabled').value}">
           {{notificationTemplateTypeTranslateMap.get(notificationSettingsFormGroup.get('name').value)?.name | translate}}
         </span>
       </mat-checkbox>
     </div>
-    <div fxFlex fxLayout="row" *ngFor="let deliveryMethods of deliveryMethods">
+    <div fxFlex fxLayout="row" *ngFor="let deliveryMethod of deliveryMethods">
       <div fxFlex fxLayoutAlign="start center">
         <mat-checkbox color="primary"
-                      [disabled]="!allowDeliveryMethods?.includes(deliveryMethods) || !notificationSettingsFormGroup.get('enabled').value"
+                      [checked]="getChecked(deliveryMethod)"
-                      [checked]="getChecked(deliveryMethods)"
+                      (click)="toggleDeliviryMethod(deliveryMethod)"
-                      (click)="toggleDeliviryMethod(deliveryMethods)"
         ></mat-checkbox>
       </div>
     </div>

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

@@ -16,8 +16,7 @@
 
 import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { UtilsService } from '@core/services/utils.service';
+import { deepClone, isDefinedAndNotNull } from '@core/utils';
-import { isDefinedAndNotNull } from '@core/utils';
 import { Subscription } from 'rxjs';
 import {
   NotificationDeliveryMethod,
@@ -45,9 +44,6 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   @Input()
   deliveryMethods: NotificationDeliveryMethod[] = [];
 
-  @Input()
-  allowDeliveryMethods: NotificationDeliveryMethod[] = [];
-
   notificationSettingsFormGroup: UntypedFormGroup;
 
   notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap;
@@ -56,8 +52,7 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
 
   private valueChange$: Subscription = null;
 
-  constructor(private utils: UtilsService,
+  constructor(private fb: UntypedFormBuilder) {
-              private fb: UntypedFormBuilder) {
   }
 
   registerOnChange(fn: any): void {
@@ -101,12 +96,17 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
     }
   }
 
-  toggleEnabled() {
+  getChecked(deliveryMethod?: NotificationDeliveryMethod): boolean {
-    this.notificationSettingsFormGroup.get('enabled').patchValue(!this.notificationSettingsFormGroup.get('enabled').value);
+    if (deliveryMethod) {
-  }
+      return this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod).value;
-
+    } else {
-  getChecked(deliveryMethod: NotificationDeliveryMethod): boolean {
+      const enabledDeliveryMethod = Object.values(this.notificationSettingsFormGroup.get('enabledDeliveryMethods').value);
-    return this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod).value;
+      const checked = enabledDeliveryMethod.some(value => value === true);
+      if (checked !== this.notificationSettingsFormGroup.get('enabled').value) {
+        setTimeout(() => this.notificationSettingsFormGroup.get('enabled').patchValue(checked), 0);
+      }
+      return enabledDeliveryMethod.every(value => value);
+    }
   }
 
   toggleDeliviryMethod(deliveryMethod: NotificationDeliveryMethod) {
@@ -114,6 +114,25 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
       .patchValue(!this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod).value);
   }
 
+  changeInstanceTypeCheckBox(value: any) {
+    const enabledDeliveryMethod = deepClone(this.notificationSettingsFormGroup.get('enabledDeliveryMethods').value);
+    Object.keys(enabledDeliveryMethod).forEach(key => {
+      enabledDeliveryMethod[key] = value;
+    });
+    this.notificationSettingsFormGroup.get('enabled').patchValue(value, {emitEvent: false});
+    this.notificationSettingsFormGroup.get('enabledDeliveryMethods').patchValue(enabledDeliveryMethod);
+    this.notificationSettingsFormGroup.markAsDirty();
+  }
+
+  getIndeterminate() {
+    if (!this.notificationSettingsFormGroup.get('enabled').value) {
+      return false;
+    }
+    const enabledDeliveryMethod: Array<boolean> = Object.values(this.notificationSettingsFormGroup.get('enabledDeliveryMethods').value);
+    const checkedResource = enabledDeliveryMethod.filter(value => value);
+    return checkedResource.length !== 0 && checkedResource.length !== enabledDeliveryMethod.length;
+  }
+
   writeValue(value: NotificationUserSetting): void {
     if (isDefinedAndNotNull(value)) {
       this.notificationSettingsFormGroup.patchValue(value, {emitEvent: false});

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

@@ -50,7 +50,6 @@
               <div fxFlex *ngFor="let deliveryMethods of notificationDeliveryMethods">
                 <div fxFlex fxLayoutAlign="start center">
                   <mat-checkbox color="warn"
-                                [disabled]="!allowNotificationDeliveryMethods?.includes(deliveryMethods) || !getSomeChecked()"
                                 [checked]="getChecked(deliveryMethods)"
                                 (change)="changeInstanceTypeCheckBox($event.checked, deliveryMethods)"
                                 [indeterminate]="getIndeterminate(deliveryMethods)"
@@ -63,8 +62,7 @@
             <mat-divider></mat-divider>
             <div *ngFor="let settingsControl of notificationSettingsFormArray.controls; let i = index; let $last = last;">
               <tb-notification-setting-form [formControl]="settingsControl"
-                                            [deliveryMethods]="notificationDeliveryMethods"
+                                            [deliveryMethods]="notificationDeliveryMethods">
-                                            [allowDeliveryMethods]="allowNotificationDeliveryMethods">
               </tb-notification-setting-form>
               <mat-divider *ngIf="!$last"></mat-divider>
             </div>

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

@@ -43,7 +43,10 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
   notificationDeliveryMethods: NotificationDeliveryMethod[];
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
 
-  allowNotificationDeliveryMethods: Array<NotificationDeliveryMethod>;
+  private deliveryMethods = new Set([
+    NotificationDeliveryMethod.SLACK,
+    NotificationDeliveryMethod.MICROSOFT_TEAMS
+  ]);
 
   constructor(protected store: Store<AppState>,
               private route: ActivatedRoute,
@@ -52,25 +55,15 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
               private notificationService: NotificationService,
               private fb: UntypedFormBuilder,) {
     super(store);
+    this.notificationService.getAvailableDeliveryMethods({ignoreLoading: true}).subscribe(
+      allowMethods => {
+        this.notificationDeliveryMethods = allowMethods.filter(value => !this.deliveryMethods.has(value));
+        this.patchNotificationSettings(this.route.snapshot.data.userSettings);
+      });
   }
 
   ngOnInit() {
-    this.notificationDeliveryMethods = this.getNotificationDeliveryMethods();
-
-    this.notificationService.getAvailableDeliveryMethods({ignoreLoading: true}).subscribe(allowMethods => {
-      this.allowNotificationDeliveryMethods = allowMethods;
-    });
-
     this.buildNotificationSettingsForm();
-    this.patchNotificationSettings(this.route.snapshot.data.userSettings);
-  }
-
-  private getNotificationDeliveryMethods(): NotificationDeliveryMethod[] {
-    const deliveryMethods = new Set([
-      NotificationDeliveryMethod.SLACK,
-      NotificationDeliveryMethod.MICROSOFT_TEAMS
-    ]);
-    return Object.values(NotificationDeliveryMethod).filter(type => !deliveryMethods.has(type));
   }
 
   private buildNotificationSettingsForm() {
@@ -158,9 +151,13 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
     if (isDefinedAndNotNull(deliveryMethod)) {
       type.forEach(notificationType => notificationType.enabledDeliveryMethods[deliveryMethod] = value);
     } else {
-      type.forEach(notificationType => notificationType.enabled = value);
+      type.forEach(notificationType => {
+        notificationType.enabled = value;
+        notificationType.enabledDeliveryMethods =
+          Object.keys(notificationType.enabledDeliveryMethods).reduce((a, v) => ({ ...a, [v]: value}), {});
+      });
     }
-    this.notificationSettings.get('prefs').patchValue(type);
+    this.notificationSettings.get('prefs').patchValue(type, {emitEvent: false});
     this.notificationSettings.markAsDirty();
   };