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[];
destroy$ = new Subject<void>();
@Select(SettingsSelectors.getSettings)
settings$: Observable<Settings>;
@Select(SettingsSelectors.getSettings) settings$: Observable<Settings>;
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();
}

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);
// 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) {

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

@ -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'
}

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

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

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) {
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 {

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 {
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'
}

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 { 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;
}

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

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