UI: Refactoring

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,
+  NotificationDeliveryMethod, NotificationSettingsDeliveryMethod,
   NotificationTemplateTypeTranslateMap,
   NotificationUserSetting
 } from '@shared/models/notification.models';
@@ -47,8 +47,8 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
 
   notificationSettingsFormGroup: UntypedFormGroup;
 
-  notificationDeliveryMethod = NotificationDeliveryMethod;
-  notificationDeliveryMethodMap = [NotificationDeliveryMethod.WEB, NotificationDeliveryMethod.SMS, NotificationDeliveryMethod.EMAIL];
+  notificationDeliveryMethod = NotificationSettingsDeliveryMethod;
+  notificationDeliveryMethodMap = Object.values(NotificationSettingsDeliveryMethod);
   notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap;
 
   private propagateChange = null;
@@ -67,11 +67,17 @@ export class NotificationSettingFormComponent implements ControlValueAccessor, O
   }
 
   ngOnInit() {
+    const deliveryMethod = {};
+    this.notificationDeliveryMethodMap.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 +105,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;
-    if (enabledDeliveryMethods.includes(deliveryMethod)) {
-      enabledDeliveryMethods.splice(enabledDeliveryMethods.indexOf(deliveryMethod), 1);
-    } else {
-      enabledDeliveryMethods.push(deliveryMethod);
-    }
-    this.notificationSettingsFormGroup.get('enabledDeliveryMethods').patchValue(enabledDeliveryMethods);
+    this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod)
+      .patchValue(!this.notificationSettingsFormGroup.get('enabledDeliveryMethods').get(deliveryMethod).value);
   }
 
   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">
@@ -68,14 +68,14 @@
           </div>
         </section>
       </form>
-      <div fxLayout="row" fxLayoutAlign="end start">
-        <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-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

@@ -17,11 +17,6 @@
 
 :host {
   .mat-mdc-card.settings-card {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     margin: 8px;
     @media #{$mat-gt-sm} {
       width: 60%;
@@ -30,10 +25,9 @@
       margin: 0;
     }
     .notification-form {
-      height: calc(100% - 48px);
+      height: 100%;
       min-height: min-content;
       max-height: min-content;
-      margin-bottom: 16px;
     }
     .notification-section {
       height: 100%;

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,
+  NotificationDeliveryMethodTranslateMap, NotificationSettingsDeliveryMethod,
   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 = [NotificationDeliveryMethod.WEB, NotificationDeliveryMethod.SMS, NotificationDeliveryMethod.EMAIL];
+  notificationDeliveryMethods = Object.values(NotificationSettingsDeliveryMethod);
   notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
 
   allowNotificationDeliveryMethods: Array<NotificationDeliveryMethod>;
@@ -76,6 +76,10 @@ export class NotificationSettingsComponent extends PageComponent implements OnIn
     if (settings.prefs) {
       preparedSettings = this.prepareNotificationSettings(settings.prefs);
       preparedSettings.forEach((setting) => {
+        setting.enabledDeliveryMethods = Object.assign(
+          setting.enabledDeliveryMethods,
+          this.notificationDeliveryMethods.reduce((a, v) => ({ ...a, [v]: true}), {})
+        );
         notificationSettingsControls.push(this.fb.control(setting, [Validators.required]));
       });
     }
@@ -105,7 +109,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 +123,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 +137,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 +147,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 => {
-        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);
-        }
-      });
+      type.forEach(notificationType => notificationType.enabledDeliveryMethods[deliveryMethod] = value);
     } else {
       type.forEach(notificationType => notificationType.enabled = value);
     }

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

@@ -596,6 +596,11 @@ export interface NotificationUserSettings {
 
 export interface NotificationUserSetting {
   enabled: boolean;
-  enabledDeliveryMethods: Array<NotificationDeliveryMethod>;
+  enabledDeliveryMethods: {[key: string]: boolean};
 }
 
+export enum NotificationSettingsDeliveryMethod {
+  WEB = 'WEB',
+  SMS = 'SMS',
+  EMAIL = 'EMAIL'
+}