mirror of https://github.com/abpframework/abp.git
mehmet-erim
7 years ago
12 changed files with 171 additions and 108 deletions
@ -1 +0,0 @@ |
|||
export * from './setting/setting.component'; |
|||
@ -1,17 +0,0 @@ |
|||
import { SettingTab } from '@abp/ng.theme.shared'; |
|||
import { Injectable, OnInit } from '@angular/core'; |
|||
import { Router } from '@angular/router'; |
|||
import snq from 'snq'; |
|||
|
|||
@Injectable() |
|||
export class InitialService { |
|||
public settings: SettingTab[]; |
|||
|
|||
constructor(private router: Router) { |
|||
this.settings = this.router.config |
|||
.map(route => snq(() => route.data.routes.settings)) |
|||
.filter(settings => settings && settings.length) |
|||
.reduce((acc, val) => [...acc, ...val], []) |
|||
.sort((a, b) => a.order - b.order); |
|||
} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
<div class="row entry-row"> |
|||
<div class="col-auto"> |
|||
<h1 class="content-header-title">{{ 'AbpSettingManagement::Settings' | abpLocalization }}</h1> |
|||
</div> |
|||
<!-- <div id="breadcrumb" class="col-md-auto pl-md-0"> |
|||
<abp-breadcrumb></abp-breadcrumb> |
|||
</div> --> |
|||
<div class="col"> |
|||
<div class="text-lg-right pt-2" id="AbpContentToolbar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="SettingManagementWrapper"> |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
<div *ngIf="!settingManagementService.settings.length" class="text-center"> |
|||
<i class="fa fa-spinner fa-spin"></i> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-3"> |
|||
<ul class="nav flex-column nav-pills" id="nav-tab" role="tablist"> |
|||
<li |
|||
*abpFor=" |
|||
let setting of settingManagementService.settings; |
|||
trackBy: trackByFn; |
|||
orderBy: 'order'; |
|||
orderDir: 'ASC' |
|||
" |
|||
(click)="settingManagementService.setSelected(setting)" |
|||
class="nav-item" |
|||
[abpPermission]="setting.requiredPolicy" |
|||
> |
|||
<a |
|||
class="nav-link" |
|||
[id]="setting.name + '-tab'" |
|||
role="tab" |
|||
[class.active]="setting.name === settingManagementService.selected.name" |
|||
>{{ setting.name | abpLocalization }}</a |
|||
> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="col-9"> |
|||
<div *ngIf="settingManagementService.settings.length" class="tab-content"> |
|||
<div |
|||
class="tab-pane fade show active" |
|||
[id]="settingManagementService.selected.name + '-tab'" |
|||
role="tabpanel" |
|||
> |
|||
<h2>{{ settingManagementService.selected.name | abpLocalization }}</h2> |
|||
<hr class="my-4" /> |
|||
<router-outlet></router-outlet> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,37 @@ |
|||
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() {} |
|||
|
|||
ngAfterViewInit() { |
|||
timer(250).subscribe(() => { |
|||
if (!this.settingManagementService.settings.length) { |
|||
this.settingManagementService.setSettings(); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
@ -1,51 +0,0 @@ |
|||
<div class="row entry-row"> |
|||
<div class="col-auto"> |
|||
<h1 class="content-header-title">{{ 'AbpSettingManagement::Settings' | abpLocalization }}</h1> |
|||
</div> |
|||
<div id="breadcrumb" class="col-md-auto pl-md-0"> |
|||
<abp-breadcrumb></abp-breadcrumb> |
|||
</div> |
|||
<div class="col"> |
|||
<div class="text-lg-right pt-2" id="AbpContentToolbar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="SettingManagementWrapper"> |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-3"> |
|||
<ul class="nav flex-column nav-pills" id="T515ccf3324254f41a4a9a6b34b0dae56" role="tablist"> |
|||
<li |
|||
*ngFor="let setting of settings" |
|||
(click)="selected = setting" |
|||
class="nav-item" |
|||
[abpPermission]="setting.requiredPolicy" |
|||
> |
|||
<a |
|||
class="nav-link" |
|||
[id]="setting.name + '-tab'" |
|||
role="tab" |
|||
[class.active]="setting.name === selected.name" |
|||
>{{ setting.name | abpLocalization }}</a |
|||
> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="col-9"> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel"> |
|||
<h2>{{ selected.name | abpLocalization }}</h2> |
|||
<hr class="my-4" /> |
|||
|
|||
<ng-container |
|||
*ngComponentOutlet="selected.component" |
|||
[abpPermission]="selected.requiredPolicy" |
|||
></ng-container> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,20 +0,0 @@ |
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { SettingTab, fade } from '@abp/ng.theme.shared'; |
|||
import { InitialService } from '../services/initial.service'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-setting', |
|||
templateUrl: './setting.component.html', |
|||
}) |
|||
export class SettingComponent implements OnInit { |
|||
settings: SettingTab[]; |
|||
|
|||
selected = {} as SettingTab; |
|||
|
|||
constructor(private initialService: InitialService) {} |
|||
|
|||
ngOnInit() { |
|||
this.settings = this.initialService.settings; |
|||
this.selected = this.settings[0]; |
|||
} |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
import { SettingTab } from '@abp/ng.theme.shared'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { Router, RouteConfigLoadEnd, NavigationEnd } from '@angular/router'; |
|||
import { Navigate } from '@ngxs/router-plugin'; |
|||
import { Store } from '@ngxs/store'; |
|||
import { filter } from 'rxjs/operators'; |
|||
import { takeUntilDestroy } from '@abp/ng.core'; |
|||
import { Subscription, timer } from 'rxjs'; |
|||
|
|||
@Injectable({ providedIn: 'root' }) |
|||
export class SettingManagementService { |
|||
settings: SettingTab[] = []; |
|||
|
|||
selected = {} as SettingTab; |
|||
|
|||
constructor(private router: Router, private store: Store) { |
|||
let timeout: Subscription; |
|||
this.router.events |
|||
.pipe( |
|||
filter(event => event instanceof RouteConfigLoadEnd), |
|||
takeUntilDestroy(this), |
|||
) |
|||
.subscribe(event => { |
|||
if (timeout) timeout.unsubscribe(); |
|||
timeout = timer(150).subscribe(() => { |
|||
this.setSettings(); |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
ngOnDestroy() {} |
|||
|
|||
setSettings() { |
|||
setTimeout(() => { |
|||
const route = this.router.config.find(r => r.path === 'setting-management'); |
|||
this.settings = route.data.settings.sort((a, b) => a.order - b.order); |
|||
this.checkSelected(); |
|||
}, 0); |
|||
} |
|||
|
|||
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,15 +1,14 @@ |
|||
import { CoreModule, noop } from '@abp/ng.core'; |
|||
import { NgModule, ModuleWithProviders, APP_INITIALIZER, Self } from '@angular/core'; |
|||
import { SettingComponent } from './components/setting/setting.component'; |
|||
import { SettingManagementRoutingModule } from './setting-management-routing.module'; |
|||
import { CoreModule } from '@abp/ng.core'; |
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
import { InitialService } from './components/services/initial.service'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { SettingLayoutComponent } from './components/setting-layout.component'; |
|||
import { SettingManagementRoutingModule } from './setting-management-routing.module'; |
|||
|
|||
export const SETTING_LAYOUT = SettingLayoutComponent; |
|||
|
|||
@NgModule({ |
|||
declarations: [SettingComponent], |
|||
declarations: [SETTING_LAYOUT], |
|||
imports: [SettingManagementRoutingModule, CoreModule, ThemeSharedModule], |
|||
providers: [InitialService], |
|||
entryComponents: [SETTING_LAYOUT], |
|||
}) |
|||
export class SettingManagementModule { |
|||
constructor(@Self() initialService: InitialService) {} |
|||
} |
|||
export class SettingManagementModule {} |
|||
|
|||
@ -1,8 +1,6 @@ |
|||
import { Type } from '@angular/core'; |
|||
|
|||
export interface SettingTab { |
|||
name: string; |
|||
order: number; |
|||
component: Type<any>; |
|||
requiredPolicy?: string; |
|||
url?: string; |
|||
} |
|||
|
|||
Loading…
Reference in new issue