From a3d6ade05d3420df12880cdbf89b4f83ad77b312 Mon Sep 17 00:00:00 2001 From: Chi Nguyen <6671583+cnguyen-de@users.noreply.github.com> Date: Mon, 1 Nov 2021 09:56:47 +0100 Subject: [PATCH] improve settings module code (#1748) --- .../components/canvas/canvas.component.ts | 16 +++++----- .../task-priority-report.component.ts | 18 ++++++------ .../components/Settings/expected-members.ts | 18 ++++++------ .../Settings/settings.component.html | 29 +++++++------------ .../Settings/settings.component.scss | 8 ++++- .../Settings/settings.validators.ts | 10 +++---- web/src/app/settings/models/group-setting.ts | 6 ++++ .../app/settings/models/settings-member.ts | 7 +++++ .../models/settings-representation.ts | 5 ++++ web/src/app/settings/models/settings.ts | 22 ++++---------- .../app/settings/services/settings-service.ts | 5 +--- .../app/settings/settings-routing.module.ts | 9 ------ 12 files changed, 72 insertions(+), 81 deletions(-) create mode 100644 web/src/app/settings/models/group-setting.ts create mode 100644 web/src/app/settings/models/settings-member.ts create mode 100644 web/src/app/settings/models/settings-representation.ts diff --git a/web/src/app/monitor/components/canvas/canvas.component.ts b/web/src/app/monitor/components/canvas/canvas.component.ts index 323039656..484bd2f79 100644 --- a/web/src/app/monitor/components/canvas/canvas.component.ts +++ b/web/src/app/monitor/components/canvas/canvas.component.ts @@ -21,8 +21,7 @@ export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy { colors: string[]; destroy$ = new Subject(); - @Select(SettingsSelectors.getSettings) - settings$: Observable; + @Select(SettingsSelectors.getSettings) settings$: Observable; ngOnInit() { this.settings$.pipe(takeUntil(this.destroy$)).subscribe((settings) => { @@ -32,14 +31,14 @@ export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy { setValuesFromSettings(settings: Settings) { this.labels = [ - settings[SettingMembers.nameHighPriority], - settings[SettingMembers.nameMediumPriority], - settings[SettingMembers.nameLowPriority] + settings[SettingMembers.NameHighPriority], + settings[SettingMembers.NameMediumPriority], + settings[SettingMembers.NameLowPriority] ]; this.colors = [ - settings[SettingMembers.colorHighPriority], - settings[SettingMembers.colorMediumPriority], - settings[SettingMembers.colorLowPriority] + settings[SettingMembers.ColorHighPriority], + settings[SettingMembers.ColorMediumPriority], + settings[SettingMembers.ColorLowPriority] ]; } @@ -80,7 +79,6 @@ export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy { ngOnDestroy() { document.getElementById(this.id).outerHTML = ''; // destroy HTML element - this.destroy$.next(); this.destroy$.complete(); } diff --git a/web/src/app/monitor/components/task-priority-report/task-priority-report.component.ts b/web/src/app/monitor/components/task-priority-report/task-priority-report.component.ts index 62c6a0197..838fd3434 100644 --- a/web/src/app/monitor/components/task-priority-report/task-priority-report.component.ts +++ b/web/src/app/monitor/components/task-priority-report/task-priority-report.component.ts @@ -44,9 +44,9 @@ export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, On this.setValuesFromSettings(settings); // the order must be high, medium, low because the canvas component defines its labels in this order this.priority = [ - settings[SettingMembers.intervalHighPriority], - settings[SettingMembers.intervalMediumPriority], - settings[SettingMembers.intervalLowPriority] + settings[SettingMembers.IntervalHighPriority], + settings[SettingMembers.IntervalMediumPriority], + settings[SettingMembers.IntervalLowPriority] ].map((arr) => ({ lowerBound: arr[0], upperBound: arr[1] })); return this.monitorService.getTasksByPriorityReport([WorkbasketType.TOPIC], this.priority); }) @@ -67,12 +67,12 @@ export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, On } setValuesFromSettings(settings: Settings) { - this.nameHighPriority = settings[SettingMembers.nameHighPriority]; - this.nameMediumPriority = settings[SettingMembers.nameMediumPriority]; - this.nameLowPriority = settings[SettingMembers.nameLowPriority]; - this.colorHighPriority = settings[SettingMembers.colorHighPriority]; - this.colorMediumPriority = settings[SettingMembers.colorMediumPriority]; - this.colorLowPriority = settings[SettingMembers.colorLowPriority]; + this.nameHighPriority = settings[SettingMembers.NameHighPriority]; + this.nameMediumPriority = settings[SettingMembers.NameMediumPriority]; + this.nameLowPriority = settings[SettingMembers.NameLowPriority]; + this.colorHighPriority = settings[SettingMembers.ColorHighPriority]; + this.colorMediumPriority = settings[SettingMembers.ColorMediumPriority]; + this.colorLowPriority = settings[SettingMembers.ColorLowPriority]; } setValuesFromReportData(reportData) { diff --git a/web/src/app/settings/components/Settings/expected-members.ts b/web/src/app/settings/components/Settings/expected-members.ts index ef85b3a79..7a52bac71 100644 --- a/web/src/app/settings/components/Settings/expected-members.ts +++ b/web/src/app/settings/components/Settings/expected-members.ts @@ -1,11 +1,11 @@ export enum SettingMembers { - nameHighPriority = 'nameHighPriority', - nameMediumPriority = 'nameMediumPriority', - nameLowPriority = 'nameLowPriority', - colorHighPriority = 'colorHighPriority', - colorMediumPriority = 'colorMediumPriority', - colorLowPriority = 'colorLowPriority', - intervalHighPriority = 'intervalHighPriority', - intervalMediumPriority = 'intervalMediumPriority', - intervalLowPriority = 'intervalLowPriority' + NameHighPriority = 'nameHighPriority', + NameMediumPriority = 'nameMediumPriority', + NameLowPriority = 'nameLowPriority', + ColorHighPriority = 'colorHighPriority', + ColorMediumPriority = 'colorMediumPriority', + ColorLowPriority = 'colorLowPriority', + IntervalHighPriority = 'intervalHighPriority', + IntervalMediumPriority = 'intervalMediumPriority', + IntervalLowPriority = 'intervalLowPriority' } diff --git a/web/src/app/settings/components/Settings/settings.component.html b/web/src/app/settings/components/Settings/settings.component.html index e92cf276c..0934fb06c 100644 --- a/web/src/app/settings/components/Settings/settings.component.html +++ b/web/src/app/settings/components/Settings/settings.component.html @@ -2,28 +2,25 @@
- -
- -
+

{{group.displayName}}

-
- {{member.displayName}} +
+
{{member.displayName}}
{{member.displayName}} -
- {{member.displayName}} +
+
{{member.displayName}}
Lower boundary @@ -54,17 +51,17 @@ -
- {{member.displayName}} +
{{member.displayName}}
-
- {{member.displayName}} +
+
{{member.displayName}}
{{member.displayName}} @@ -76,12 +73,8 @@ placeholder="{{member.displayName}}">
-
-
- -
diff --git a/web/src/app/settings/components/Settings/settings.component.scss b/web/src/app/settings/components/Settings/settings.component.scss index 8d3cf783b..e59d72541 100644 --- a/web/src/app/settings/components/Settings/settings.component.scss +++ b/web/src/app/settings/components/Settings/settings.component.scss @@ -1,7 +1,7 @@ @import 'src/theme/_colors.scss'; .settings { - padding: 8px; + padding: 8px 32px; &__content { height: calc(100vh - 116px); @@ -40,6 +40,12 @@ grid-template-columns: 300px 1fr 1fr; } + &__text { + display: flex; + align-items: center; + font-size: 18px; + } + &__grid--center { align-self: center; } diff --git a/web/src/app/settings/components/Settings/settings.validators.ts b/web/src/app/settings/components/Settings/settings.validators.ts index cbe868877..005f537b2 100644 --- a/web/src/app/settings/components/Settings/settings.validators.ts +++ b/web/src/app/settings/components/Settings/settings.validators.ts @@ -7,15 +7,15 @@ export const validateSettings = (settings: Settings): string[] => { for (let member of group.members) { const value = settings[member.key]; - if (member.type == SettingTypes.TEXT || member.type == SettingTypes.INTERVAL) { + if (member.type == SettingTypes.Text || member.type == SettingTypes.Interval) { let compareWithMin; let compareWithMax; switch (member.type) { - case SettingTypes.TEXT: + case SettingTypes.Text: compareWithMin = value.length; compareWithMax = value.length; break; - case SettingTypes.INTERVAL: + case SettingTypes.Interval: compareWithMin = value[0]; compareWithMax = value[1]; break; @@ -34,12 +34,12 @@ export const validateSettings = (settings: Settings): string[] => { invalidMembers.push(member.key); } - if (member.type == SettingTypes.INTERVAL && compareWithMin > compareWithMax) { + if (member.type == SettingTypes.Interval && compareWithMin > compareWithMax) { invalidMembers.push(member.key); } } - if (member.type == SettingTypes.JSON) { + if (member.type == SettingTypes.Json) { try { JSON.parse(value); } catch { diff --git a/web/src/app/settings/models/group-setting.ts b/web/src/app/settings/models/group-setting.ts new file mode 100644 index 000000000..5a057960e --- /dev/null +++ b/web/src/app/settings/models/group-setting.ts @@ -0,0 +1,6 @@ +import { SettingsMember } from './settings-member'; + +export interface GroupSetting { + displayName: string; + members: SettingsMember[]; +} diff --git a/web/src/app/settings/models/settings-member.ts b/web/src/app/settings/models/settings-member.ts new file mode 100644 index 000000000..613760e9c --- /dev/null +++ b/web/src/app/settings/models/settings-member.ts @@ -0,0 +1,7 @@ +export interface SettingsMember { + displayName: string; + key: string; + type: string; + min?: number; + max?: number; +} diff --git a/web/src/app/settings/models/settings-representation.ts b/web/src/app/settings/models/settings-representation.ts new file mode 100644 index 000000000..3871a1a73 --- /dev/null +++ b/web/src/app/settings/models/settings-representation.ts @@ -0,0 +1,5 @@ +import { Settings } from './settings'; + +export interface SettingsRepresentation { + customAttributes: Settings; +} diff --git a/web/src/app/settings/models/settings.ts b/web/src/app/settings/models/settings.ts index 5ed69d49b..fe3a0ab6c 100644 --- a/web/src/app/settings/models/settings.ts +++ b/web/src/app/settings/models/settings.ts @@ -1,25 +1,13 @@ -export interface SettingsMember { - displayName: string; - key: string; - type: string; - min?: number; - max?: number; -} - -export interface GroupSetting { - displayName: string; - members: SettingsMember[]; -} +import { GroupSetting } from './group-setting'; export interface Settings { schema: GroupSetting[]; - [setting: string]: any; } export enum SettingTypes { - TEXT = 'text', - INTERVAL = 'interval', - COLOR = 'color', - JSON = 'json' + Text = 'text', + Interval = 'interval', + Color = 'color', + Json = 'json' } diff --git a/web/src/app/settings/services/settings-service.ts b/web/src/app/settings/services/settings-service.ts index 0b467bf1d..718ca3732 100644 --- a/web/src/app/settings/services/settings-service.ts +++ b/web/src/app/settings/services/settings-service.ts @@ -4,6 +4,7 @@ import { Settings } from '../models/settings'; import { environment } from '../../../environments/environment'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import { SettingsRepresentation } from '../models/settings-representation'; @Injectable({ providedIn: 'root' @@ -25,7 +26,3 @@ export class SettingsService { }); } } - -interface SettingsRepresentation { - customAttributes: Settings; -} diff --git a/web/src/app/settings/settings-routing.module.ts b/web/src/app/settings/settings-routing.module.ts index 23862b7f7..915ff3f8c 100644 --- a/web/src/app/settings/settings-routing.module.ts +++ b/web/src/app/settings/settings-routing.module.ts @@ -6,15 +6,6 @@ const routes: Routes = [ { path: '', component: SettingsComponent - }, - { - path: '', - redirectTo: '', - pathMatch: 'full' - }, - { - path: '**', - redirectTo: '' } ];