nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve settings module code (#1748)

This commit is contained in:
Chi Nguyen 2021-11-01 09:56:47 +01:00 committed by GitHub
parent 6124db01ad
commit a3d6ade05d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 72 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/app/monitor/components/canvas/canvas.component.ts
View File

@ -21,8 +21,7 @@ export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy {
colors: string[]; colors: string[];
destroy$ = new Subject<void>(); destroy$ = new Subject<void>();
@Select(SettingsSelectors.getSettings) @Select(SettingsSelectors.getSettings) settings$: Observable<Settings>;
settings$: Observable<Settings>;
ngOnInit() { ngOnInit() {
this.settings$.pipe(takeUntil(this.destroy$)).subscribe((settings) => { this.settings$.pipe(takeUntil(this.destroy$)).subscribe((settings) => {
@ -32,14 +31,14 @@ export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy {
setValuesFromSettings(settings: Settings) { setValuesFromSettings(settings: Settings) {
this.labels = [ this.labels = [
settings[SettingMembers.nameHighPriority], settings[SettingMembers.NameHighPriority],
settings[SettingMembers.nameMediumPriority], settings[SettingMembers.NameMediumPriority],
settings[SettingMembers.nameLowPriority] settings[SettingMembers.NameLowPriority]
]; ];
this.colors = [ this.colors = [
settings[SettingMembers.colorHighPriority], settings[SettingMembers.ColorHighPriority],
settings[SettingMembers.colorMediumPriority], settings[SettingMembers.ColorMediumPriority],
settings[SettingMembers.colorLowPriority] settings[SettingMembers.ColorLowPriority]
]; ];
} }
@ -80,7 +79,6 @@ export class CanvasComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
document.getElementById(this.id).outerHTML = ''; // destroy HTML element document.getElementById(this.id).outerHTML = ''; // destroy HTML element
this.destroy$.next(); this.destroy$.next();
this.destroy$.complete(); this.destroy$.complete();
} }

18
web/src/app/monitor/components/task-priority-report/task-priority-report.component.ts
View File

@ -44,9 +44,9 @@ export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, On
this.setValuesFromSettings(settings); this.setValuesFromSettings(settings);
// the order must be high, medium, low because the canvas component defines its labels in this order // the order must be high, medium, low because the canvas component defines its labels in this order
this.priority = [ this.priority = [
settings[SettingMembers.intervalHighPriority], settings[SettingMembers.IntervalHighPriority],
settings[SettingMembers.intervalMediumPriority], settings[SettingMembers.IntervalMediumPriority],
settings[SettingMembers.intervalLowPriority] settings[SettingMembers.IntervalLowPriority]
].map((arr) => ({ lowerBound: arr[0], upperBound: arr[1] })); ].map((arr) => ({ lowerBound: arr[0], upperBound: arr[1] }));
return this.monitorService.getTasksByPriorityReport([WorkbasketType.TOPIC], this.priority); return this.monitorService.getTasksByPriorityReport([WorkbasketType.TOPIC], this.priority);
}) })
@ -67,12 +67,12 @@ export class TaskPriorityReportComponent implements OnInit, AfterViewChecked, On
} }
setValuesFromSettings(settings: Settings) { setValuesFromSettings(settings: Settings) {
this.nameHighPriority = settings[SettingMembers.nameHighPriority]; this.nameHighPriority = settings[SettingMembers.NameHighPriority];
this.nameMediumPriority = settings[SettingMembers.nameMediumPriority]; this.nameMediumPriority = settings[SettingMembers.NameMediumPriority];
this.nameLowPriority = settings[SettingMembers.nameLowPriority]; this.nameLowPriority = settings[SettingMembers.NameLowPriority];
this.colorHighPriority = settings[SettingMembers.colorHighPriority]; this.colorHighPriority = settings[SettingMembers.ColorHighPriority];
this.colorMediumPriority = settings[SettingMembers.colorMediumPriority]; this.colorMediumPriority = settings[SettingMembers.ColorMediumPriority];
this.colorLowPriority = settings[SettingMembers.colorLowPriority]; this.colorLowPriority = settings[SettingMembers.ColorLowPriority];
} }
setValuesFromReportData(reportData) { setValuesFromReportData(reportData) {

18
web/src/app/settings/components/Settings/expected-members.ts
View File

@ -1,11 +1,11 @@
export enum SettingMembers { export enum SettingMembers {
nameHighPriority = 'nameHighPriority', NameHighPriority = 'nameHighPriority',
nameMediumPriority = 'nameMediumPriority', NameMediumPriority = 'nameMediumPriority',
nameLowPriority = 'nameLowPriority', NameLowPriority = 'nameLowPriority',
colorHighPriority = 'colorHighPriority', ColorHighPriority = 'colorHighPriority',
colorMediumPriority = 'colorMediumPriority', ColorMediumPriority = 'colorMediumPriority',
colorLowPriority = 'colorLowPriority', ColorLowPriority = 'colorLowPriority',
intervalHighPriority = 'intervalHighPriority', IntervalHighPriority = 'intervalHighPriority',
intervalMediumPriority = 'intervalMediumPriority', IntervalMediumPriority = 'intervalMediumPriority',
intervalLowPriority = 'intervalLowPriority' IntervalLowPriority = 'intervalLowPriority'
} }

29
web/src/app/settings/components/Settings/settings.component.html
View File

@ -2,28 +2,25 @@
<!-- BUTTONS --> <!-- BUTTONS -->
<div class="settings__buttons"> <div class="settings__buttons">
<button (click)="onSave()" class="settings__button--primary" mat-button <button class="settings__button--primary" mat-button matTooltip="Save settings" (click)="onSave()">
matTooltip="Save settings">
Save Save
<mat-icon class="md-20">save</mat-icon> <mat-icon class="md-20">save</mat-icon>
</button> </button>
<button (click)="onReset()" class="settings__button--secondary" mat-stroked-button <button class="settings__button--secondary" mat-stroked-button matTooltip="Revert changes" (click)="onReset()">
matTooltip="Revert changes">
Undo changes Undo changes
<mat-icon class="settings__icon md-20">restore</mat-icon> <mat-icon class="settings__icon md-20">restore</mat-icon>
</button> </button>
</div> </div>
<div class="settings__content"> <div class="settings__content">
<div *ngFor="let group of settings.schema">
<div *ngFor="let group of settings.schema; let outerIndex = index">
<h4 class="settings__domain-name"> {{group.displayName}} </h4> <h4 class="settings__domain-name"> {{group.displayName}} </h4>
<div *ngFor="let member of group.members"> <div *ngFor="let member of group.members">
<!-- STRING --> <!-- STRING -->
<div *ngIf="member.type == settingTypes.TEXT" class="settings__grid"> <div *ngIf="member.type == settingTypes.Text" class="settings__grid">
<span> {{member.displayName}} </span> <div class="settings__text"> {{member.displayName}} </div>
<mat-form-field appearance="outline" class="settings__grid--two-columns"> <mat-form-field appearance="outline" class="settings__grid--two-columns">
<mat-label class="{{member.key}}">{{member.displayName}}</mat-label> <mat-label class="{{member.key}}">{{member.displayName}}</mat-label>
<input [(ngModel)]="settings[member.key]" matInput maxlength="{{member.max}}" <input [(ngModel)]="settings[member.key]" matInput maxlength="{{member.max}}"
@ -34,8 +31,8 @@
</div> </div>
<!-- INTERVAL --> <!-- INTERVAL -->
<div *ngIf="member.type == settingTypes.INTERVAL" class="settings__grid"> <div *ngIf="member.type == settingTypes.Interval" class="settings__grid">
<span>{{member.displayName}}</span> <div class="settings__text">{{member.displayName}}</div>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label class="{{member.key}}">Lower boundary</mat-label> <mat-label class="{{member.key}}">Lower boundary</mat-label>
@ -54,17 +51,17 @@
<!-- COLOR --> <!-- COLOR -->
<div *ngIf="member.type == settingTypes.COLOR" <div *ngIf="member.type == settingTypes.Color"
class="settings__grid settings__color"> class="settings__grid settings__color">
<span>{{member.displayName}}</span> <div class="settings__text">{{member.displayName}}</div>
<input (change)="onColorChange(member.key)" class="settings__colors--input" <input (change)="onColorChange(member.key)" class="settings__colors--input"
id="{{member.key}}" matInput id="{{member.key}}" matInput
type="color" value="{{settings[member.key]}}"> type="color" value="{{settings[member.key]}}">
</div> </div>
<!-- JSON --> <!-- JSON -->
<div *ngIf="member.type == settingTypes.JSON" class="settings__grid"> <div *ngIf="member.type == settingTypes.Json" class="settings__grid">
<span>{{member.displayName}}</span> <div class="settings__text">{{member.displayName}}</div>
<mat-form-field appearance="outline" class="settings__grid--two-columns"> <mat-form-field appearance="outline" class="settings__grid--two-columns">
<mat-label class="{{member.key}}"> <mat-label class="{{member.key}}">
{{member.displayName}} {{member.displayName}}
@ -76,12 +73,8 @@
placeholder="{{member.displayName}}"></textarea> placeholder="{{member.displayName}}"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<div class="settings__spacer"></div> <div class="settings__spacer"></div>
</div> </div>
</div> </div>
</div> </div>

8
web/src/app/settings/components/Settings/settings.component.scss
View File

@ -1,7 +1,7 @@
@import 'src/theme/_colors.scss'; @import 'src/theme/_colors.scss';
.settings { .settings {
padding: 8px; padding: 8px 32px;
&__content { &__content {
height: calc(100vh - 116px); height: calc(100vh - 116px);
@ -40,6 +40,12 @@
grid-template-columns: 300px 1fr 1fr; grid-template-columns: 300px 1fr 1fr;
} }
&__text {
display: flex;
align-items: center;
font-size: 18px;
}
&__grid--center { &__grid--center {
align-self: center; align-self: center;
} }

10
web/src/app/settings/components/Settings/settings.validators.ts
View File

@ -7,15 +7,15 @@ export const validateSettings = (settings: Settings): string[] => {
for (let member of group.members) { for (let member of group.members) {
const value = settings[member.key]; 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 compareWithMin;
let compareWithMax; let compareWithMax;
switch (member.type) { switch (member.type) {
case SettingTypes.TEXT: case SettingTypes.Text:
compareWithMin = value.length; compareWithMin = value.length;
compareWithMax = value.length; compareWithMax = value.length;
break; break;
case SettingTypes.INTERVAL: case SettingTypes.Interval:
compareWithMin = value[0]; compareWithMin = value[0];
compareWithMax = value[1]; compareWithMax = value[1];
break; break;
@ -34,12 +34,12 @@ export const validateSettings = (settings: Settings): string[] => {
invalidMembers.push(member.key); invalidMembers.push(member.key);
} }
if (member.type == SettingTypes.INTERVAL && compareWithMin > compareWithMax) { if (member.type == SettingTypes.Interval && compareWithMin > compareWithMax) {
invalidMembers.push(member.key); invalidMembers.push(member.key);
} }
} }
if (member.type == SettingTypes.JSON) { if (member.type == SettingTypes.Json) {
try { try {
JSON.parse(value); JSON.parse(value);
} catch { } catch {

6
web/src/app/settings/models/group-setting.ts Normal file
View File

@ -0,0 +1,6 @@
import { SettingsMember } from './settings-member';
export interface GroupSetting {
displayName: string;
members: SettingsMember[];
}

7
web/src/app/settings/models/settings-member.ts Normal file
View File

@ -0,0 +1,7 @@
export interface SettingsMember {
displayName: string;
key: string;
type: string;
min?: number;
max?: number;
}

5
web/src/app/settings/models/settings-representation.ts Normal file
View File

@ -0,0 +1,5 @@
import { Settings } from './settings';
export interface SettingsRepresentation {
customAttributes: Settings;
}

22
web/src/app/settings/models/settings.ts
View File

@ -1,25 +1,13 @@
export interface SettingsMember { import { GroupSetting } from './group-setting';
displayName: string;
key: string;
type: string;
min?: number;
max?: number;
}
export interface GroupSetting {
displayName: string;
members: SettingsMember[];
}
export interface Settings { export interface Settings {
schema: GroupSetting[]; schema: GroupSetting[];
[setting: string]: any; [setting: string]: any;
} }
export enum SettingTypes { export enum SettingTypes {
TEXT = 'text', Text = 'text',
INTERVAL = 'interval', Interval = 'interval',
COLOR = 'color', Color = 'color',
JSON = 'json' Json = 'json'
} }

5
web/src/app/settings/services/settings-service.ts
View File

@ -4,6 +4,7 @@ import { Settings } from '../models/settings';
import { environment } from '../../../environments/environment'; import { environment } from '../../../environments/environment';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { SettingsRepresentation } from '../models/settings-representation';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@ -25,7 +26,3 @@ export class SettingsService {
}); });
} }
} }
interface SettingsRepresentation {
customAttributes: Settings;
}

9
web/src/app/settings/settings-routing.module.ts
View File

@ -6,15 +6,6 @@ const routes: Routes = [
{ {
path: '', path: '',
component: SettingsComponent component: SettingsComponent
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
},
{
path: '**',
redirectTo: ''
} }
]; ];