feat: added theme change to Body

apps/mc-web/src/app/app.component.html

@@ -1,29 +1,26 @@
-<div [classList]="themeName + ' theme-wrapper'">
 
-    <mc-navbar>
-        <mc-navbar-container position="left">
-            <mc-navbar-item>
-                <i mc-icon="mc-hamburger_16"></i>
-            </mc-navbar-item>
-            <mc-navbar-brand>
-                <mc-navbar-logo>
-                    <svg class="logo" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 32h32v-32h-32z" fill="#c00"/><path d="m11.7013126 2.13713398h3.4056699v5.22500971c.0083884 1.2815534 1.0494758 2.31984466 2.3304078 2.32543689v-1.89825242c-.2370486-.00528156-.4296699-.19231068-.432466-.42718447v-5.22500971h3.4050485v-1.89794175h-8.7086602zm-3.29065629-1.89806602h-5.95976699-.0167767c-1.28062136.00590291-2.3192233 1.04978641-2.32481553 2.33351456h1.89794174c.00590292-.23735922.19262136-.42407767.42687379-.43557281h5.97654369c.24295146 0 .44054369.19821359.44054369.44427184v.97646602c0 .23735923-.19759223.43867961-.44054369.43867961l-5.97654369.00248544c-1.28062136.01118447-2.3192233 1.04667961-2.32481553 2.33071845v3.35782524h1.89794174v-3.35782524c.00590292-.23207767.19262136-.42438835.42687379-.42718447h5.97654369c1.28932039 0 2.34190289-1.05227184 2.34190289-2.34469903v-.97646602c0-1.29242718-1.0525825-2.34221359-2.34190289-2.34221359" fill="#fff" transform="translate(5.592 10.889)"/></g></svg>
-                </mc-navbar-logo>
-                <mc-navbar-title>PT Brand</mc-navbar-title>
-            </mc-navbar-brand>
-        </mc-navbar-container>
-        <mc-navbar-container position="right">
-            <mc-navbar-item>
-                <select name="theme" [(ngModel)]="themeName">
-                    <option value="theme-default">theme-default</option>
-                    <option value="theme-dark">theme-dark</option>
-                    <option value="theme-green">theme-green</option>
-                </select>
-            </mc-navbar-item>
+<mc-navbar>
+    <mc-navbar-container position="left">
+        <mc-navbar-item>
+            <i mc-icon="mc-hamburger_16"></i>
+        </mc-navbar-item>
+        <mc-navbar-brand>
+            <mc-navbar-logo>
+                <svg class="logo" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 32h32v-32h-32z" fill="#c00"/><path d="m11.7013126 2.13713398h3.4056699v5.22500971c.0083884 1.2815534 1.0494758 2.31984466 2.3304078 2.32543689v-1.89825242c-.2370486-.00528156-.4296699-.19231068-.432466-.42718447v-5.22500971h3.4050485v-1.89794175h-8.7086602zm-3.29065629-1.89806602h-5.95976699-.0167767c-1.28062136.00590291-2.3192233 1.04978641-2.32481553 2.33351456h1.89794174c.00590292-.23735922.19262136-.42407767.42687379-.43557281h5.97654369c.24295146 0 .44054369.19821359.44054369.44427184v.97646602c0 .23735923-.19759223.43867961-.44054369.43867961l-5.97654369.00248544c-1.28062136.01118447-2.3192233 1.04667961-2.32481553 2.33071845v3.35782524h1.89794174v-3.35782524c.00590292-.23207767.19262136-.42438835.42687379-.42718447h5.97654369c1.28932039 0 2.34190289-1.05227184 2.34190289-2.34469903v-.97646602c0-1.29242718-1.0525825-2.34221359-2.34190289-2.34221359" fill="#fff" transform="translate(5.592 10.889)"/></g></svg>
+            </mc-navbar-logo>
+            <mc-navbar-title>PT Brand</mc-navbar-title>
+        </mc-navbar-brand>
+    </mc-navbar-container>
+    <mc-navbar-container position="right">
+        <mc-navbar-item>
+            <select name="theme" [(ngModel)]="currentModelTheme" (ngModelChange)="themeChange($event)">
+                <option value="default">theme-default</option>
+                <option value="dark">theme-dark</option>
+                <option value="green">theme-green</option>
+            </select>
+        </mc-navbar-item>
 
-        </mc-navbar-container>
-    </mc-navbar>
-
-    <router-outlet></router-outlet>
-</div>
+    </mc-navbar-container>
+</mc-navbar>
 
+<router-outlet></router-outlet>

apps/mc-web/src/app/app.component.ts

@@ -1,10 +1,37 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, Renderer2 } from '@angular/core';
+import { AppTheme } from '@libs/api-models';
+import { LayoutFacade } from '@libs/store/layout';
 
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html'
 })
-export class AppComponent {
-    themeName = 'theme-default';
+export class AppComponent implements OnInit {
+
+    currentModelTheme: AppTheme;
+    currentTheme: AppTheme;
+
+    constructor(
+        private renderer: Renderer2,
+        private layoutFacade: LayoutFacade
+    ) {}
+
+    ngOnInit() {
+        this.layoutFacade.getTheme().subscribe((theme) => {
+            this.changeThemeOnBody(theme);
+        });
+    }
+
+    themeChange(newTheme: AppTheme) {
+        this.layoutFacade.setTheme(newTheme);
+    }
+
+    private changeThemeOnBody(theme) {
+        if (theme) {
+            this.renderer.removeClass(document.body, `theme-${this.currentTheme}`);
+            this.currentTheme = this.currentModelTheme = theme;
+            this.renderer.addClass(document.body, `theme-${theme}`);
+        }
+    }
 }

apps/mc-web/src/app/app.module.ts

@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { StateLayoutModule } from '@libs/store/layout';
+import { StoreRootModule } from '@libs/store/root';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { McNavbarModule } from '@ptsecurity/mosaic';
 
@@ -27,7 +29,10 @@ import { AppComponent } from './app.component';
         StoreDevtoolsModule.instrument({
             name: 'mc-web',
             logOnly: environment.production
-        })
+        }),
+
+        StoreRootModule,
+        StateLayoutModule
     ],
     bootstrap: [AppComponent]
 })

libs/api-models/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/layout.model';

libs/api-models/src/lib/layout.model.ts

@@ -0,0 +1,2 @@
+
+export type AppTheme = 'default' | 'dark' | 'green' ;

libs/api-models/tsconfig.lib.json

@@ -0,0 +1,28 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc/libs/api-models",
+        "target": "es2015",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "declaration": true,
+        "sourceMap": true,
+        "inlineSources": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "types": [],
+        "lib": [
+            "dom",
+            "es2015"
+        ]
+    },
+    "angularCompilerOptions": {
+        "annotateForClosureCompiler": true,
+        "skipTemplateCodegen": true,
+        "strictMetadataEmit": true,
+        "fullTemplateTypeCheck": true,
+        "strictInjectionParameters": true,
+        "enableResourceInlining": true
+    }
+}

libs/api-models/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../../tslint.json"
+}

libs/feature/welcome/src/lib/welcome.module.ts

@@ -1,7 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { McInputModule, McFormFieldModule, McToggleModule, McNavbarModule, McButtonModule } from '@ptsecurity/mosaic';
+import {
+    McInputModule,
+    McFormFieldModule,
+    McToggleModule,
+    McNavbarModule,
+    McButtonModule,
+    McModalModule
+} from '@ptsecurity/mosaic';
 
 import { WelcomeRoutingModule } from './welcome-routing.module';
 import { WelcomeTableComponent } from './welcome-table/welcome-table.component';
@@ -21,6 +28,7 @@ import { WelcomeComponent } from './welcome/welcome.component';
         McToggleModule,
         McNavbarModule,
         McButtonModule,
+        McModalModule,
         FormsModule
     ]
 })

libs/feature/welcome/src/lib/welcome/welcome.component.html

@@ -1,6 +1,3 @@
-
-
-
 <div class="container">
 
     <h1 class="mc-display-1">Hello PT team!</h1>
@@ -39,6 +36,7 @@ <h1 class="mc-display-1">Hello PT team!</h1>
                     </mc-toggle>
                 </div>
 
+                <button mc-button (click)="showConfirm()" style="margin-top: 18px;">Modal Confirm</button>
             </div>
         </div>
 

libs/feature/welcome/src/lib/welcome/welcome.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { McModalService } from '@ptsecurity/mosaic/modal';
 
 
 @Component({
@@ -11,5 +12,16 @@ export class WelcomeComponent {
     title = 'test';
     items = ['Lorem', 'ipsum', 'dolor', 'sit', 'amet'];
 
-    constructor() {}
+    constructor(
+        private modalService: McModalService
+    ) {}
+
+    showConfirm() {
+        this.modalService.success({
+            mcContent: 'Сохранить сделанные изменения в запросе "Все активы с виндой"?',
+            mcOkText: 'Сохранить',
+            mcCancelText: 'Отмена',
+            mcOnOk: () => console.log('OK')
+        });
+    }
 }

libs/store/layout/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/state-layout.module';
+export * from './lib/state/facade';

libs/store/layout/src/lib/state-layout.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { StoreRouterConnectingModule } from '@ngrx/router-store';
+import { StoreModule } from '@ngrx/store';
+
+import { reducer } from './state/reducers';
+
+
+export const ROUTING_FEATURE = 'layout';
+
+@NgModule({
+    imports: [
+        CommonModule,
+
+        StoreRouterConnectingModule.forRoot({
+            stateKey: ROUTING_FEATURE
+        }),
+
+        StoreModule.forFeature(ROUTING_FEATURE, reducer)
+    ]
+})
+export class StateLayoutModule {
+}

libs/store/layout/src/lib/state/actions.ts

@@ -0,0 +1,5 @@
+import { AppTheme } from '@libs/api-models';
+import { createAction, props } from '@ngrx/store';
+
+
+export const setAppTheme = createAction('[Layout] Set App Theme', props<{ theme: AppTheme }>());

libs/store/layout/src/lib/state/facade.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { AppTheme } from '@libs/api-models';
+import { select, Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { setAppTheme } from './actions';
+import { IState } from './reducers';
+import { getSelectorTheme } from './selectors';
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LayoutFacade {
+
+    constructor(
+        private store: Store<IState>
+    ) {}
+
+    getTheme(): Observable<AppTheme> {
+        return this.store.pipe(select(getSelectorTheme));
+    }
+
+    setTheme(theme: AppTheme) {
+        this.store.dispatch(setAppTheme({ theme }));
+    }
+}

libs/store/layout/src/lib/state/reducers.ts

@@ -0,0 +1,25 @@
+import { AppTheme } from '@libs/api-models';
+import { Action, createReducer, on } from '@ngrx/store';
+
+import * as LayoutActions from './actions';
+
+
+export interface IState {
+    theme: AppTheme;
+}
+
+const initialState: IState = {
+    theme: 'default'
+};
+
+const layoutReducer = createReducer(
+    initialState,
+    on(LayoutActions.setAppTheme, (state, action) => ({
+        ...state,
+        theme: action.theme
+    }))
+);
+
+export function reducer(state: IState | undefined, action: Action) {
+    return layoutReducer(state, action);
+}

libs/store/layout/src/lib/state/selectors.ts

@@ -0,0 +1,14 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+
+import { IState } from './reducers';
+
+
+const getTheme = (state: IState) => state.theme;
+
+const selectLayoutState = createFeatureSelector<IState>('layout');
+
+
+export const getSelectorTheme = createSelector(
+    selectLayoutState,
+    getTheme
+);

libs/store/layout/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../../../tsconfig.json"
+}

libs/store/layout/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../../dist/out-tsc/libs/store/layout",
+        "target": "es2015",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "declaration": true,
+        "sourceMap": true,
+        "inlineSources": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "types": [],
+        "lib": [
+            "dom",
+            "es2018"
+        ]
+    },
+    "angularCompilerOptions": {
+        "annotateForClosureCompiler": true,
+        "skipTemplateCodegen": true,
+        "strictMetadataEmit": true,
+        "fullTemplateTypeCheck": true,
+        "strictInjectionParameters": true,
+        "enableResourceInlining": true
+    },
+    "exclude": [
+        "src/test.ts",
+        "**/*.spec.ts"
+    ]
+}

libs/store/layout/tslint.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../../../tslint.json"
+}

libs/store/root/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/state-root.module';

libs/store/root/src/lib/state-root.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+
+
+@NgModule({
+    imports: [
+        StoreModule.forRoot({}),
+        EffectsModule.forRoot([])
+    ]
+})
+export class StoreRootModule {
+}

libs/store/root/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../../../tsconfig.json"
+}