mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
Merge branch 'develop/router'
Conflicts: src/platform/browser/directives.ts src/platform/browser/providers.ts
This commit is contained in:
nixa
commit
660aa8a4b6
33 changed files with 616 additions and 550 deletions
|
|
@ -13,8 +13,7 @@
|
|||
"@angular/platform-browser": "2.0.0-rc.4",
|
||||
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
|
||||
"@angular/platform-server": "2.0.0-rc.4",
|
||||
"@angular/router": "3.0.0-alpha.8",
|
||||
"@angular/router-deprecated": "2.0.0-rc.2",
|
||||
"@angular/router": "3.0.0-beta.2",
|
||||
"@angular/forms":"0.2.0",
|
||||
"amcharts3": "github:amcharts/amcharts3",
|
||||
"ammap3": "github:amcharts/ammap3",
|
||||
|
|
|
|||
|
|
@ -1,17 +1,10 @@
|
|||
import './app.loader.ts';
|
||||
|
||||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
|
||||
import {Pages} from './pages';
|
||||
import {Login} from './pages/login';
|
||||
import {Register} from './pages/register';
|
||||
import {AppState} from './app.state';
|
||||
import {BaThemeConfigProvider, BaThemeConfig} from './theme';
|
||||
import {BaThemeRun} from './theme/directives';
|
||||
import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from './theme/services';
|
||||
|
||||
import {layoutPaths} from './theme/theme.constants';
|
||||
import {Component, ViewEncapsulation} from "@angular/core";
|
||||
import {AppState} from "./app.state";
|
||||
import {BaThemeConfigProvider, BaThemeConfig} from "./theme";
|
||||
import {BaThemeRun} from "./theme/directives";
|
||||
import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from "./theme/services";
|
||||
import {layoutPaths} from "./theme/theme.constants";
|
||||
|
||||
/*
|
||||
* App Component
|
||||
|
|
@ -31,31 +24,6 @@ import {layoutPaths} from './theme/theme.constants';
|
|||
</main>
|
||||
`
|
||||
})
|
||||
@RouteConfig([
|
||||
{
|
||||
path: '/pages/...',
|
||||
name: 'Pages',
|
||||
component: Pages,
|
||||
useAsDefault: true
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: Register
|
||||
},
|
||||
// handle any non-registered route
|
||||
// and simply redirects back to dashboard page
|
||||
// you can specify any customer 404 page while it's not built in ito ng2-admin
|
||||
{
|
||||
path: '/**',
|
||||
redirectTo: ['Pages']
|
||||
}
|
||||
])
|
||||
export class App {
|
||||
|
||||
isMenuCollapsed:boolean = false;
|
||||
|
|
|
|||
|
|
@ -1,173 +0,0 @@
|
|||
export const menuItems = [
|
||||
{
|
||||
title: 'Dashboard',
|
||||
component: 'Dashboard',
|
||||
icon: 'ion-android-home',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 0
|
||||
},
|
||||
{
|
||||
title: 'Editors',
|
||||
component: 'Editors',
|
||||
icon: 'ion-edit',
|
||||
order: 100,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'CKEditor',
|
||||
component: 'Ckeditor'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Charts',
|
||||
component: 'Charts',
|
||||
icon: 'ion-stats-bars',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 200,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Chartist.Js',
|
||||
component: 'ChartistJs',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'UI Features',
|
||||
component: 'Ui',
|
||||
icon: 'ion-android-laptop',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 300,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Typography',
|
||||
component: 'Typography',
|
||||
},
|
||||
{
|
||||
title: 'Buttons',
|
||||
component: 'Buttons',
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
component: 'Icons',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
component: 'Grid',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Form Elements',
|
||||
component: 'Forms',
|
||||
icon: 'ion-compose',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 400,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Form Inputs',
|
||||
component: 'Inputs',
|
||||
},
|
||||
{
|
||||
title: 'Form Layouts',
|
||||
component: 'Layouts',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Tables',
|
||||
component: 'Tables',
|
||||
icon: 'ion-grid',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 500,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Basic Tables',
|
||||
component: 'BasicTables',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Maps',
|
||||
component: 'Maps',
|
||||
icon: 'ion-ios-location-outline',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 600,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Google Maps',
|
||||
component: 'GoogleMaps',
|
||||
},
|
||||
{
|
||||
title: 'Leaflet Maps',
|
||||
component: 'LeafletMaps',
|
||||
},
|
||||
{
|
||||
title: 'Bubble Maps',
|
||||
component: 'BubbleMaps',
|
||||
},
|
||||
{
|
||||
title: 'Line Maps',
|
||||
component: 'LineMaps',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Pages',
|
||||
icon: 'ion-document',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 650,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Login',
|
||||
url: '#/login',
|
||||
},
|
||||
{
|
||||
title: 'Register',
|
||||
url: '#/register',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Menu Level 1',
|
||||
icon: 'ion-ios-more',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 700,
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Menu Level 1.1',
|
||||
url: '#',
|
||||
disabled: true,
|
||||
selected: false,
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
title: 'Menu Level 1.2',
|
||||
url: '#',
|
||||
subMenu: [{
|
||||
title: 'Menu Level 1.2.1',
|
||||
url: '#',
|
||||
disabled: true,
|
||||
selected: false,
|
||||
expanded: false
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'External Link',
|
||||
url: 'http://akveo.com',
|
||||
icon: 'ion-android-exit',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 800,
|
||||
target: '_blank'
|
||||
}
|
||||
];
|
||||
18
src/app/app.routes.ts
Normal file
18
src/app/app.routes.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import {provideRouter, RouterConfig} from '@angular/router';
|
||||
import {LoginRoutes} from "./pages/login/login.routes";
|
||||
import {PagesRoutes} from "./pages/pages.routes";
|
||||
import {RegisterRoutes} from "./pages/register/register.routes";
|
||||
|
||||
export const routes:RouterConfig = [
|
||||
...LoginRoutes,
|
||||
...RegisterRoutes,
|
||||
...PagesRoutes,
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: '/pages/dashboard'
|
||||
},
|
||||
];
|
||||
|
||||
export const APP_ROUTER_PROVIDERS = [
|
||||
provideRouter(routes)
|
||||
];
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
import {Component} from "@angular/core";
|
||||
|
||||
// import {ChartJs} from "./components/chartJs";
|
||||
import {ChartistJs} from "./components/chartistJs/chartistJs.component";
|
||||
|
||||
@Component({
|
||||
selector: 'maps',
|
||||
|
|
@ -11,19 +9,6 @@ import {ChartistJs} from "./components/chartistJs/chartistJs.component";
|
|||
styles: [],
|
||||
template: `<router-outlet></router-outlet>`
|
||||
})
|
||||
@RouteConfig([
|
||||
{
|
||||
name: 'ChartistJs',
|
||||
component: ChartistJs,
|
||||
path: '/chartist-js',
|
||||
useAsDefault: true,
|
||||
},
|
||||
// {
|
||||
// name: 'ChartJs',
|
||||
// component: ChartJs,
|
||||
// path: '/chart-js',
|
||||
// },
|
||||
])
|
||||
export class Charts {
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,9 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
|
||||
import {Ckeditor} from "./components/ckeditor";
|
||||
|
||||
@Component({
|
||||
selector: 'editors',
|
||||
template: `<router-outlet></router-outlet>`
|
||||
})
|
||||
|
||||
@RouteConfig([
|
||||
{
|
||||
name: 'Ckeditor',
|
||||
component: Ckeditor,
|
||||
path: '/ckeditor',
|
||||
useAsDefault: true
|
||||
}
|
||||
])
|
||||
export class Editors {
|
||||
constructor() {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
|
||||
import {Inputs} from './components/inputs';
|
||||
import {Layouts} from './components/layouts';
|
||||
|
||||
@Component({
|
||||
selector: 'forms',
|
||||
|
|
@ -11,19 +7,6 @@ import {Layouts} from './components/layouts';
|
|||
styles: [],
|
||||
template: `<router-outlet></router-outlet>`
|
||||
})
|
||||
@RouteConfig([
|
||||
{
|
||||
name: 'Inputs',
|
||||
component: Inputs,
|
||||
path: '/inputs',
|
||||
useAsDefault: true
|
||||
},
|
||||
{
|
||||
name: 'Layouts',
|
||||
component: Layouts,
|
||||
path: '/layouts',
|
||||
}
|
||||
])
|
||||
export class Forms {
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="auth-main">
|
||||
<div class="auth-block">
|
||||
<h1>Sign in to ng2-admin</h1>
|
||||
<a [routerLink]="['Register']" class="auth-link">New to ng2-admin? Sign up!</a>
|
||||
<a [routerLink]="['/register']" class="auth-link">New to ng2-admin? Sign up!</a>
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
|
||||
<div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
|
||||
|
|
|
|||
10
src/app/pages/login/login.routes.ts
Normal file
10
src/app/pages/login/login.routes.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import {RouterConfig} from '@angular/router';
|
||||
import {Login} from './login.component';
|
||||
|
||||
//noinspection TypeScriptValidateTypes
|
||||
export const LoginRoutes: RouterConfig = [
|
||||
{
|
||||
path: 'login',
|
||||
component: Login
|
||||
}
|
||||
];
|
||||
|
|
@ -1,10 +1,4 @@
|
|||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
|
||||
import {GoogleMaps} from './components/googleMaps';
|
||||
import {LeafletMaps} from "./components/leafletMaps";
|
||||
import {BubbleMaps} from "./components/bubbleMaps";
|
||||
import {LineMaps} from "./components/lineMaps";
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'maps',
|
||||
|
|
@ -13,29 +7,6 @@ import {LineMaps} from "./components/lineMaps";
|
|||
styles: [],
|
||||
template: `<router-outlet></router-outlet>`
|
||||
})
|
||||
@RouteConfig([
|
||||
{
|
||||
name: 'GoogleMaps',
|
||||
component: GoogleMaps,
|
||||
path: '/google-maps',
|
||||
useAsDefault: true
|
||||
},
|
||||
{
|
||||
name: 'LeafletMaps',
|
||||
component: LeafletMaps,
|
||||
path: '/leaflet-maps',
|
||||
},
|
||||
{
|
||||
name: 'BubbleMaps',
|
||||
component: BubbleMaps,
|
||||
path: '/bubble-maps',
|
||||
},
|
||||
{
|
||||
name: 'LineMaps',
|
||||
component: LineMaps,
|
||||
path: '/line-maps',
|
||||
},
|
||||
])
|
||||
export class Maps {
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,6 @@
|
|||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
|
||||
import {BaPageTop, BaContentTop, BaSidebar, BaBackTop} from '../theme/components';
|
||||
|
||||
import {Dashboard} from './dashboard';
|
||||
import {Ui} from './ui';
|
||||
import {Maps} from './maps';
|
||||
import {Charts} from './charts';
|
||||
import {Forms} from './forms';
|
||||
import {Tables} from './tables';
|
||||
import {Editors} from "./editors";
|
||||
|
||||
@Component({
|
||||
selector: 'pages',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
|
|
@ -40,44 +30,6 @@ import {Editors} from "./editors";
|
|||
<ba-back-top position="200"></ba-back-top>
|
||||
`
|
||||
})
|
||||
@RouteConfig([
|
||||
{
|
||||
name: 'Editors',
|
||||
component: Editors,
|
||||
path: '/editors/...',
|
||||
},
|
||||
{
|
||||
name: 'Dashboard',
|
||||
component: Dashboard,
|
||||
path: '/dashboard',
|
||||
useAsDefault: true,
|
||||
},
|
||||
{
|
||||
name: 'Ui',
|
||||
component: Ui,
|
||||
path: '/ui/...',
|
||||
},
|
||||
{
|
||||
name: 'Maps',
|
||||
component: Maps,
|
||||
path: '/maps/...',
|
||||
},
|
||||
{
|
||||
name: 'Charts',
|
||||
component: Charts,
|
||||
path: '/charts/...',
|
||||
},
|
||||
{
|
||||
name: 'Forms',
|
||||
component: Forms,
|
||||
path: '/forms/...',
|
||||
},
|
||||
{
|
||||
name: 'Tables',
|
||||
component: Tables,
|
||||
path: '/tables/...',
|
||||
}
|
||||
])
|
||||
export class Pages {
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
307
src/app/pages/pages.routes.ts
Normal file
307
src/app/pages/pages.routes.ts
Normal file
|
|
@ -0,0 +1,307 @@
|
|||
import {RouterConfig} from '@angular/router';
|
||||
import {Dashboard} from './dashboard/dashboard.component';
|
||||
import {Charts} from './charts/charts.component';
|
||||
import {ChartistJs} from './charts/components/chartistJs/chartistJs.component';
|
||||
import {Pages} from './pages.component';
|
||||
import {Ui} from './ui/ui.component';
|
||||
import {Typography} from './ui/components/typography/typography.component';
|
||||
import {Buttons} from './ui/components/buttons/buttons.component';
|
||||
import {Icons} from './ui/components/incons/icons.component';
|
||||
import {Grid} from './ui/components/grid/grid.component';
|
||||
import {Forms} from './forms/forms.component';
|
||||
import {Inputs} from './forms/components/inputs/inputs.component';
|
||||
import {Layouts} from './forms/components/layouts/layouts.component';
|
||||
import {BasicTables} from './tables/components/basicTables/basicTables.component';
|
||||
import {Tables} from './tables/tables.component';
|
||||
import {Maps} from './maps/maps.component';
|
||||
import {GoogleMaps} from './maps/components/googleMaps/googleMaps.component';
|
||||
import {LeafletMaps} from './maps/components/leafletMaps/leafletMaps.component';
|
||||
import {BubbleMaps} from './maps/components/bubbleMaps/bubbleMaps.component';
|
||||
import {LineMaps} from './maps/components/lineMaps/lineMaps.component';
|
||||
import {Editors} from './editors/editors.component';
|
||||
import {Ckeditor} from './editors/components/ckeditor/ckeditor.component';
|
||||
|
||||
//noinspection TypeScriptValidateTypes
|
||||
export const PagesRoutes:RouterConfig = [
|
||||
{
|
||||
path: 'pages',
|
||||
component: Pages,
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: Dashboard,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Dashboard',
|
||||
icon: 'ion-android-home',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'editors',
|
||||
component: Editors,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Editors',
|
||||
icon: 'ion-edit',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 100,
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'ckeditor',
|
||||
component: Ckeditor,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'CKEditor',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'charts',
|
||||
component: Charts,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Charts',
|
||||
icon: 'ion-stats-bars',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 200,
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'chartist-js',
|
||||
component: ChartistJs,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Chartist.Js',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'ui',
|
||||
component: Ui,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'UI Features',
|
||||
icon: 'ion-android-laptop',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 300,
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'typography',
|
||||
component: Typography,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Typography',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
component: Buttons,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Buttons',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'icons',
|
||||
component: Icons,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Icons',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'grid',
|
||||
component: Grid,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Grid',
|
||||
}
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'forms',
|
||||
component: Forms,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Form Elements',
|
||||
icon: 'ion-compose',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 400,
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'inputs',
|
||||
component: Inputs,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Form Inputs',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'layouts',
|
||||
component: Layouts,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Form Layouts',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'tables',
|
||||
component: Tables,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Tables',
|
||||
icon: 'ion-grid',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 500,
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'basictables',
|
||||
component: BasicTables,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Basic Tables',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'maps',
|
||||
component: Maps,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Maps',
|
||||
icon: 'ion-ios-location-outline',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 600,
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'googlemaps',
|
||||
component: GoogleMaps,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Google Maps',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'leafletmaps',
|
||||
component: LeafletMaps,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Leaflet Maps',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'bubblemaps',
|
||||
component: BubbleMaps,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Bubble Maps',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'linemaps',
|
||||
component: LineMaps,
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Line Maps',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Menu Level 1',
|
||||
icon: 'ion-ios-more',
|
||||
selected: false,
|
||||
expanded: false,
|
||||
order: 700,
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Menu Level 1.1',
|
||||
url: '#'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Menu Level 1.2',
|
||||
url: '#'
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
menu: {
|
||||
title: 'Menu Level 1.2.1',
|
||||
url: '#'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
data: {
|
||||
menu: {
|
||||
title: 'External Link',
|
||||
url: 'http://akveo.com',
|
||||
icon: 'ion-android-exit',
|
||||
order: 800,
|
||||
target: '_blank'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="auth-main">
|
||||
<div class="auth-block">
|
||||
<h1>Sign up to ng2-admin</h1>
|
||||
<a [routerLink]="['Login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
|
||||
<a [routerLink]="['/login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
|
||||
<div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
|
||||
|
|
|
|||
10
src/app/pages/register/register.routes.ts
Normal file
10
src/app/pages/register/register.routes.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import {RouterConfig} from '@angular/router';
|
||||
import {Register} from './register.component';
|
||||
|
||||
//noinspection TypeScriptValidateTypes
|
||||
export const RegisterRoutes: RouterConfig = [
|
||||
{
|
||||
path: 'register',
|
||||
component: Register
|
||||
}
|
||||
];
|
||||
|
|
@ -1,7 +1,4 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
|
||||
import {BasicTables} from './components/basicTables';
|
||||
|
||||
@Component({
|
||||
selector: 'forms',
|
||||
|
|
@ -10,14 +7,6 @@ import {BasicTables} from './components/basicTables';
|
|||
styles: [],
|
||||
template: `<router-outlet></router-outlet>`
|
||||
})
|
||||
@RouteConfig([
|
||||
{
|
||||
name: 'BasicTables',
|
||||
component: BasicTables,
|
||||
path: '/basic',
|
||||
useAsDefault: true
|
||||
}
|
||||
])
|
||||
export class Tables {
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {RouteConfig} from '@angular/router-deprecated';
|
||||
|
||||
import {Typography} from './components/typography';
|
||||
import {Buttons} from './components/buttons';
|
||||
import {Icons} from './components/incons';
|
||||
import {Grid} from './components/grid';
|
||||
|
||||
@Component({
|
||||
selector: 'ui',
|
||||
|
|
@ -13,29 +7,6 @@ import {Grid} from './components/grid';
|
|||
styles: [],
|
||||
template: `<router-outlet></router-outlet>`
|
||||
})
|
||||
@RouteConfig([
|
||||
{
|
||||
name: 'Typography',
|
||||
component: Typography,
|
||||
path: '/typography',
|
||||
useAsDefault: true
|
||||
},
|
||||
{
|
||||
name: 'Buttons',
|
||||
component: Buttons,
|
||||
path: '/buttons',
|
||||
},
|
||||
{
|
||||
name: 'Icons',
|
||||
component: Icons,
|
||||
path: '/icons',
|
||||
},
|
||||
{
|
||||
name: 'Grid',
|
||||
component: Grid,
|
||||
path: '/grid',
|
||||
}
|
||||
])
|
||||
export class Ui {
|
||||
|
||||
constructor() {
|
||||
|
|
|
|||
71
src/app/theme/components/baMenu/baMenu.component.ts
Normal file
71
src/app/theme/components/baMenu/baMenu.component.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
|
||||
import {Router, RouterConfig, NavigationEnd} from '@angular/router';
|
||||
import {Subscription} from 'rxjs/Rx';
|
||||
|
||||
import {BaSlimScroll} from '../../../theme/directives';
|
||||
import {BaMenuService} from './baMenu.service';
|
||||
import {BaMenuItem} from './components/baMenuItem';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-menu',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./baMenu.scss')],
|
||||
template: require('./baMenu.html'),
|
||||
providers: [BaMenuService],
|
||||
directives: [BaMenuItem, BaSlimScroll]
|
||||
})
|
||||
export class BaMenu {
|
||||
|
||||
@Input() menuRoutes:RouterConfig = [];
|
||||
@Input() sidebarCollapsed:boolean = false;
|
||||
@Input() menuHeight:number;
|
||||
|
||||
@Output() expandMenu = new EventEmitter<any>();
|
||||
|
||||
public menuItems:any[];
|
||||
public showHoverElem:boolean;
|
||||
public hoverElemHeight:number;
|
||||
public hoverElemTop:number;
|
||||
protected _onRouteChange:Subscription;
|
||||
public outOfArea:number = -200;
|
||||
|
||||
constructor(private _router:Router, private _service:BaMenuService) {
|
||||
|
||||
this._onRouteChange = this._router.events.subscribe((event) => {
|
||||
if (this.menuItems && event instanceof NavigationEnd) {
|
||||
this.menuItems = this._service.selectMenuItem(this.menuItems);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnInit():void {
|
||||
this.menuItems = this._service.convertRoutesToMenus(this.menuRoutes);
|
||||
}
|
||||
|
||||
public ngOnDestroy():void {
|
||||
this._onRouteChange.unsubscribe();
|
||||
}
|
||||
|
||||
public hoverItem($event):void {
|
||||
this.showHoverElem = true;
|
||||
this.hoverElemHeight = $event.currentTarget.clientHeight;
|
||||
// TODO: get rid of magic 66 constant
|
||||
this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
|
||||
}
|
||||
|
||||
public toggleSubMenu($event):boolean {
|
||||
var submenu = jQuery($event.currentTarget).next();
|
||||
|
||||
if (this.sidebarCollapsed) {
|
||||
this.expandMenu.emit(null);
|
||||
if (!$event.item.expanded) {
|
||||
$event.item.expanded = true;
|
||||
}
|
||||
} else {
|
||||
$event.item.expanded = !$event.item.expanded;
|
||||
submenu.slideToggle();
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
11
src/app/theme/components/baMenu/baMenu.html
Normal file
11
src/app/theme/components/baMenu/baMenu.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
|
||||
<ul id="al-sidebar-list" class="al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
|
||||
<ba-menu-item
|
||||
[menuItem]="item"
|
||||
(itemHover)="hoverItem($event)"
|
||||
(toggleSubMenu)="toggleSubMenu($event)"
|
||||
*ngFor="let item of menuItems"></ba-menu-item>
|
||||
</ul>
|
||||
<div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
|
||||
[ngClass]="{'show-hover-elem': showHoverElem }"></div>
|
||||
</aside>
|
||||
1
src/app/theme/components/baMenu/baMenu.scss
Normal file
1
src/app/theme/components/baMenu/baMenu.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import '../../sass/conf/conf';
|
||||
103
src/app/theme/components/baMenu/baMenu.service.ts
Normal file
103
src/app/theme/components/baMenu/baMenu.service.ts
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {Router, UrlTree, RouterConfig} from '@angular/router';
|
||||
|
||||
@Injectable()
|
||||
export class BaMenuService {
|
||||
|
||||
constructor(private _router:Router) {
|
||||
}
|
||||
|
||||
public convertRoutesToMenus(routes:RouterConfig):any[] {
|
||||
let items = this._convertArrayToItems(routes);
|
||||
return this._skipEmpty(items);
|
||||
}
|
||||
|
||||
public selectMenuItem(menuItems:any[]):any[] {
|
||||
let items = [];
|
||||
menuItems.forEach((item) => {
|
||||
this._selectItem(item);
|
||||
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children = this.selectMenuItem(item.children);
|
||||
}
|
||||
items.push(item);
|
||||
});
|
||||
return items;
|
||||
}
|
||||
|
||||
protected _skipEmpty(items:any[]):any[] {
|
||||
let menu = [];
|
||||
items.forEach((item) => {
|
||||
let menuItem;
|
||||
if (item.skip) {
|
||||
if (item.children && item.children.length > 0) {
|
||||
menuItem = item.children;
|
||||
}
|
||||
} else {
|
||||
menuItem = item;
|
||||
}
|
||||
|
||||
if (menuItem) {
|
||||
menu.push(menuItem);
|
||||
}
|
||||
});
|
||||
|
||||
return [].concat.apply([], menu);
|
||||
}
|
||||
|
||||
protected _convertArrayToItems(routes:any[], parent?:any):any[] {
|
||||
let items = [];
|
||||
routes.forEach((route) => {
|
||||
items.push(this._convertObjectToItem(route, parent));
|
||||
});
|
||||
return items;
|
||||
}
|
||||
|
||||
protected _convertObjectToItem(object, parent?:any):any {
|
||||
let item:any = {};
|
||||
if (object.data && object.data.menu) {
|
||||
// this is a menu object
|
||||
item = object.data.menu;
|
||||
item.route = object;
|
||||
delete item.route.data.menu;
|
||||
} else {
|
||||
item.route = object;
|
||||
item.skip = true;
|
||||
}
|
||||
|
||||
// we have to collect all paths to correctly build the url then
|
||||
item.route.paths = parent && parent.route && parent.route.paths ? parent.route.paths.slice(0) : [];
|
||||
item.route.paths.push(item.route.path);
|
||||
|
||||
if (object.children && object.children.length > 0) {
|
||||
item.children = this._convertArrayToItems(object.children, item);
|
||||
}
|
||||
|
||||
let prepared = this._prepareItem(item);
|
||||
|
||||
// if current item is selected or expanded - then parent is expanded too
|
||||
if ((prepared.selected || prepared.expanded) && parent) {
|
||||
parent.expanded = true;
|
||||
}
|
||||
|
||||
return prepared;
|
||||
}
|
||||
|
||||
protected _prepareItem(object:any):any {
|
||||
if (!object.skip) {
|
||||
|
||||
let itemUrl = this._router.serializeUrl(this._router.createUrlTree(object.route.paths));
|
||||
object.url = object.url ? object.url : '/#' + itemUrl;
|
||||
|
||||
object.target = object.target || '';
|
||||
return this._selectItem(object);
|
||||
}
|
||||
|
||||
return object;
|
||||
}
|
||||
|
||||
protected _selectItem(object:any):any {
|
||||
object.selected = object.url == ('/#' + this._router.url);
|
||||
return object;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-menu-item',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./baMenuItem.scss')],
|
||||
template: require('./baMenuItem.html'),
|
||||
providers: [],
|
||||
directives: [BaMenuItem]
|
||||
})
|
||||
export class BaMenuItem {
|
||||
|
||||
@Input() menuItem:any;
|
||||
@Input() child:boolean = false;
|
||||
|
||||
@Output() itemHover = new EventEmitter<any>();
|
||||
@Output() toggleSubMenu = new EventEmitter<any>();
|
||||
|
||||
public onHoverItem($event):void {
|
||||
this.itemHover.emit($event);
|
||||
}
|
||||
|
||||
public onToggleSubMenu($event, item):boolean {
|
||||
$event.item = item;
|
||||
this.toggleSubMenu.emit($event);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<li [ngClass]="{'al-sidebar-list-item': !child, 'ba-sidebar-sublist-item': child, 'selected': menuItem.selected && !menuItem.expanded, 'with-sub-menu': menuItem.children, 'ba-sidebar-item-expanded': menuItem.expanded}">
|
||||
|
||||
|
||||
<a *ngIf="!menuItem.children" (mouseenter)="onHoverItem($event, item)" [href]="menuItem.url" [target]="menuItem.target" class="al-sidebar-list-link">
|
||||
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
|
||||
</a>
|
||||
|
||||
<a *ngIf="menuItem.children" (mouseenter)="onHoverItem($event, item)" (click)="onToggleSubMenu($event, menuItem)" class="al-sidebar-list-link">
|
||||
<i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
|
||||
<b class="fa fa-angle-down" [ngClass]="{'fa-angle-up': menuItem.expanded}"></b>
|
||||
</a>
|
||||
|
||||
<ul *ngIf="menuItem.children" class="al-sidebar-sublist" [ngClass]="{'slide-right': menuItem.slideRight}">
|
||||
<ba-menu-item [menuItem]="subItem"
|
||||
[child]="true"
|
||||
(itemHover)="onHoverItem($event)"
|
||||
(toggleSubMenu)="onToggleSubMenu($event, subItem)"
|
||||
*ngFor="let subItem of menuItem.children"></ba-menu-item>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import '../../../../sass/conf/conf';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './baMenuItem.component';
|
||||
1
src/app/theme/components/baMenu/index.ts
Normal file
1
src/app/theme/components/baMenu/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './baMenu.component.ts';
|
||||
|
|
@ -1,59 +1,42 @@
|
|||
import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
|
||||
import {Router} from '@angular/router-deprecated';
|
||||
|
||||
import {AppState} from '../../../app.state';
|
||||
import {layoutSizes} from '../../../theme';
|
||||
import {BaSlimScroll} from '../../../theme/directives';
|
||||
import {BaSidebarService} from './baSidebar.service';
|
||||
import {BaMenu} from '../baMenu';
|
||||
import {routes} from '../../../../app/app.routes';
|
||||
|
||||
@Component({
|
||||
selector: 'ba-sidebar',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
styles: [require('./baSidebar.scss')],
|
||||
template: require('./baSidebar.html'),
|
||||
providers: [BaSidebarService],
|
||||
directives: [BaSlimScroll]
|
||||
providers: [],
|
||||
directives: [BaMenu]
|
||||
})
|
||||
export class BaSidebar {
|
||||
|
||||
public menuItems:Array<any>;
|
||||
// here we declare which routes we want to use as a menu in our sidebar
|
||||
public routes = routes;
|
||||
|
||||
public menuHeight:number;
|
||||
public isMenuCollapsed:boolean = false;
|
||||
|
||||
public showHoverElem:boolean;
|
||||
public hoverElemHeight:number;
|
||||
public hoverElemTop:number;
|
||||
|
||||
public outOfArea:number = -200;
|
||||
|
||||
public isMenuShouldCollapsed:boolean = false;
|
||||
protected _onRouteChange;
|
||||
|
||||
constructor(private _elementRef:ElementRef,
|
||||
private _router:Router,
|
||||
private _sidebarService:BaSidebarService,
|
||||
private _state:AppState) {
|
||||
|
||||
this.menuItems = this._sidebarService.getMenuItems();
|
||||
this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem());
|
||||
constructor(private _elementRef:ElementRef, private _state:AppState) {
|
||||
|
||||
this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
|
||||
this.isMenuCollapsed = isCollapsed;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public ngOnInit():void {
|
||||
if (this._shouldMenuCollapse()) {
|
||||
this.menuCollapse();
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnDestroy():void {
|
||||
this._onRouteChange.unsubscribe();
|
||||
}
|
||||
|
||||
public ngAfterViewInit():void {
|
||||
this.updateSidebarHeight();
|
||||
setTimeout(() => this.updateSidebarHeight());
|
||||
}
|
||||
|
||||
@HostListener('window:resize')
|
||||
|
|
@ -81,45 +64,12 @@ export class BaSidebar {
|
|||
this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
|
||||
}
|
||||
|
||||
public hoverItem($event):void {
|
||||
this.showHoverElem = true;
|
||||
this.hoverElemHeight = $event.currentTarget.clientHeight;
|
||||
// TODO: get rid of magic 66 constant
|
||||
this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
|
||||
}
|
||||
|
||||
public updateSidebarHeight():void {
|
||||
// TODO: get rid of magic 84 constant
|
||||
this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
|
||||
}
|
||||
|
||||
public toggleSubMenu($event, item):boolean {
|
||||
var submenu = jQuery($event.currentTarget).next();
|
||||
|
||||
if (this.isMenuCollapsed) {
|
||||
this.menuExpand();
|
||||
if (!item.expanded) {
|
||||
item.expanded = true;
|
||||
}
|
||||
} else {
|
||||
item.expanded = !item.expanded;
|
||||
submenu.slideToggle();
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
private _shouldMenuCollapse():boolean {
|
||||
return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
|
||||
}
|
||||
|
||||
private _selectMenuItem():void {
|
||||
|
||||
let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems);
|
||||
this._state.notifyDataChanged('menu.activeLink', currentMenu);
|
||||
// hide menu after natigation on mobile devises
|
||||
if (this._shouldMenuCollapse()) {
|
||||
this.menuCollapse();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,55 +1,6 @@
|
|||
<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
|
||||
<ul id="al-sidebar-list" class="al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
|
||||
<li *ngFor="let item of menuItems" class="al-sidebar-list-item"
|
||||
[ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
|
||||
|
||||
|
||||
<a *ngIf="!item.component && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
</a>
|
||||
<a *ngIf="item.component && !item.subMenu" [routerLink]="[item.component]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
</a>
|
||||
|
||||
<a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)"
|
||||
class="al-sidebar-list-link">
|
||||
<i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
|
||||
<b class="fa fa-angle-down"
|
||||
*ngIf="item.subMenu"></b>
|
||||
</a>
|
||||
|
||||
<ul *ngIf="item.subMenu" class="al-sidebar-sublist"
|
||||
[ngClass]="{'slide-right': item.slideRight}">
|
||||
<li *ngFor="let subitem of item.subMenu" class="ba-sidebar-sublist-item"
|
||||
[ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
|
||||
<a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
|
||||
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
|
||||
<b class="fa" *ngIf="subitem.subMenu"
|
||||
[ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
|
||||
</a>
|
||||
<ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
|
||||
[ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
|
||||
<li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
|
||||
[ngClass]="{selected: subitem.selected}">
|
||||
<a *ngIf="!item.component" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
|
||||
{{ subSubitem.title }}</a>
|
||||
<a *ngIf="item.component" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.component, subitem.component, subSubitem.component]">
|
||||
{{ subSubitem.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a *ngIf="!item.component && !subitem.subMenu" [attr.href]="subitem.url || ''"
|
||||
(mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
|
||||
{{ subitem.title}}
|
||||
</a>
|
||||
<a *ngIf="item.component && !subitem.subMenu" [routerLink]="[item.component, subitem.component]"
|
||||
(mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
|
||||
{{ subitem.title}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
|
||||
[ngClass]="{'show-hover-elem': showHoverElem }"></div>
|
||||
<ba-menu [menuRoutes]="routes"
|
||||
[menuHeight]="menuHeight"
|
||||
[sidebarCollapsed]="isMenuCollapsed"
|
||||
(expandMenu)="menuExpand()"></ba-menu>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ a.al-sidebar-list-link {
|
|||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
> li {
|
||||
> ba-menu-item > li {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {menuItems} from '../../../app.menu';
|
||||
|
||||
@Injectable()
|
||||
export class BaSidebarService {
|
||||
|
||||
private _router;
|
||||
|
||||
public getMenuItems():Array<Object> {
|
||||
return menuItems;
|
||||
}
|
||||
|
||||
public setRouter(router): BaSidebarService {
|
||||
this._router = router;
|
||||
return this;
|
||||
}
|
||||
|
||||
public selectMenuItem(items:Array<any>) {
|
||||
let currentMenu;
|
||||
|
||||
let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
|
||||
|
||||
items.forEach((menu: any) => {
|
||||
|
||||
this._selectItem([menu.component], menu);
|
||||
assignCurrent(menu);
|
||||
|
||||
if (menu.subMenu) {
|
||||
menu.subMenu.forEach((subMenu) => {
|
||||
this._selectItem([menu.component, subMenu.component], subMenu, menu);
|
||||
assignCurrent(subMenu);
|
||||
});
|
||||
}
|
||||
});
|
||||
return currentMenu;
|
||||
}
|
||||
|
||||
private _selectItem(instructions, item, parentMenu = null) {
|
||||
let route = this._generateRoute(instructions);
|
||||
item.selected = !item.disabled && this._isCurrent(route);
|
||||
if (parentMenu) {
|
||||
parentMenu.expanded = parentMenu.expanded || item.selected;
|
||||
}
|
||||
}
|
||||
|
||||
private _isCurrent(route) {
|
||||
return route ? this._router.isRouteActive(route) : false;
|
||||
}
|
||||
|
||||
private _generateRoute(instructions) {
|
||||
return instructions.filter(i => typeof i !== 'undefined').length > 0 ? this._router.generate(instructions) : null;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
export * from './baPageTop';
|
||||
export * from './baMsgCenter';
|
||||
export * from './baSidebar';
|
||||
export * from './baMenu';
|
||||
export * from './baContentTop';
|
||||
export * from './baCard';
|
||||
export * from './baAmChart';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import {PLATFORM_DIRECTIVES} from '@angular/core';
|
||||
|
||||
// Angular 2 Router
|
||||
import {ROUTER_DIRECTIVES} from '@angular/router-deprecated';
|
||||
import {ROUTER_DIRECTIVES} from '@angular/router';
|
||||
// Angular 2 forms
|
||||
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import {FORM_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/c
|
|||
|
||||
// Angular 2 Http
|
||||
import {HTTP_PROVIDERS} from '@angular/http';
|
||||
// Angular 2 Router
|
||||
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
|
||||
import {APP_ROUTER_PROVIDERS} from '../../app/app.routes';
|
||||
|
||||
|
||||
// Angular 2 forms
|
||||
import {disableDeprecatedForms, provideForms} from '@angular/forms';
|
||||
|
|
@ -22,8 +22,9 @@ export const APPLICATION_PROVIDERS = [
|
|||
disableDeprecatedForms(),
|
||||
provideForms(),
|
||||
...HTTP_PROVIDERS,
|
||||
...ROUTER_PROVIDERS,
|
||||
...APP_ROUTER_PROVIDERS,
|
||||
{provide: LocationStrategy, useClass: HashLocationStrategy}
|
||||
{provide: LocationStrategy, useClass: HashLocationStrategy }
|
||||
];
|
||||
|
||||
export const PROVIDERS = [
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import '@angular/platform-browser-dynamic';
|
|||
import '@angular/core';
|
||||
import '@angular/common';
|
||||
import '@angular/http';
|
||||
import '@angular/router-deprecated';
|
||||
import '@angular/router';
|
||||
|
||||
// RxJS
|
||||
import 'rxjs/add/operator/map';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue