Merge pull request #14235 from abpframework/Issue-11026

Added feature management to setting tab.

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTE_PROVIDER } from './route.provider';
+import { FeatureManagementModule } from '@abp/ng.feature-management';
 
 @NgModule({
   imports: [
@@ -29,6 +30,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     AccountConfigModule.forRoot(),
     IdentityConfigModule.forRoot(),
     TenantManagementConfigModule.forRoot(),
+    FeatureManagementModule.forRoot(),
     SettingManagementConfigModule.forRoot(),
     ThemeBasicModule.forRoot(),
   ],

npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html

@@ -0,0 +1,19 @@
+<button class="btn btn-primary" type="button" (click)="openFeaturesModal()">
+  <i class="fa fa-cog"></i>
+  {{ 'FeatureManagement::ManageHostFeatures' | abpLocalization }}
+</button>
+<abp-feature-management
+  *abpReplaceableTemplate="{
+    inputs: {
+      providerName: { value: 'T' },
+      providerKey: { value: providerKey },
+      visible: { value: visibleFeatures, twoWay: true }
+    },
+    outputs: { visibleChange: onVisibleFeaturesChange },
+    componentKey: 'FeatureManagement.FeatureManagementComponent'
+  }"
+  [(visible)]="visibleFeatures"
+  providerName="T"
+  [providerKey]="providerKey"
+>
+</abp-feature-management>

npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-feature-management-tab',
+  templateUrl: './feature-management-tab.component.html',
+})
+export class FeatureManagementTabComponent {
+  visibleFeatures = false;
+  providerKey: string;
+
+  openFeaturesModal() {
+    setTimeout(() => {
+      this.visibleFeatures = true;
+    }, 0);
+  }
+
+  onVisibleFeaturesChange = (value: boolean) => {
+    this.visibleFeatures = value;
+  };
+}

npm/ng-packs/packages/feature-management/src/lib/components/index.ts

@@ -1 +1,2 @@
 export * from './feature-management/feature-management.component';
+export * from './feature-management-tab/feature-management-tab.component';

npm/ng-packs/packages/feature-management/src/lib/enums/feature-management-tab-names.ts

@@ -0,0 +1,3 @@
+export const enum eFeatureManagementTabNames {
+  FeatureManagement = 'AbpFeatureManagement::Permission:FeatureManagement',
+}

npm/ng-packs/packages/feature-management/src/lib/enums/index.ts

@@ -0,0 +1,2 @@
+export * from './feature-management-tab-names';
+export * from './components';

npm/ng-packs/packages/feature-management/src/lib/feature-management.module.ts

@@ -1,15 +1,28 @@
 import { CoreModule } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeatureManagementComponent } from './components/feature-management/feature-management.component';
 import { FreeTextInputDirective } from './directives/free-text-input.directive';
+import { FEATURE_MANAGEMENT_SETTINGS_PROVIDERS } from './providers';
+import { FeatureManagementTabComponent } from './components';
 
-const exported = [FeatureManagementComponent, FreeTextInputDirective];
+const exported = [
+  FeatureManagementComponent,
+  FreeTextInputDirective,
+  FeatureManagementTabComponent,
+];
 
 @NgModule({
   declarations: [...exported],
   imports: [CoreModule, ThemeSharedModule, NgbNavModule],
   exports: [...exported],
 })
-export class FeatureManagementModule {}
+export class FeatureManagementModule {
+  static forRoot(): ModuleWithProviders<FeatureManagementModule> {
+    return {
+      ngModule: FeatureManagementModule,
+      providers: [FEATURE_MANAGEMENT_SETTINGS_PROVIDERS],
+    };
+  }
+}

npm/ng-packs/packages/feature-management/src/lib/providers/feature-management-settings.provider.ts

@@ -0,0 +1,26 @@
+import { SettingTabsService } from '@abp/ng.setting-management/config';
+import { APP_INITIALIZER } from '@angular/core';
+import { eFeatureManagementTabNames } from '../enums/feature-management-tab-names';
+import { FeatureManagementTabComponent } from '../components';
+
+export const FEATURE_MANAGEMENT_SETTINGS_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureSettingTabs,
+    deps: [SettingTabsService],
+    multi: true,
+  },
+];
+
+export function configureSettingTabs(settingtabs: SettingTabsService) {
+  return () => {
+    settingtabs.add([
+      {
+        name: eFeatureManagementTabNames.FeatureManagement,
+        order: 104,
+        requiredPolicy: 'FeatureManagement.ManageHostFeatures',
+        component: FeatureManagementTabComponent,
+      },
+    ]);
+  };
+}

npm/ng-packs/packages/feature-management/src/lib/providers/index.ts

@@ -0,0 +1 @@
+export * from './feature-management-settings.provider';

npm/ng-packs/packages/feature-management/src/public-api.ts

@@ -1,5 +1,6 @@
 export * from './lib/components';
 export * from './lib/directives';
+export * from './lib/providers';
 export * from './lib/enums/components';
 export * from './lib/feature-management.module';
-export * from './lib/models';
+export * from './lib/models';

templates/app-nolayers/angular/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTE_PROVIDER } from './route.provider';
+import { FeatureManagementModule } from '@abp/ng.feature-management';
 
 @NgModule({
   imports: [
@@ -31,6 +32,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     SettingManagementConfigModule.forRoot(),
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
+    FeatureManagementModule.forRoot(),
   ],
   declarations: [AppComponent],
   providers: [APP_ROUTE_PROVIDER],

templates/app/angular/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTE_PROVIDER } from './route.provider';
+import { FeatureManagementModule } from '@abp/ng.feature-management';
 
 @NgModule({
   imports: [
@@ -31,6 +32,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     SettingManagementConfigModule.forRoot(),
     ThemeLeptonXModule.forRoot(),
     SideMenuLayoutModule.forRoot(),
+    FeatureManagementModule.forRoot(),
   ],
   declarations: [AppComponent],
   providers: [APP_ROUTE_PROVIDER],

templates/module/angular/projects/dev-app/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTE_PROVIDER } from './route.provider';
+import { FeatureManagementModule } from '@abp/ng.feature-management';
 
 @NgModule({
   imports: [
@@ -33,6 +34,7 @@ import { APP_ROUTE_PROVIDER } from './route.provider';
     SettingManagementConfigModule.forRoot(),
     MyProjectNameConfigModule.forRoot(),
     ThemeBasicModule.forRoot(),
+    FeatureManagementModule.forRoot(),
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],