From 8f358bbe0179feaacb80bb9dde79682b69b7eb2f Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Mon, 21 Oct 2019 11:00:45 +0300 Subject: [PATCH] feat(setting-management): create state --- npm/ng-packs/package.json | 1 + .../src/lib/actions/index.ts | 1 + .../lib/actions/setting-management.actions.ts | 6 ++++++ .../setting-management.component.ts | 19 +++++++++++++++-- .../src/lib/models/index.ts | 1 + .../src/lib/models/setting-management.ts | 7 +++++++ .../src/lib/setting-management.module.ts | 9 +++++++- .../src/lib/states/index.ts | 1 + .../lib/states/setting-management.state.ts | 21 +++++++++++++++++++ 9 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 npm/ng-packs/packages/setting-management/src/lib/actions/index.ts create mode 100644 npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts create mode 100644 npm/ng-packs/packages/setting-management/src/lib/models/index.ts create mode 100644 npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts create mode 100644 npm/ng-packs/packages/setting-management/src/lib/states/index.ts create mode 100644 npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts diff --git a/npm/ng-packs/package.json b/npm/ng-packs/package.json index abee172af0..d513d082b2 100644 --- a/npm/ng-packs/package.json +++ b/npm/ng-packs/package.json @@ -58,6 +58,7 @@ "ng-packagr": "^5.5.0", "ngx-perfect-scrollbar": "^8.0.0", "ngxs-reset-plugin": "^1.2.0", + "ngxs-schematic": "^1.1.9", "prettier": "^1.18.2", "primeicons": "^2.0.0", "primeng": "^8.0.3", diff --git a/npm/ng-packs/packages/setting-management/src/lib/actions/index.ts b/npm/ng-packs/packages/setting-management/src/lib/actions/index.ts new file mode 100644 index 0000000000..e51bb79bf8 --- /dev/null +++ b/npm/ng-packs/packages/setting-management/src/lib/actions/index.ts @@ -0,0 +1 @@ +export * from './setting-management.actions'; diff --git a/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts b/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts new file mode 100644 index 0000000000..c3f082316c --- /dev/null +++ b/npm/ng-packs/packages/setting-management/src/lib/actions/setting-management.actions.ts @@ -0,0 +1,6 @@ +import { SettingTab } from '@abp/ng.theme.shared'; + +export class SetSelectedSettingTab { + static readonly type = '[SettingManagement] Set Selected Tab'; + constructor(public payload: SettingTab) {} +} diff --git a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts index 7a267b3517..0c43cf6670 100644 --- a/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts +++ b/npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.ts @@ -3,6 +3,9 @@ import { SettingTab, getSettingTabs } from '@abp/ng.theme.shared'; import { Router } from '@angular/router'; import { Store } from '@ngxs/store'; import { ConfigState } from '@abp/ng.core'; +import { SettingManagementState } from '../states/setting-management.state'; +import { SetSelectedSettingTab } from '../actions/setting-management.actions'; +import { RouterState } from '@ngxs/router-plugin'; @Component({ selector: 'abp-setting-management', @@ -11,7 +14,18 @@ import { ConfigState } from '@abp/ng.core'; export class SettingManagementComponent implements OnInit { settings: SettingTab[] = []; - selected = {} as SettingTab; + set selected(value: SettingTab) { + this.store.dispatch(new SetSelectedSettingTab(value)); + } + get selected(): SettingTab { + const value = this.store.selectSnapshot(SettingManagementState.getSelectedTab); + + if ((!value || !value.component) && this.settings.length) { + return this.settings[0]; + } + + return value; + } trackByFn: TrackByFunction = (_, item) => item.name; @@ -21,7 +35,8 @@ export class SettingManagementComponent implements OnInit { this.settings = getSettingTabs() .filter(setting => this.store.selectSnapshot(ConfigState.getGrantedPolicy(setting.requiredPolicy))) .sort((a, b) => a.order - b.order); - if (this.settings.length) { + + if (!this.selected && this.settings.length) { this.selected = this.settings[0]; } } diff --git a/npm/ng-packs/packages/setting-management/src/lib/models/index.ts b/npm/ng-packs/packages/setting-management/src/lib/models/index.ts new file mode 100644 index 0000000000..16955ae40f --- /dev/null +++ b/npm/ng-packs/packages/setting-management/src/lib/models/index.ts @@ -0,0 +1 @@ +export * from './setting-management'; diff --git a/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts b/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts new file mode 100644 index 0000000000..b0aedd4373 --- /dev/null +++ b/npm/ng-packs/packages/setting-management/src/lib/models/setting-management.ts @@ -0,0 +1,7 @@ +import { SettingTab } from '@abp/ng.theme.shared'; + +export namespace SettingManagement { + export interface State { + selectedTab: SettingTab; + } +} diff --git a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts index 397c581587..47ce8c53bf 100644 --- a/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts +++ b/npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts @@ -3,9 +3,16 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { NgModule } from '@angular/core'; import { SettingManagementRoutingModule } from './setting-management-routing.module'; import { SettingManagementComponent } from './components/setting-management.component'; +import { NgxsModule } from '@ngxs/store'; +import { SettingManagementState } from './states/setting-management.state'; @NgModule({ declarations: [SettingManagementComponent], - imports: [SettingManagementRoutingModule, CoreModule, ThemeSharedModule], + imports: [ + SettingManagementRoutingModule, + CoreModule, + ThemeSharedModule, + NgxsModule.forFeature([SettingManagementState]), + ], }) export class SettingManagementModule {} diff --git a/npm/ng-packs/packages/setting-management/src/lib/states/index.ts b/npm/ng-packs/packages/setting-management/src/lib/states/index.ts new file mode 100644 index 0000000000..23cda4c4d0 --- /dev/null +++ b/npm/ng-packs/packages/setting-management/src/lib/states/index.ts @@ -0,0 +1 @@ +export * from './setting-management.state'; diff --git a/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts b/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts new file mode 100644 index 0000000000..d2914876ec --- /dev/null +++ b/npm/ng-packs/packages/setting-management/src/lib/states/setting-management.state.ts @@ -0,0 +1,21 @@ +import { Action, Selector, State, StateContext } from '@ngxs/store'; +import { SetSelectedSettingTab } from '../actions/setting-management.actions'; +import { SettingManagement } from '../models/setting-management'; + +@State({ + name: 'SettingManagementState', + defaults: { selectedTab: {} } as SettingManagement.State, +}) +export class SettingManagementState { + @Selector() + static getSelectedTab({ selectedTab }: SettingManagement.State) { + return selectedTab; + } + + @Action(SetSelectedSettingTab) + settingManagementAction({ patchState }: StateContext, { payload }: SetSelectedSettingTab) { + patchState({ + selectedTab: payload, + }); + } +}