Refactor config

src/app/layout/config/app.config.component.ts

@@ -1,23 +1,24 @@
 import { Component, Input } from '@angular/core';
-import { LayoutService } from "../service/app.layout.service";
-import { MenuService } from "../app.menu.service";
+import { LayoutService } from '../service/app.layout.service';
+import { MenuService } from '../app.menu.service';
 
 @Component({
     selector: 'app-config',
-    templateUrl: './app.config.component.html'
+    templateUrl: './app.config.component.html',
 })
 export class AppConfigComponent {
-
     @Input() minimal: boolean = false;
 
     scales: number[] = [12, 13, 14, 15, 16];
 
-    constructor(public layoutService: LayoutService, public menuService: MenuService) { }
+    constructor(
+        public layoutService: LayoutService,
+        public menuService: MenuService
+    ) {}
 
     get visible(): boolean {
         return this.layoutService.state.configSidebarVisible;
     }
-
     set visible(_val: boolean) {
         this.layoutService.state.configSidebarVisible = _val;
     }
@@ -25,7 +26,6 @@ export class AppConfigComponent {
     get scale(): number {
         return this.layoutService.config().scale;
     }
-
     set scale(_val: number) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -36,7 +36,6 @@ export class AppConfigComponent {
     get menuMode(): string {
         return this.layoutService.config().menuMode;
     }
-
     set menuMode(_val: string) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -47,7 +46,6 @@ export class AppConfigComponent {
     get inputStyle(): string {
         return this.layoutService.config().inputStyle;
     }
-
     set inputStyle(_val: string) {
         this.layoutService.config().inputStyle = _val;
     }
@@ -55,7 +53,6 @@ export class AppConfigComponent {
     get ripple(): boolean {
         return this.layoutService.config().ripple;
     }
-
     set ripple(_val: boolean) {
         this.layoutService.config.update((config) => ({
             ...config,
@@ -63,29 +60,40 @@ export class AppConfigComponent {
         }));
     }
 
+    set theme(val: string) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            theme: val,
+        }));
+    }
+    get theme(): string {
+        return this.layoutService.config().theme;
+    }
+
+    set colorScheme(val: string) {
+        this.layoutService.config.update((config) => ({
+            ...config,
+            colorScheme: val,
+        }));
+    }
+    get colorScheme(): string {
+        return this.layoutService.config().colorScheme;
+    }
+
     onConfigButtonClick() {
         this.layoutService.showConfigSidebar();
     }
 
     changeTheme(theme: string, colorScheme: string) {
-        this.layoutService.config.update((config) => ({ ...config, theme:theme,colorScheme:colorScheme }));
+        this.theme = theme;
+        this.colorScheme = colorScheme;
     }
 
-
     decrementScale() {
         this.scale--;
-        this.applyScale();
     }
 
     incrementScale() {
         this.scale++;
-        this.applyScale();
-    }
-
-    applyScale() {
-        this.layoutService.config.update((config) => ({
-            ...config,
-            scale: this.scale,
-        }));
     }
 }