mirror of https://github.com/abpframework/abp.git
32 changed files with 349 additions and 183 deletions
@ -0,0 +1,24 @@ |
|||
# SettingManagementConfig |
|||
|
|||
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.7. |
|||
|
|||
## Code scaffolding |
|||
|
|||
Run `ng generate component component-name --project setting-management-config` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project setting-management-config`. |
|||
> Note: Don't forget to add `--project setting-management-config` or else it will be added to the default project in your `angular.json` file. |
|||
|
|||
## Build |
|||
|
|||
Run `ng build setting-management-config` to build the project. The build artifacts will be stored in the `dist/` directory. |
|||
|
|||
## Publishing |
|||
|
|||
After building your library with `ng build setting-management-config`, go to the dist folder `cd dist/setting-management-config` and run `npm publish`. |
|||
|
|||
## Running unit tests |
|||
|
|||
Run `ng test setting-management-config` to execute the unit tests via [Karma](https://karma-runner.github.io). |
|||
|
|||
## Further help |
|||
|
|||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
|||
@ -0,0 +1,32 @@ |
|||
// Karma configuration file, see link for more information
|
|||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
|||
|
|||
module.exports = function (config) { |
|||
config.set({ |
|||
basePath: '', |
|||
frameworks: ['jasmine', '@angular-devkit/build-angular'], |
|||
plugins: [ |
|||
require('karma-jasmine'), |
|||
require('karma-chrome-launcher'), |
|||
require('karma-jasmine-html-reporter'), |
|||
require('karma-coverage-istanbul-reporter'), |
|||
require('@angular-devkit/build-angular/plugins/karma') |
|||
], |
|||
client: { |
|||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
|||
}, |
|||
coverageIstanbulReporter: { |
|||
dir: require('path').join(__dirname, '../../coverage/setting-management-config'), |
|||
reports: ['html', 'lcovonly', 'text-summary'], |
|||
fixWebpackSourcePaths: true |
|||
}, |
|||
reporters: ['progress', 'kjhtml'], |
|||
port: 9876, |
|||
colors: true, |
|||
logLevel: config.LOG_INFO, |
|||
autoWatch: true, |
|||
browsers: ['Chrome'], |
|||
singleRun: false, |
|||
restartOnFileChange: true |
|||
}); |
|||
}; |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json", |
|||
"dest": "../../dist/setting-management-config", |
|||
"lib": { |
|||
"entryFile": "src/public-api.ts" |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
{ |
|||
"name": "@abp/ng.setting-management.config", |
|||
"version": "0.0.1", |
|||
"publishConfig": { |
|||
"access": "public" |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
import { Injectable } from '@angular/core'; |
|||
import { ABP_ROUTES, eLayoutType } from '@abp/ng.core'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root', |
|||
}) |
|||
export class SettingManagementConfigService { |
|||
constructor() { |
|||
ABP_ROUTES.push({ |
|||
name: 'Settings', |
|||
path: 'setting-management', |
|||
parentName: 'AbpUiNavigation::Menu:Administration', |
|||
layout: eLayoutType.application, |
|||
order: 6, |
|||
iconClass: 'fa fa-cog', |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import { NgModule, APP_INITIALIZER } from '@angular/core'; |
|||
import { SettingManagementConfigService } from './services/setting-management-config.service'; |
|||
import { noop } from '@abp/ng.core'; |
|||
|
|||
@NgModule({ |
|||
providers: [{ provide: APP_INITIALIZER, deps: [SettingManagementConfigService], useFactory: noop, multi: true }], |
|||
}) |
|||
export class SettingManagementConfigModule {} |
|||
@ -0,0 +1 @@ |
|||
export * from './lib/setting-management-config.module'; |
|||
@ -0,0 +1,21 @@ |
|||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
|||
|
|||
import 'zone.js/dist/zone'; |
|||
import 'zone.js/dist/zone-testing'; |
|||
import { getTestBed } from '@angular/core/testing'; |
|||
import { |
|||
BrowserDynamicTestingModule, |
|||
platformBrowserDynamicTesting |
|||
} from '@angular/platform-browser-dynamic/testing'; |
|||
|
|||
declare const require: any; |
|||
|
|||
// First, initialize the Angular testing environment.
|
|||
getTestBed().initTestEnvironment( |
|||
BrowserDynamicTestingModule, |
|||
platformBrowserDynamicTesting() |
|||
); |
|||
// Then we find all the tests.
|
|||
const context = require.context('./', true, /\.spec\.ts$/); |
|||
// And load the modules.
|
|||
context.keys().map(context); |
|||
@ -0,0 +1,26 @@ |
|||
{ |
|||
"extends": "../../tsconfig.json", |
|||
"compilerOptions": { |
|||
"outDir": "../../out-tsc/lib", |
|||
"target": "es2015", |
|||
"declaration": true, |
|||
"inlineSources": true, |
|||
"types": [], |
|||
"lib": [ |
|||
"dom", |
|||
"es2018" |
|||
] |
|||
}, |
|||
"angularCompilerOptions": { |
|||
"annotateForClosureCompiler": true, |
|||
"skipTemplateCodegen": true, |
|||
"strictMetadataEmit": true, |
|||
"fullTemplateTypeCheck": true, |
|||
"strictInjectionParameters": true, |
|||
"enableResourceInlining": true |
|||
}, |
|||
"exclude": [ |
|||
"src/test.ts", |
|||
"**/*.spec.ts" |
|||
] |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
{ |
|||
"extends": "../../tsconfig.json", |
|||
"compilerOptions": { |
|||
"outDir": "../../out-tsc/spec", |
|||
"types": [ |
|||
"jasmine", |
|||
"node" |
|||
] |
|||
}, |
|||
"files": [ |
|||
"src/test.ts" |
|||
], |
|||
"include": [ |
|||
"**/*.spec.ts", |
|||
"**/*.d.ts" |
|||
] |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
{ |
|||
"extends": "../../tslint.json", |
|||
"rules": { |
|||
"directive-selector": [ |
|||
true, |
|||
"attribute", |
|||
"abp", |
|||
"camelCase" |
|||
], |
|||
"component-selector": [ |
|||
true, |
|||
"element", |
|||
"abp", |
|||
"kebab-case" |
|||
] |
|||
} |
|||
} |
|||
@ -1,29 +0,0 @@ |
|||
import { eLayoutType } from '@abp/ng.core'; |
|||
import { SettingTab } from '@abp/ng.theme.shared'; |
|||
import { Component, TrackByFunction } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { timer } from 'rxjs'; |
|||
import { SettingManagementService } from '../services/setting-management.service'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-setting-layout', |
|||
templateUrl: './setting-layout.component.html', |
|||
}) |
|||
export class SettingLayoutComponent { |
|||
// required for dynamic component
|
|||
static type = eLayoutType.setting; |
|||
|
|||
trackByFn: TrackByFunction<SettingTab> = (_, item) => item.name; |
|||
|
|||
constructor(public settingManagementService: SettingManagementService, private router: Router) { |
|||
if ( |
|||
settingManagementService.selected && |
|||
this.router.url !== settingManagementService.selected.url && |
|||
settingManagementService.settings.length |
|||
) { |
|||
settingManagementService.setSelected(settingManagementService.settings[0]); |
|||
} |
|||
} |
|||
|
|||
ngOnDestroy() {} |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
import { SettingTab } from '@abp/ng.theme.shared'; |
|||
import { Component, TrackByFunction } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { ABP, ConfigState } from '@abp/ng.core'; |
|||
import { Store } from '@ngxs/store'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-setting-management', |
|||
templateUrl: './setting-management.component.html', |
|||
}) |
|||
export class SettingManagementComponent { |
|||
settings: SettingTab[] = []; |
|||
|
|||
selected = {} as SettingTab; |
|||
|
|||
trackByFn: TrackByFunction<SettingTab> = (_, item) => item.name; |
|||
|
|||
constructor(private router: Router, private store: Store) {} |
|||
|
|||
ngOnInit() { |
|||
this.setSettings(); |
|||
} |
|||
|
|||
setSettings() { |
|||
const { data } = this.router.config.find(r => r.path === 'setting-management') as { |
|||
data: ABP.Dictionary<SettingTab>; |
|||
}; |
|||
|
|||
if (data) { |
|||
Object.keys(data).forEach(key => { |
|||
const element = data[key]; |
|||
if (element && element.component) { |
|||
if ( |
|||
element.requiredPolicy && |
|||
!this.store.selectSnapshot(ConfigState.getGrantedPolicy(element.requiredPolicy)) |
|||
) { |
|||
return; |
|||
} |
|||
|
|||
this.settings.push(element); |
|||
} |
|||
}); |
|||
|
|||
if (this.settings.length) { |
|||
this.settings = this.settings.sort((a, b) => a.order - b.order); |
|||
this.selected = this.settings[0]; |
|||
} |
|||
} |
|||
} |
|||
|
|||
ngOnDestroy() {} |
|||
} |
|||
@ -1 +0,0 @@ |
|||
export * from './routes'; |
|||
@ -1,14 +0,0 @@ |
|||
import { ABP, eLayoutType } from '@abp/ng.core'; |
|||
|
|||
export const SETTING_MANAGEMENT_ROUTES = { |
|||
routes: [ |
|||
{ |
|||
name: 'Settings', |
|||
path: 'setting-management', |
|||
parentName: 'AbpUiNavigation::Menu:Administration', |
|||
layout: eLayoutType.application, |
|||
order: 6, |
|||
iconClass: 'fa fa-cog', |
|||
}, |
|||
] as ABP.FullRoute[], |
|||
}; |
|||
@ -1,61 +0,0 @@ |
|||
import { SettingTab } from '@abp/ng.theme.shared'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import { Navigate } from '@ngxs/router-plugin'; |
|||
import { Store, Actions, ofActionSuccessful } from '@ngxs/store'; |
|||
import { Subject } from 'rxjs'; |
|||
import { ConfigState, GetAppConfiguration } from '@abp/ng.core'; |
|||
import { OAuthService } from 'angular-oauth2-oidc'; |
|||
import { takeUntil } from 'rxjs/operators'; |
|||
|
|||
@Injectable({ providedIn: 'root' }) |
|||
export class SettingManagementService { |
|||
settings: SettingTab[] = []; |
|||
|
|||
selected = {} as SettingTab; |
|||
|
|||
private destroy$ = new Subject(); |
|||
|
|||
constructor( |
|||
private actions: Actions, |
|||
private router: Router, |
|||
private store: Store, |
|||
private oAuthService: OAuthService, |
|||
) { |
|||
setTimeout(() => this.setSettings(), 0); |
|||
|
|||
this.actions |
|||
.pipe(ofActionSuccessful(GetAppConfiguration)) |
|||
.pipe(takeUntil(this.destroy$)) |
|||
.subscribe(() => { |
|||
if (this.oAuthService.hasValidAccessToken()) { |
|||
this.setSettings(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.destroy$.next(); |
|||
} |
|||
|
|||
setSettings() { |
|||
const route = this.router.config.find(r => r.path === 'setting-management'); |
|||
this.settings = (route.data.settings as SettingTab[]) |
|||
.filter(setting => this.store.selectSnapshot(ConfigState.getGrantedPolicy(setting.requiredPolicy))) |
|||
.sort((a, b) => a.order - b.order); |
|||
this.checkSelected(); |
|||
} |
|||
|
|||
checkSelected() { |
|||
this.selected = this.settings.find(setting => setting.url === this.router.url) || ({} as SettingTab); |
|||
|
|||
if (!this.selected.name && this.settings.length) { |
|||
this.setSelected(this.settings[0]); |
|||
} |
|||
} |
|||
|
|||
setSelected(selected: SettingTab) { |
|||
this.selected = selected; |
|||
this.store.dispatch(new Navigate([selected.url])); |
|||
} |
|||
} |
|||
@ -1,14 +1,11 @@ |
|||
import { CoreModule } from '@abp/ng.core'; |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { SettingLayoutComponent } from './components/setting-layout.component'; |
|||
import { SettingManagementRoutingModule } from './setting-management-routing.module'; |
|||
|
|||
export const SETTING_LAYOUT = SettingLayoutComponent; |
|||
import { SettingManagementComponent } from './components/setting-management.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [SETTING_LAYOUT], |
|||
declarations: [SettingManagementComponent], |
|||
imports: [SettingManagementRoutingModule, CoreModule, ThemeSharedModule], |
|||
entryComponents: [SETTING_LAYOUT], |
|||
}) |
|||
export class SettingManagementModule {} |
|||
|
|||
@ -1,3 +1,2 @@ |
|||
export * from './lib/setting-management.module'; |
|||
export * from './lib/constants'; |
|||
export * from './lib/components/setting-layout.component'; |
|||
export * from './lib/components/setting-management.component'; |
|||
|
|||
@ -1,6 +1,8 @@ |
|||
import { Type } from '@angular/core'; |
|||
|
|||
export interface SettingTab { |
|||
component: Type<any>; |
|||
name: string; |
|||
order: number; |
|||
requiredPolicy?: string; |
|||
url?: string; |
|||
} |
|||
|
|||
Loading…
Reference in new issue