UI: Refactoring

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

@@ -27,7 +27,7 @@
         </span>
       </mat-checkbox>
     </div>
-    <div fxFlex fxLayout="row" *ngFor="let deliveryMethods of notificationDeliveryMethodMap">
+    <div fxFlex fxLayout="row" *ngFor="let deliveryMethods of deliveryMethods">
       <div fxFlex fxLayoutAlign="start center">
         <mat-checkbox color="primary"
                       [disabled]="!allowDeliveryMethods?.includes(deliveryMethods) || !notificationSettingsFormGroup.get('enabled').value"

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

@@ -20,7 +20,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { isDefinedAndNotNull } from '@core/utils';
 import { Subscription } from 'rxjs';
 import {
-  NotificationDeliveryMethod, NotificationSettingsDeliveryMethod,
+  NotificationDeliveryMethod,
   NotificationTemplateTypeTranslateMap,
   NotificationUserSetting
 } from '@shared/models/notification.models';
@@ -43,12 +43,13 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   disabled: boolean;
 
   @Input()
-  allowDeliveryMethods = [];
+  deliveryMethods: NotificationDeliveryMethod[] = [];
+
+  @Input()
+  allowDeliveryMethods: NotificationDeliveryMethod[] = [];
 
   notificationSettingsFormGroup: UntypedFormGroup;
 
-  notificationDeliveryMethod = NotificationSettingsDeliveryMethod;
-  notificationDeliveryMethodMap = Object.values(NotificationSettingsDeliveryMethod);
   notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap;
 
   private propagateChange = null;
@@ -68,7 +69,7 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
 
   ngOnInit() {
     const deliveryMethod = {};
-    this.notificationDeliveryMethodMap.forEach(value => {
+    this.deliveryMethods.forEach(value => {
       deliveryMethod[value] = true;
     });
     this.notificationSettingsFormGroup = this.fb.group(

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

@@ -62,7 +62,10 @@
             </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>

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

@@ -25,7 +25,7 @@ import { ActivatedRoute } from '@angular/router';
 import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import {
   NotificationDeliveryMethod,
-  NotificationDeliveryMethodTranslateMap, NotificationSettingsDeliveryMethod,
+  NotificationDeliveryMethodTranslateMap,
   NotificationUserSettings
 } from '@shared/models/notification.models';
 import { NotificationService } from '@core/http/notification.service';
@@ -40,7 +40,7 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
 
   notificationSettings: UntypedFormGroup;
 
-  notificationDeliveryMethods = Object.values(NotificationSettingsDeliveryMethod);
+  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,15 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
     this.patchNotificationSettings(this.route.snapshot.data.userSettings);
   }
 
+  private getNotificationDeliveryMethods(): NotificationDeliveryMethod[] {
+    const deliveryMethods = new Set([
+      NotificationDeliveryMethod.WEB,
+      NotificationDeliveryMethod.SMS,
+      NotificationDeliveryMethod.EMAIL
+    ]);
+    return Object.values(NotificationDeliveryMethod).filter(type => deliveryMethods.has(type));
+  }
+
   private buildNotificationSettingsForm() {
     this.notificationSettings = this.fb.group({
       prefs: this.fb.array([])
@@ -77,8 +87,8 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
       preparedSettings = this.prepareNotificationSettings(settings.prefs);
       preparedSettings.forEach((setting) => {
         setting.enabledDeliveryMethods = Object.assign(
-          setting.enabledDeliveryMethods,
-          this.notificationDeliveryMethods.reduce((a, v) => ({ ...a, [v]: true}), {})
+          this.notificationDeliveryMethods.reduce((a, v) => ({ ...a, [v]: true}), {}),
+          setting.enabledDeliveryMethods
         );
         notificationSettingsControls.push(this.fb.control(setting, [Validators.required]));
       });

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

@@ -598,9 +598,3 @@ export interface NotificationUserSetting {
   enabled: boolean;
   enabledDeliveryMethods: {[key: string]: boolean};
 }
-
-export enum NotificationSettingsDeliveryMethod {
-  WEB = 'WEB',
-  SMS = 'SMS',
-  EMAIL = 'EMAIL'
-}