diff --git a/apps/mc-web/src/app/app.component.html b/apps/mc-web/src/app/app.component.html index 06309d9..2f550e7 100644 --- a/apps/mc-web/src/app/app.component.html +++ b/apps/mc-web/src/app/app.component.html @@ -1,29 +1,26 @@ -
- - - - - - - - - - PT Brand - - - - - - + + + + + + + + + + PT Brand + + + + + + - - - - -
+ + + diff --git a/apps/mc-web/src/app/app.component.ts b/apps/mc-web/src/app/app.component.ts index 1bb1ff1..b1f2eb8 100644 --- a/apps/mc-web/src/app/app.component.ts +++ b/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}`); + } + } } diff --git a/apps/mc-web/src/app/app.module.ts b/apps/mc-web/src/app/app.module.ts index bd616a6..13afb4c 100644 --- a/apps/mc-web/src/app/app.module.ts +++ b/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] }) diff --git a/libs/.gitkeep b/libs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/libs/api-models/src/index.ts b/libs/api-models/src/index.ts new file mode 100644 index 0000000..947f3f8 --- /dev/null +++ b/libs/api-models/src/index.ts @@ -0,0 +1 @@ +export * from './lib/layout.model'; diff --git a/libs/api-models/src/lib/layout.model.ts b/libs/api-models/src/lib/layout.model.ts new file mode 100644 index 0000000..4514f97 --- /dev/null +++ b/libs/api-models/src/lib/layout.model.ts @@ -0,0 +1,2 @@ + +export type AppTheme = 'default' | 'dark' | 'green' ; diff --git a/libs/api-models/tsconfig.lib.json b/libs/api-models/tsconfig.lib.json new file mode 100644 index 0000000..554039f --- /dev/null +++ b/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 + } +} diff --git a/libs/api-models/tslint.json b/libs/api-models/tslint.json new file mode 100644 index 0000000..40a18cd --- /dev/null +++ b/libs/api-models/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tslint.json" +} diff --git a/libs/feature/welcome/src/lib/welcome.module.ts b/libs/feature/welcome/src/lib/welcome.module.ts index d626a26..980044b 100644 --- a/libs/feature/welcome/src/lib/welcome.module.ts +++ b/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 ] }) diff --git a/libs/feature/welcome/src/lib/welcome/welcome.component.html b/libs/feature/welcome/src/lib/welcome/welcome.component.html index 08f96da..b91eac2 100644 --- a/libs/feature/welcome/src/lib/welcome/welcome.component.html +++ b/libs/feature/welcome/src/lib/welcome/welcome.component.html @@ -1,6 +1,3 @@ - - -

Hello PT team!

@@ -39,6 +36,7 @@

Hello PT team!

+ diff --git a/libs/feature/welcome/src/lib/welcome/welcome.component.ts b/libs/feature/welcome/src/lib/welcome/welcome.component.ts index 5c80a33..d6f21a1 100644 --- a/libs/feature/welcome/src/lib/welcome/welcome.component.ts +++ b/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') + }); + } } diff --git a/libs/store/layout/src/index.ts b/libs/store/layout/src/index.ts new file mode 100644 index 0000000..978f29c --- /dev/null +++ b/libs/store/layout/src/index.ts @@ -0,0 +1,2 @@ +export * from './lib/state-layout.module'; +export * from './lib/state/facade'; diff --git a/libs/store/layout/src/lib/state-layout.module.ts b/libs/store/layout/src/lib/state-layout.module.ts new file mode 100644 index 0000000..89d7daf --- /dev/null +++ b/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 { +} diff --git a/libs/store/layout/src/lib/state/actions.ts b/libs/store/layout/src/lib/state/actions.ts new file mode 100644 index 0000000..9761580 --- /dev/null +++ b/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 }>()); diff --git a/libs/store/layout/src/lib/state/facade.ts b/libs/store/layout/src/lib/state/facade.ts new file mode 100644 index 0000000..04df8c1 --- /dev/null +++ b/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 + ) {} + + getTheme(): Observable { + return this.store.pipe(select(getSelectorTheme)); + } + + setTheme(theme: AppTheme) { + this.store.dispatch(setAppTheme({ theme })); + } +} diff --git a/libs/store/layout/src/lib/state/reducers.ts b/libs/store/layout/src/lib/state/reducers.ts new file mode 100644 index 0000000..0023afb --- /dev/null +++ b/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); +} diff --git a/libs/store/layout/src/lib/state/selectors.ts b/libs/store/layout/src/lib/state/selectors.ts new file mode 100644 index 0000000..6b85bb5 --- /dev/null +++ b/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('layout'); + + +export const getSelectorTheme = createSelector( + selectLayoutState, + getTheme +); diff --git a/libs/store/layout/tsconfig.json b/libs/store/layout/tsconfig.json new file mode 100644 index 0000000..ea56794 --- /dev/null +++ b/libs/store/layout/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../../tsconfig.json" +} diff --git a/libs/store/layout/tsconfig.lib.json b/libs/store/layout/tsconfig.lib.json new file mode 100644 index 0000000..3ed41ef --- /dev/null +++ b/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" + ] +} diff --git a/libs/store/layout/tslint.json b/libs/store/layout/tslint.json new file mode 100644 index 0000000..55f0729 --- /dev/null +++ b/libs/store/layout/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "../../../tslint.json" +} diff --git a/libs/store/root/src/index.ts b/libs/store/root/src/index.ts new file mode 100644 index 0000000..5da468b --- /dev/null +++ b/libs/store/root/src/index.ts @@ -0,0 +1 @@ +export * from './lib/state-root.module'; diff --git a/libs/store/root/src/lib/state-root.module.ts b/libs/store/root/src/lib/state-root.module.ts new file mode 100644 index 0000000..c61e0f9 --- /dev/null +++ b/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 { +} diff --git a/libs/store/root/tsconfig.json b/libs/store/root/tsconfig.json new file mode 100644 index 0000000..ea56794 --- /dev/null +++ b/libs/store/root/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../../tsconfig.json" +} diff --git a/libs/store/root/tsconfig.lib.json b/libs/store/root/tsconfig.lib.json new file mode 100644 index 0000000..6c1ec0d --- /dev/null +++ b/libs/store/root/tsconfig.lib.json @@ -0,0 +1,32 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../../dist/out-tsc/libs/store/root", + "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" + ] +} diff --git a/libs/store/root/tslint.json b/libs/store/root/tslint.json new file mode 100644 index 0000000..55f0729 --- /dev/null +++ b/libs/store/root/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "../../../tslint.json" +} diff --git a/tsconfig.json b/tsconfig.json index 2a46894..cc107da 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,9 +19,12 @@ ], "baseUrl": ".", "paths": { - "@libs/feature/welcome": [ - "libs/feature/welcome/src/index.ts" - ] + "@libs/api-models": ["libs/api-models/src/index.ts"], + "@libs/feature/welcome": ["libs/feature/welcome/src/index.ts"], + "@libs/store/root": ["libs/store/root/src/index.ts"], + "@libs/store/router": ["libs/store/router/src/index.ts"], + "@libs/store/users": ["libs/store/users/src/index.ts"], + "@libs/store/layout": ["libs/store/layout/src/index.ts"] } }, "exclude": [