From 23880ad07783177516644222d16c391b01744cf2 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 17 Jul 2023 12:40:15 +0300 Subject: [PATCH] UI: Refactoring --- .../notification-setting-form.component.ts | 25 ++++++++++--------- .../notification-settings.component.html | 18 ++++++------- .../notification-settings.component.scss | 8 +----- .../notification-settings.component.ts | 22 ++++++++-------- .../app/shared/models/notification.models.ts | 7 +++++- 5 files changed, 39 insertions(+), 41 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts index 9e8df2e107..0a96e1ed6a 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-setting-form.component.ts +++ b/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 { diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html index a3de925dd7..8f7a421a82 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.html @@ -16,7 +16,7 @@ -->
- +
@@ -68,14 +68,14 @@
-
- -
+
+ +
diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.scss b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.scss index fe8111afa0..a91c57ed65 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.scss +++ b/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%; diff --git a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.ts b/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.ts index afcc833754..8ca3eea97a 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/settings/notification-settings.component.ts +++ b/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; @@ -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); } diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts index 9ba1bca7c5..c6a3253f1a 100644 --- a/ui-ngx/src/app/shared/models/notification.models.ts +++ b/ui-ngx/src/app/shared/models/notification.models.ts @@ -596,6 +596,11 @@ export interface NotificationUserSettings { export interface NotificationUserSetting { enabled: boolean; - enabledDeliveryMethods: Array; + enabledDeliveryMethods: {[key: string]: boolean}; } +export enum NotificationSettingsDeliveryMethod { + WEB = 'WEB', + SMS = 'SMS', + EMAIL = 'EMAIL' +}