Changes on left-menu active item by depth

client/salix/src/components/index.js

@@ -1,7 +1,6 @@
 import './app/app';
 import './home/home';
 import './main-menu/main-menu';
-import './left-menu/actions';
 import './left-menu/left-menu';
 import './left-menu/menu-item';
 import './topbar/topbar';

client/salix/src/components/left-menu/actions.html

@@ -1,5 +0,0 @@
-<vn-horizontal>
-    <ul style="list-style-type: none; margin: 0; padding: 0; width: 100%;">
-        <vn-menu-item ng-repeat="item in $ctrl.items" item="::item"></vn-menu-item>
-    </ul>
-</vn-horizontal>

client/salix/src/components/left-menu/actions.js

@@ -1,34 +0,0 @@
-import ngModule from '../../module';
-
-export default class MenuActions {
-    constructor($state, $transitions) {
-        this.$state = $state;
-        this.deregisterCallback = $transitions.onSuccess({},
-            transition => this.switchItem());
-    }
-    switchItem() {
-        if (!this.items || !this.items.length) return;
-
-        let stateName = this.$state.current.name.replace('.create', '.list').replace('.edit', '.list');
-
-        for (let i = 0; i < this.items.length; i++) {
-            this.items[i].active = (this.items[i].href === stateName);
-        }
-    }
-    $onInit() {
-        this.switchItem();
-    }
-    $onDestroy() {
-        this.deregisterCallback();
-    }
-
-}
-MenuActions.$inject = ['$state', '$transitions'];
-
-ngModule.component('vnActions', {
-    template: require('./actions.html'),
-    controller: MenuActions,
-    bindings: {
-        items: '<'
-    }
-});

client/salix/src/components/left-menu/left-menu.html

@@ -1,5 +1,9 @@
-<vn-card >
+<vn-card>
 <vn-vertical pad-medium-top pad-medium-bottom>
-    <vn-actions items="$ctrl.items"></vn-actions>
+    <vn-horizontal>
+        <ul style="list-style-type: none; margin: 0; padding: 0; width: 100%;">
+            <vn-menu-item ng-repeat="item in ::$ctrl.items" item="::item"></vn-menu-item>
+        </ul>
+    </vn-horizontal>
 </vn-vertical>
 </vn-card>

client/salix/src/components/left-menu/left-menu.js

@@ -2,29 +2,59 @@ import ngModule from '../../module';
 import './style.scss';
 
 export default class LeftMenu {
-    constructor(aclService, $state) {
+    constructor(aclService, $state, $transitions) {
         this.aclService = aclService;
         this.$state = $state;
-        this.items = [];
-        this.init();
-    }
-    init() {
+        this.deregisterCallback = $transitions.onSuccess({},
+            transition => this.activateItem());
+        this._depth = 3;
+
+        let items = [];
         let routes = this.$state.current.data.routes || [];
-        if (routes.length) {
-            routes.forEach(i => {
-                if (i.menu && this.aclService.routeHasPermission(i))
-                    this.items.push({
-                        description: i.menu.description,
-                        icon: i.menu.icon,
-                        href: i.state
-                    });
-            });
-        }
+        routes.forEach(i => {
+            if (i.menu && this.aclService.routeHasPermission(i))
+                items.push({
+                    description: i.menu.description,
+                    icon: i.menu.icon,
+                    href: i.state
+                });
+        });
+
+        this.items = items;
+        this.activateItem();
+    }
+
+    set depth(value) {
+        this._depth = value;
+        this.activateItem();
+    }
+
+    get depth() {
+        return this._depth;
+    }
+
+    activateItem() {
+        let myState = this.$state.current.name
+            .split('.')
+            .slice(0, this._depth)
+            .join('.');
+        let re = new RegExp(`^${myState}(\\..*)?$`);
+
+        if (this.items)
+            for (let item of this.items)
+                item.active = re.test(item.href);
+    }
+
+    $onDestroy() {
+        this.deregisterCallback();
     }
 }
-LeftMenu.$inject = ['aclService', '$state'];
+LeftMenu.$inject = ['aclService', '$state', '$transitions'];
 
 ngModule.component('vnLeftMenu', {
     template: require('./left-menu.html'),
-    controller: LeftMenu
+    controller: LeftMenu,
+    bindings: {
+        depth: '<?'
+    }
 });