Change theme on the server.

Author: hikalkan

angular/src/app/layout/right-sidebar.component.ts

@@ -1,21 +1,13 @@
-import { Component, Injector, ViewEncapsulation } from '@angular/core';
+import { Component, Injector, ViewEncapsulation, OnInit } from '@angular/core';
 import { AppComponentBase } from '@shared/app-component-base';
-
-class UiThemeInfo {
-    constructor(
-        public name: string,
-        public cssClass: string
-    ) {
-        
-    }
-}
+import { ConfigurationServiceProxy, ChangeUiThemeInput } from '@shared/service-proxies/service-proxies';
 
 @Component({
     templateUrl: './right-sidebar.component.html',
     selector: 'right-sidebar',
     encapsulation: ViewEncapsulation.None
 })
-export class RightSideBarComponent extends AppComponentBase {
+export class RightSideBarComponent extends AppComponentBase implements OnInit {
 
     themes: UiThemeInfo[] = [
         new UiThemeInfo("Red", "red"),
@@ -43,19 +35,36 @@ export class RightSideBarComponent extends AppComponentBase {
     selectedThemeCssClass: string = "red";
 
     constructor(
-        injector: Injector
+        injector: Injector,
+        private _configurationService: ConfigurationServiceProxy
     ) {
         super(injector);
     }
 
+    ngOnInit(): void {
+        this.selectedThemeCssClass = this.setting.get('App.UiTheme');
+        $('body').addClass('theme-' + this.selectedThemeCssClass);
+    }
+
     setTheme(theme: UiThemeInfo): void {
-        const $body = $('body');
+        const input = new ChangeUiThemeInput();
+        input.theme = theme.cssClass;
+        this._configurationService.changeUiTheme(input).subscribe(() => {
+            const $body = $('body');
 
-        $('.right-sidebar .demo-choose-skin li').removeClass('active');
-        $body.removeClass('theme-' + this.selectedThemeCssClass);
-        $('.right-sidebar .demo-choose-skin li div.' + theme.cssClass).closest('li').addClass('active');
-        $body.addClass('theme-' + theme.cssClass);
+            $('.right-sidebar .demo-choose-skin li').removeClass('active');
+            $body.removeClass('theme-' + this.selectedThemeCssClass);
+            $('.right-sidebar .demo-choose-skin li div.' + theme.cssClass).closest('li').addClass('active');
+            $body.addClass('theme-' + theme.cssClass);
 
-        this.selectedThemeCssClass = theme.cssClass;
+            this.selectedThemeCssClass = theme.cssClass;
+        });
     }
+}
+
+class UiThemeInfo {
+    constructor(
+        public name: string,
+        public cssClass: string
+    ) { }
 }

angular/src/shared/service-proxies/service-proxies.ts

@@ -121,6 +121,66 @@ export class AccountServiceProxy {
     }
 }
 
+@Injectable()
+export class ConfigurationServiceProxy {
+    private http: Http = null; 
+    private baseUrl: string = undefined; 
+    protected jsonParseReviver: (key: string, value: any) => any = undefined;
+
+    constructor(@Inject(Http) http: Http, @Optional() @Inject(API_BASE_URL) baseUrl?: string) {
+        this.http = http; 
+        this.baseUrl = baseUrl ? baseUrl : ""; 
+    }
+
+    /**
+     * @return Success
+     */
+    changeUiTheme(input: ChangeUiThemeInput): Observable<void> {
+        let url_ = this.baseUrl + "/api/services/app/Configuration/ChangeUiTheme";
+
+        const content_ = JSON.stringify(input ? input.toJS() : null);
+        
+        return this.http.request(url_, {
+            body: content_,
+            method: "post",
+            headers: new Headers({
+                "Content-Type": "application/json; charset=UTF-8", 
+				"Accept": "application/json; charset=UTF-8"
+            })
+        }).map((response) => {
+            return this.processChangeUiTheme(response);
+        }).catch((response: any, caught: any) => {
+            if (response instanceof Response) {
+                try {
+                    return Observable.of(this.processChangeUiTheme(response));
+                } catch (e) {
+                    return <Observable<void>><any>Observable.throw(e);
+                }
+            } else
+                return <Observable<void>><any>Observable.throw(response);
+        });
+    }
+
+    protected processChangeUiTheme(response: Response): void {
+        const responseText = response.text();
+        const status = response.status; 
+
+        if (status === 200) {
+            return null;
+        } else if (status !== 200 && status !== 204) {
+            this.throwException("An unexpected server error occurred.", status, responseText);
+        }
+        return null;
+    }
+
+    protected throwException(message: string, status: number, response: string, result?: any): any {
+        if(result !== null && result !== undefined)
+            throw result;
+        else
+            throw new SwaggerException(message, status, response);
+    }
+}
+
 @Injectable()
 export class RoleServiceProxy {
     private http: Http = null; 
@@ -826,6 +886,34 @@ export class RegisterOutput {
     }
 }
 
+export class ChangeUiThemeInput { 
+    theme: string;
+    constructor(data?: any) {
+        if (data !== undefined) {
+            this.theme = data["theme"] !== undefined ? data["theme"] : null;
+        }
+    }
+
+    static fromJS(data: any): ChangeUiThemeInput {
+        return new ChangeUiThemeInput(data);
+    }
+
+    toJS(data?: any) {
+        data = data === undefined ? {} : data;
+        data["theme"] = this.theme !== undefined ? this.theme : null;
+        return data; 
+    }
+
+    toJSON() {
+        return JSON.stringify(this.toJS());
+    }
+
+    clone() {
+        const json = this.toJSON();
+        return new ChangeUiThemeInput(JSON.parse(json));
+    }
+}
+
 export class UpdateRolePermissionsInput { 
     roleId: number; 
     grantedPermissionNames: string[] = [];

angular/src/shared/service-proxies/service-proxy.module.ts

@@ -9,7 +9,8 @@ import * as ApiServiceProxies from './service-proxies';
         ApiServiceProxies.TenantServiceProxy,
         ApiServiceProxies.UserServiceProxy,
         ApiServiceProxies.TokenAuthServiceProxy,
-        ApiServiceProxies.AccountServiceProxy
+        ApiServiceProxies.AccountServiceProxy,
+        ApiServiceProxies.ConfigurationServiceProxy
     ]
 })
 export class ServiceProxyModule { }