fix(sidebar): sidebar should allow having random states inside of manually configured items

src/app/theme/components/baSidebar/ba-sidebar.html

@@ -2,14 +2,15 @@
        ng-mouseleave="hoverElemTop=selectElemTop">
   <ul class="al-sidebar-list" slimscroll="{height: '{{menuHeight}}px'}" slimscroll-watch="menuHeight" >
     <li ng-repeat="item in ::menuItems" class="al-sidebar-list-item"
-        ng-class="::{'with-sub-menu': item.subMenu}" ui-sref-active="selected">
+        ng-class="::{'with-sub-menu': item.subMenu}" ui-sref-active="selected"
+        ba-sidebar-toggling-item="item">
 
       <a ng-mouseenter="hoverItem($event, item)" ui-state="item.stateRef || ''" ng-href="{{::(item.fixedHref ? item.fixedHref: '')}}" ng-if="::!item.subMenu" class="al-sidebar-list-link">
         <i class="{{ ::item.icon }}"></i><span>{{ ::item.title }}</span>
       </a>
 
       <a ng-mouseenter="hoverItem($event, item)" ng-if="::item.subMenu"
-         class="al-sidebar-list-link" ba-ui-sref-toggler="item.stateRef">
+         class="al-sidebar-list-link" ba-ui-sref-toggler>
         <i class="{{ ::item.icon }}"></i><span>{{ ::item.title }}</span>
         <b class="fa fa-angle-down" ui-sref-active="fa-angle-up"
            ng-if="::item.subMenu"></b>
@@ -17,16 +18,17 @@
 
       <ul ng-if="::item.subMenu" class="al-sidebar-sublist"
           ng-class="{'slide-right': item.slideRight}"
-          ba-ui-sref-toggling-submenu="item.stateRef">
-        <li ng-repeat="subitem in ::item.subMenu" ng-class="::{'with-sub-menu': subitem.subMenu}" ui-sref-active="selected" class="ba-sidebar-sublist-item">
-          <a ng-mouseenter="hoverItem($event, item)" ng-if="::subitem.subMenu" ba-ui-sref-toggler="subitem.stateRef"
+          ba-ui-sref-toggling-submenu>
+        <li ng-repeat="subitem in ::item.subMenu" ng-class="::{'with-sub-menu': subitem.subMenu}" ui-sref-active="selected"
+            ba-sidebar-toggling-item="subitem" class="ba-sidebar-sublist-item">
+          <a ng-mouseenter="hoverItem($event, item)" ng-if="::subitem.subMenu" ba-ui-sref-toggler
              class="al-sidebar-list-link subitem-submenu-link"><span>{{ ::subitem.title }}</span>
             <b class="fa" ng-class="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"
                ng-if="::subitem.subMenu"></b>
           </a>
           <ul ng-if="::subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
               ng-class="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}"
-              ba-ui-sref-toggling-submenu="subitem.stateRef">
+              ba-ui-sref-toggling-submenu>
             <li ng-mouseenter="hoverItem($event, item)" ng-repeat="subSubitem in ::subitem.subMenu" ui-sref-active="selected">
               <a ng-mouseenter="hoverItem($event, item)" ui-state="subSubitem.stateRef || ''" ng-href="{{::(subSubitem.fixedHref ? subSubitem.fixedHref: '')}}">{{
                 ::subSubitem.title }}</a>

src/app/theme/components/baSidebar/baSidebar.service.js

@@ -50,6 +50,19 @@
           isMenuCollapsed = !isMenuCollapsed;
         };
 
+        this.getAllStateRefsRecursive = function(item) {
+          var result = [];
+          _iterateSubItems(item);
+          return result;
+
+          function _iterateSubItems(currentItem) {
+            currentItem.subMenu && currentItem.subMenu.forEach(function(subItem) {
+              subItem.stateRef && result.push(subItem.stateRef);
+              _iterateSubItems(subItem);
+            });
+          }
+        };
+
         function defineMenuItemStates() {
           return $state.get()
               .filter(function(s) {

src/app/theme/components/baSidebar/baSidebarHelpers.directive.js

@@ -8,6 +8,7 @@
   angular.module('BlurAdmin.theme.components')
       .directive('baSidebarToggleMenu', baSidebarToggleMenu)
       .directive('baSidebarCollapseMenu', baSidebarCollapseMenu)
+      .directive('baSidebarTogglingItem', baSidebarTogglingItem)
       .directive('baUiSrefTogglingSubmenu', baUiSrefTogglingSubmenu)
       .directive('baUiSrefToggler', baUiSrefToggler);
 
@@ -44,33 +45,70 @@
   }
 
   /** @ngInject */
-  function baUiSrefTogglingSubmenu($state) {
+  function baSidebarTogglingItem($state, baSidebarService) {
     return {
       restrict: 'A',
-      link: function(scope, el, attrs) {
-        var stateToWatch = scope.$eval(attrs.baUiSrefTogglingSubmenu);
+      controller: function ($scope, $element, $attrs) {
+        var vm = this;
+        var menuItem = vm.$$menuItem = $scope.$eval($attrs.baSidebarTogglingItem);
+        if (menuItem && menuItem.subMenu && menuItem.subMenu.length) {
+          vm.$$expandSubmenu = function() { console.warn('$$expandMenu should be overwritten by baUiSrefTogglingSubmenu') };
+          vm.$$collapseSubmenu = function() { console.warn('$$collapseSubmenu should be overwritten by baUiSrefTogglingSubmenu') };
+
+          var subItemsStateRefs = baSidebarService.getAllStateRefsRecursive(menuItem);
+
+          vm.$expand = function() {
+            vm.$$expandSubmenu();
+            $element.addClass('ba-sidebar-item-expanded');
+          };
+
+          vm.$collapse = function() {
+            vm.$$collapseSubmenu();
+            $element.removeClass('ba-sidebar-item-expanded');
+          };
+
+          vm.$toggle = function() {
+            $element.hasClass('ba-sidebar-item-expanded') ?
+                vm.$collapse() :
+                vm.$expand();
+          };
 
           if (_isState($state.current)) {
-          el.parent().addClass('ba-sidebar-item-expanded');
+            $element.addClass('ba-sidebar-item-expanded');
           }
 
-        scope.$on('$stateChangeStart', function (event, toState) {
-          if (!_isState(toState) && el.parent().hasClass('ba-sidebar-item-expanded')) {
-            el.slideToggle();
-            el.parent().removeClass('ba-sidebar-item-expanded');
+          $scope.$on('$stateChangeStart', function (event, toState) {
+            if (!_isState(toState) && $element.hasClass('ba-sidebar-item-expanded')) {
+              vm.$collapse();
+              $element.removeClass('ba-sidebar-item-expanded');
             }
           });
 
-        scope.$on('$stateChangeSuccess', function (event, toState) {
-          if (_isState(toState) && !el.parent().hasClass('ba-sidebar-item-expanded')) {
-            el.slideToggle();
-            el.parent().addClass('ba-sidebar-item-expanded');
+          $scope.$on('$stateChangeSuccess', function (event, toState) {
+            if (_isState(toState) && !$element.hasClass('ba-sidebar-item-expanded')) {
+              vm.$expand();
+              $element.addClass('ba-sidebar-item-expanded');
             }
           });
+        }
 
         function _isState(state) {
-          return state && state.name.indexOf(stateToWatch) == 0;
+          return state && subItemsStateRefs.some(function(subItemState) {
+                return state.name.indexOf(subItemState) == 0;
+              });
+        }
       }
+    };
+  }
+
+  /** @ngInject */
+  function baUiSrefTogglingSubmenu($state) {
+    return {
+      restrict: 'A',
+      require: '^baSidebarTogglingItem',
+      link: function(scope, el, attrs, baSidebarTogglingItem) {
+        baSidebarTogglingItem.$$expandSubmenu = function() { el.slideDown(); };
+        baSidebarTogglingItem.$$collapseSubmenu = function() { el.slideUp(); };
       }
     };
   }
@@ -79,10 +117,10 @@
   function baUiSrefToggler() {
     return {
       restrict: 'A',
-      link: function(scope, el, attrs) {
+      require: '^baSidebarTogglingItem',
+      link: function(scope, el, attrs, baSidebarTogglingItem) {
         el.on('click', function() {
-          el.next().slideToggle();
-          el.parent().toggleClass('ba-sidebar-item-expanded');
+          baSidebarTogglingItem.$toggle();
         });
       }
     };