feat(sidebar): add menu sidebar updating (#548)

* feat(sidebar): add menu sidebar updating

Relates to issue #236

* refactor(sidebar): move menu initialization into app component

Also fix BaMenuService provider (move it into module providers from component providers)

* refactor(sidebar): move baMenuService to services directory

src/app/app.component.ts

@@ -1,10 +1,14 @@
+import { Routes } from '@angular/router';
 import './app.loader.ts';
 import { Component, ViewEncapsulation, ViewContainerRef } from '@angular/core';
 import { GlobalState } from './global.state';
 import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services';
 import { layoutPaths } from './theme/theme.constants';
 import { BaThemeConfig } from './theme/theme.config';
+import { BaMenuService } from './theme';
 import {ComponentsHelper } from 'ng2-bootstrap';
+
+import { MENU } from './app.menu';
 /*
  * App Component
  * Top Level Component
@@ -28,8 +32,11 @@ export class App {
               private _imageLoader: BaImageLoaderService,
               private _spinner: BaThemeSpinner,
               private _config: BaThemeConfig,
+              private _menuService: BaMenuService,
               private viewContainerRef: ViewContainerRef) {
 
+    this._menuService.updateMenuByRoutes(<Routes>MENU);
+
     this._fixModals();
 
     this._loadImages();

src/app/theme/components/baMenu/baMenu.component.ts

@@ -2,25 +2,24 @@ import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angula
 import {Router, Routes, NavigationEnd} from '@angular/router';
 import {Subscription} from 'rxjs/Rx';
 
-import {BaMenuService} from './baMenu.service';
+import { BaMenuService } from '../../services';
 import {GlobalState} from '../../../global.state';
 
 @Component({
   selector: 'ba-menu',
   encapsulation: ViewEncapsulation.None,
   styles: [require('./baMenu.scss')],
-  template: require('./baMenu.html'),
-  providers: [BaMenuService]
+  template: require('./baMenu.html')
 })
 export class BaMenu {
 
-  @Input() menuRoutes:Routes = [];
   @Input() sidebarCollapsed:boolean = false;
   @Input() menuHeight:number;
 
   @Output() expandMenu = new EventEmitter<any>();
 
   public menuItems: any[];
+  protected _menuItemsSub: Subscription;
   public showHoverElem:boolean;
   public hoverElemHeight:number;
   public hoverElemTop:number;
@@ -39,6 +38,13 @@ export class BaMenu {
         }
       }
     });
+
+    this._menuItemsSub = this._service.menuItems.subscribe(this.updateMenu.bind(this));
+  }
+
+  public updateMenu(newMenuItems) {
+    this.menuItems = newMenuItems;
+    this.selectMenuAndNotify();
   }
 
   public selectMenuAndNotify():void {
@@ -49,11 +55,11 @@ export class BaMenu {
   }
 
   public ngOnInit():void {
-    this.menuItems = this._service.convertRoutesToMenus(this.menuRoutes);
   }
 
   public ngOnDestroy():void {
     this._onRouteChange.unsubscribe();
+    this._menuItemsSub.unsubscribe();
   }
 
   public hoverItem($event):void {

src/app/theme/components/baSidebar/baSidebar.component.ts

@@ -1,8 +1,6 @@
 import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
 import {GlobalState} from '../../../global.state';
 import {layoutSizes} from '../../../theme';
-import {MENU} from '../../../../app/app.menu';
-import * as _ from 'lodash';
 
 @Component({
   selector: 'ba-sidebar',
@@ -11,10 +9,6 @@ import * as _ from 'lodash';
   template: require('./baSidebar.html')
 })
 export class BaSidebar {
-
-  // here we declare which routes we want to use as a menu in our sidebar
-  public routes = _.cloneDeep(MENU); // we're creating a deep copy since we are going to change that object
-
   public menuHeight:number;
   public isMenuCollapsed:boolean = false;
   public isMenuShouldCollapsed:boolean = false;

src/app/theme/components/baSidebar/baSidebar.html

@@ -1,6 +1,5 @@
 <aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
-  <ba-menu [menuRoutes]="routes"
-           [menuHeight]="menuHeight"
+  <ba-menu [menuHeight]="menuHeight"
            [sidebarCollapsed]="isMenuCollapsed"
            (expandMenu)="menuExpand()"></ba-menu>
 </aside>

src/app/theme/index.ts

@@ -1,3 +1,4 @@
-export * from './theme.constants'
-export * from './theme.configProvider'
-export * from './theme.config'
+export { BaMenuService } from './services';
+export * from './theme.constants';
+export * from './theme.configProvider';
+export * from './theme.config';

src/app/theme/nga.module.ts

@@ -44,6 +44,7 @@ import {
 
 import {
   BaImageLoaderService,
+  BaMenuService,
   BaThemePreloader,
   BaThemeSpinner
 } from './services';
@@ -86,7 +87,8 @@ const NGA_PIPES = [
 const NGA_SERVICES = [
   BaImageLoaderService,
   BaThemePreloader,
-  BaThemeSpinner
+  BaThemeSpinner,
+  BaMenuService
 ];
 
 const NGA_VALIDATORS = [

src/app/theme/services/baMenu/baMenu.service.ts

@@ -1,12 +1,24 @@
 import {Injectable} from '@angular/core';
 import {Router, Routes} from '@angular/router';
 
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
 @Injectable()
 export class BaMenuService {
+  menuItems = new BehaviorSubject<any[]>([]);
 
   protected _currentMenuItem = {};
 
-  constructor(private _router:Router) {
+  constructor(private _router:Router) { }
+
+  /**
+   * Updates the routes in the menu
+   *
+   * @param {Routes} routes Type compatible with app.menu.ts
+   */
+  public updateMenuByRoutes(routes: Routes) {
+    let convertedRoutes = this.convertRoutesToMenus(_.cloneDeep(routes));
+    this.menuItems.next(convertedRoutes);
   }
 
   public convertRoutesToMenus(routes:Routes):any[] {

src/app/theme/services/baMenu/index.ts

@@ -0,0 +1 @@
+export * from './baMenu.service';

src/app/theme/services/index.ts

@@ -1,3 +1,4 @@
 export * from './baImageLoader';
+export * from './baMenu';
 export * from './baThemePreloader';
 export * from './baThemeSpinner';