feat(setting-management): create state

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",

npm/ng-packs/packages/setting-management/src/lib/actions/index.ts

@@ -0,0 +1 @@
+export * from './setting-management.actions';

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) {}
+}

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<SettingTab> = (_, 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];
     }
   }

npm/ng-packs/packages/setting-management/src/lib/models/index.ts

@@ -0,0 +1 @@
+export * from './setting-management';

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;
+  }
+}

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 {}

npm/ng-packs/packages/setting-management/src/lib/states/index.ts

@@ -0,0 +1 @@
+export * from './setting-management.state';

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<SettingManagement.State>({
+  name: 'SettingManagementState',
+  defaults: { selectedTab: {} } as SettingManagement.State,
+})
+export class SettingManagementState {
+  @Selector()
+  static getSelectedTab({ selectedTab }: SettingManagement.State) {
+    return selectedTab;
+  }
+
+  @Action(SetSelectedSettingTab)
+  settingManagementAction({ patchState }: StateContext<SettingManagement.State>, { payload }: SetSelectedSettingTab) {
+    patchState({
+      selectedTab: payload,
+    });
+  }
+}