refactor(basic structure): configure page states, generate sidebar from these states

src/app/pages/alerts/alerts.module.js

@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('alerts', {
+        .state('ui.alerts', {
           url: '/alerts',
-          templateUrl: 'app/pages/alerts/alerts.html'
+          templateUrl: 'app/pages/alerts/alerts.html',
+          title: 'Modals',
+          sidebarMeta: {
+            order: 500,
+          },
         });
   }
 

src/app/pages/buttons/buttons.module.js

@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('buttons', {
+        .state('ui.buttons', {
           url: '/buttons',
           templateUrl: 'app/pages/buttons/buttons.html',
-          controller: 'ButtonPageCtrl'
+          controller: 'ButtonPageCtrl',
+          title: 'Buttons',
+          sidebarMeta: {
+            order: 100,
+          },
         });
   }
 

src/app/pages/charts/amCharts/amCharts.module.js

@@ -13,7 +13,11 @@
     $stateProvider
         .state('charts.amCharts', {
           url: '/amCharts',
-          templateUrl: 'app/pages/charts/amCharts/charts.html'
+          templateUrl: 'app/pages/charts/amCharts/charts.html',
+          title: 'amCharts',
+          sidebarMeta: {
+            order: 0,
+          },
         });
   }
 

src/app/pages/charts/chartJs/chartJs.module.js

@@ -13,7 +13,11 @@
     $stateProvider
         .state('charts.chartJs', {
           url: '/chartJs',
-          templateUrl: 'app/pages/charts/chartJs/chartJs.html'
+          templateUrl: 'app/pages/charts/chartJs/chartJs.html',
+          title: 'Chart.js',
+          sidebarMeta: {
+            order: 200,
+          },
         });
   }
 

src/app/pages/charts/chartist/chartist.module.js

@@ -13,7 +13,11 @@
     $stateProvider
         .state('charts.chartist', {
           url: '/chartist',
-        templateUrl: 'app/pages/charts/chartist/chartist.html'
+          templateUrl: 'app/pages/charts/chartist/chartist.html',
+          title: 'Chartist',
+          sidebarMeta: {
+            order: 100,
+          },
         });
   }
 

src/app/pages/charts/charts.module.js

@@ -19,7 +19,12 @@
         .state('charts', {
           url: '/charts',
           abstract: true,
-          template: '<div ui-view></div>'
+          template: '<div ui-view></div>',
+          title: 'Charts',
+          sidebarMeta: {
+            icon: 'ion-stats-bars',
+            order: 100,
+          },
         });
   }
 

src/app/pages/charts/morris/morris.module.js

@@ -13,7 +13,11 @@
     $stateProvider
         .state('charts.morris', {
           url: '/morris',
-        templateUrl: 'app/pages/charts/morris/morris.html'
+          templateUrl: 'app/pages/charts/morris/morris.html',
+          title: 'Morris',
+          sidebarMeta: {
+            order: 300,
+          }
         });
   }
 

src/app/pages/dashboard/dashboard.module.js

@@ -13,7 +13,12 @@
     $stateProvider
         .state('dashboard', {
           url: '/dashboard',
-          templateUrl: 'app/pages/dashboard/dashboard.html'
+          templateUrl: 'app/pages/dashboard/dashboard.html',
+          title: 'Dashboard',
+          sidebarMeta: {
+            icon: 'ion-android-home',
+            order: 0,
+          },
         });
   }
 

src/app/pages/form/form.module.js

@@ -11,21 +11,42 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('form-inputs', {
+        .state('form', {
-          url: '/form-inputs',
+          url: '/form',
-          templateUrl: 'app/pages/form/inputs/inputs.html'
+          template : '<ui-view></ui-view>',
+          abstract: true,
+          title: 'Form Elements',
+          sidebarMeta: {
+            icon: 'ion-compose',
+            order: 300,
+          },
         })
-        .state('form-layouts', {
+        .state('form.inputs', {
-          url: '/form-layouts',
+          url: '/inputs',
-          templateUrl: 'app/pages/form/layouts/layouts.html'
+          templateUrl: 'app/pages/form/inputs/inputs.html',
+          title: 'Form Inputs',
+          sidebarMeta: {
+            order: 0,
+          },
         })
-        .state('form-wizard',
+        .state('form.layouts', {
+          url: '/layouts',
+          templateUrl: 'app/pages/form/layouts/layouts.html',
+          title: 'Form Layouts',
+          sidebarMeta: {
+            order: 100,
+          },
+        })
+        .state('form.wizard',
         {
-          url: '/form-wizard',
+          url: '/wizard',
           templateUrl: 'app/pages/form/wizard/wizard.html',
           controller: 'WizardCtrl',
-          controllerAs: 'vm'
+          controllerAs: 'vm',
-        })
+          title: 'Form Wizard',
+          sidebarMeta: {
+            order: 200,
+          },
+        });
   }
-
 })();

src/app/pages/grid/grid.module.js

@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('grid', {
+        .state('ui.grid', {
           url: '/grid',
-          templateUrl: 'app/pages/grid/grid.html'
+          templateUrl: 'app/pages/grid/grid.html',
+          title: 'Grid',
+          sidebarMeta: {
+            order: 400,
+          },
         });
   }
 

src/app/pages/icons/icons.module.js

@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('icons', {
+        .state('ui.icons', {
           url: '/icons',
           templateUrl: 'app/pages/icons/icons.html',
-          controller: 'IconsPageCtrl'
+          controller: 'IconsPageCtrl',
+          title: 'Icons',
+          sidebarMeta: {
+            order: 200,
+          },
         });
   }
 

src/app/pages/mail/mail.module.js

@@ -16,7 +16,12 @@
           abstract: true,
           templateUrl: 'app/pages/mail/mail.html',
           controller: "MailTabCtrl",
-        controllerAs: "tabCtrl"
+          controllerAs: "tabCtrl",
+          title: 'Mail',
+          sidebarMeta: {
+            icon: 'ion-ios-email-outline',
+            order: 500,
+          },
         }).state('mail.label', {
           url: '/:label',
           templateUrl: 'app/pages/mail/list/mailList.html',

src/app/pages/maps/maps.module.js

@@ -14,27 +14,48 @@
         .state('maps', {
           url: '/maps',
           templateUrl: 'app/pages/maps/maps.html',
-          abstract: true
+          abstract: true,
+          title: 'Maps',
+          sidebarMeta: {
+            icon: 'ion-ios-location-outline',
+            order: 600,
+          },
         })
         .state('maps.gmap', {
           url: '/gmap',
           templateUrl: 'app/pages/maps/google-maps/google-maps.html',
-          controller: 'GmapPageCtrl'
+          controller: 'GmapPageCtrl',
+          title: 'Google Maps',
+          sidebarMeta: {
+            order: 0,
+          },
         })
         .state('maps.leaflet', {
           url: '/leaflet',
           templateUrl: 'app/pages/maps/leaflet/leaflet.html',
-          controller: 'LeafletPageCtrl'
+          controller: 'LeafletPageCtrl',
+          title: 'Leaflet Maps',
+          sidebarMeta: {
+            order: 100,
+          },
         })
         .state('maps.bubble', {
           url: '/bubble',
           templateUrl: 'app/pages/maps/map-bubbles/map-bubbles.html',
-          controller: 'MapBubblePageCtrl'
+          controller: 'MapBubblePageCtrl',
+          title: 'Bubble Maps',
+          sidebarMeta: {
+            order: 200,
+          },
         })
         .state('maps.line', {
           url: '/line',
           templateUrl: 'app/pages/maps/map-lines/map-lines.html',
-          controller: 'MapLinesPageCtrl'
+          controller: 'MapLinesPageCtrl',
+          title: 'Line Maps',
+          sidebarMeta: {
+            order: 300,
+          },
         });
   }
 

src/app/pages/modals/modals.module.js

@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('modals', {
+        .state('ui.modals', {
           url: '/modals',
-          templateUrl: 'app/pages/modals/modals.html'
+          templateUrl: 'app/pages/modals/modals.html',
+          title: 'Modals',
+          sidebarMeta: {
+            order: 300,
+          },
         });
   }
 

src/app/pages/notifications/notifications.module.js

@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('notifications', {
+        .state('ui.notifications', {
           url: '/notifications',
           templateUrl: 'app/pages/notifications/notifications.html',
-          controller: 'NotificationsPageCtrl'
+          controller: 'NotificationsPageCtrl',
+          title: 'Notifications',
+          sidebarMeta: {
+            order: 700,
+          },
         });
   }
 

src/app/pages/pages.module.js

@@ -26,7 +26,8 @@
     'BlurAdmin.pages.tables',
     'BlurAdmin.pages.tree',
     'BlurAdmin.pages.tabs',
-    'BlurAdmin.pages.typography'
+    'BlurAdmin.pages.typography',
+    'BlurAdmin.pages.ui',
   ])
       .config(routeConfig);
 

src/app/pages/panels/panels.module.js

@@ -11,10 +11,14 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('panels', {
+        .state('ui.panels', {
           url: '/panels',
           templateUrl: 'app/pages/panels/panels.html',
-          controller: 'NotificationsPageCtrl'
+          controller: 'NotificationsPageCtrl',
+          title: 'Panels',
+          sidebarMeta: {
+            order: 1100,
+          },
         });
   }
 

src/app/pages/profile/profile.module.js

@@ -14,7 +14,12 @@
         .state('profile', {
           url: '/profile',
           templateUrl: 'app/pages/profile/profile.html',
-          controller: 'ProfilePageCtrl'
+          controller: 'ProfilePageCtrl',
+          title: 'User Profile',
+          sidebarMeta: {
+            icon: 'ion-person',
+            order: 700,
+          },
         });
   }
 

src/app/pages/progressBars/progressBars.module.js

@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('progressBars', {
+        .state('ui.progressBars', {
           url: '/progressBars',
-          templateUrl: 'app/pages/progressBars/progressBars.html'
+          templateUrl: 'app/pages/progressBars/progressBars.html',
+          title: 'Progress Bars',
+          sidebarMeta: {
+            order: 600,
+          },
         });
   }
 

src/app/pages/slider/slider.module.js

@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-      .state('slider', {
+        .state('ui.slider', {
           url: '/slider',
-        templateUrl: 'app/pages/slider/slider.html'
+          templateUrl: 'app/pages/slider/slider.html',
+          title: 'Sliders',
+          sidebarMeta: {
+            order: 1000,
+          },
         });
   }
 

src/app/pages/tables/tables.module.js

@@ -15,13 +15,26 @@
           url: '/tables',
           template : '<ui-view></ui-view>',
           abstract: true,
-        controller: 'TablesPageCtrl'
+          controller: 'TablesPageCtrl',
+          title: 'Tables',
+          sidebarMeta: {
+            icon: 'ion-grid',
+            order: 200,
+          },
         }).state('tables.basic', {
           url: '/basic',
-        templateUrl: 'app/pages/tables/basic/tables.html'
+          templateUrl: 'app/pages/tables/basic/tables.html',
+          title: 'Basic Tables',
+          sidebarMeta: {
+            order: 0,
+          },
         }).state('tables.smart', {
           url: '/smart',
-        templateUrl: 'app/pages/tables/smart/tables.html'
+          templateUrl: 'app/pages/tables/smart/tables.html',
+          title: 'Smart Tables',
+          sidebarMeta: {
+            order: 100,
+          },
         });
     $urlRouterProvider.when('/tables','/tables/basic');
   }

src/app/pages/tabs/tabs.module.js

@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('tabs', {
+        .state('ui.tabs', {
           url: '/tabs',
-          templateUrl: 'app/pages/tabs/tabs.html'
+          templateUrl: 'app/pages/tabs/tabs.html',
+          title: 'Tabs and Accordions',
+          sidebarMeta: {
+            order: 800,
+          },
         });
   }
 

src/app/pages/tree/tree.module.js

@@ -10,9 +10,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-      .state('tree', {
+        .state('ui.tree', {
           url: '/tree',
-        templateUrl: 'app/pages/tree/tree.html'
+          templateUrl: 'app/pages/tree/tree.html',
+          title: 'Tree View',
+          sidebarMeta: {
+            order: 900,
+          },
         });
   }
 

src/app/pages/typography/typography.module.js

@@ -11,9 +11,13 @@
   /** @ngInject */
   function routeConfig($stateProvider) {
     $stateProvider
-        .state('typography', {
+        .state('ui.typography', {
           url: '/typography',
-          templateUrl: 'app/pages/typography/typography.html'
+          templateUrl: 'app/pages/typography/typography.html',
+          title: 'Typography',
+          sidebarMeta: {
+            order: 0,
+          },
         });
   }
 

src/app/pages/ui/ui.module.js

@@ -0,0 +1,26 @@
+/**
+ * @author k.danovsky
+ * created on 12.01.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.ui', [])
+      .config(routeConfig);
+
+  /** @ngInject */
+  function routeConfig($stateProvider) {
+    $stateProvider
+        .state('ui', {
+          url: '/ui',
+          template : '<ui-view></ui-view>',
+          abstract: true,
+          title: 'UI Elements',
+          sidebarMeta: {
+            icon: 'ion-android-laptop',
+            order: 400,
+          },
+        });
+  }
+
+})();

src/app/theme/components/contentTop/contentTop.directive.js

@@ -9,46 +9,13 @@
       .directive('contentTop', contentTop);
 
   /** @ngInject */
-  function contentTop($location) {
+  function contentTop($location, $state) {
     return {
       restrict: 'E',
       templateUrl: 'app/theme/components/contentTop/contentTop.html',
       link: function($scope) {
-        $scope.pages = {
-          '/dashboard': 'Dashboard',
-          '/page': 'Default Page',
-          '/404': 'Page Not Found',
-          '/buttons': 'Buttons',
-          '/charts/amCharts': 'amCharts',
-          '/charts/chartJs': 'Chart.js',
-          '/charts/chartist': 'Chartist.js',
-          '/charts/morris': 'Morris',
-          '/grid': 'Grid',
-          '/alerts': 'Alerts',
-          '/progressBars': 'Progress Bars',
-          '/notifications': 'Notifications',
-          '/icons': 'Icons',
-          '/login': 'Authentication',
-          '/maps': 'Maps',
-          '/mail': 'Mail Box',
-          '/modals': 'Modals',
-          '/profile': 'User Profile',
-          '/tables/basic': 'Basic Tables',
-          '/tables/smart': 'Smart Tables',
-          '/tree': 'Tree View',
-          '/slider': 'Sliders',
-          '/typography': 'Typography',
-          '/form-layouts': 'Form Layouts',
-          '/form-inputs': 'Form Inputs',
-          '/maps/gmap': 'Google Map',
-          '/maps/leaflet': 'Leaflet Map',
-          '/maps/line': 'Line Map',
-          '/maps/bubble': 'Bubble Map',
-          '/panels': 'Panels'
-        };
-
         $scope.$watch(function () {
-          $scope.activePageTitle = $scope.pages[$location.$$url];
+          $scope.activePageTitle = $state.current.title;
         });
       }
     };

src/app/theme/components/sidebar/SidebarCtrl.js

@@ -9,153 +9,37 @@
     .controller('SidebarCtrl', SidebarCtrl);
 
   /** @ngInject */
-  function SidebarCtrl($scope, $timeout, $location, $rootScope, layoutSizes) {
+  function SidebarCtrl($scope, $timeout, $location, $rootScope, layoutSizes, $state) {
-    $scope.menuItems = [
+
-      {
+    var states = $state.get().filter(function(s) {
-        title: 'Dashboard',
+          return s.sidebarMeta;
-        icon: 'ion-android-home',
+        })
-        root: '#/dashboard'
+        .map(function(s) {
-      },
+          var meta = s.sidebarMeta;
-      {
+          return {
-        icon: 'ion-stats-bars',
+            name: s.name,
-        title: 'Charts',
+            title: s.title,
-        subMenu: [
+            level: (s.name.match(/\./g) || []).length,
-          {
+            order: meta.order,
-            title: 'amCharts',
+            icon: meta.icon,
-            root: '#/charts/amCharts'
+            root: '#/' + s.name.replace('.', '/'),
-          },
+          };
-          {
+        })
-            title: 'Chart.js',
+        .sort(function(a, b) {
-            root: '#/charts/chartJs'
+          return (a.level - b.level) * 100 + a.order - b.order;
-          },
+        });
-          {
+
-            title: 'Chartist',
+    var menuItems = states.filter(function(item) {
-            root: '#/charts/chartist'
+      return item.level == 0;
-          },
+    });
-          {
+    menuItems.forEach(function(item) {
-            title: 'Morris',
+       var children = states.filter(function(child) {
-            root: '#/charts/morris'
+        return child.level == 1 && child.name.indexOf(item.name) == 0;
-          }
+      });
-        ]
+      item.subMenu = children.length ? children : null;
-      },
+    });
-      {
+
-        title: 'Tables',
+    var staticMenuItems = [
-        icon: 'ion-grid',
-        subMenu: [
-          {
-            title: "Basic Tables",
-            root: '#/tables/basic'
-          },
-          {
-            title: "Smart Tables",
-            root: '#/tables/smart'
-          }
-        ]
-      },
-      {
-        title: 'Form Elements',
-        icon: 'ion-compose',
-        subMenu: [
-          {
-            title: 'Inputs',
-            root: '#/form-inputs'
-          },
-          {
-            title: 'Form Layouts',
-            root: '#/form-layouts'
-          },
-          {
-            title: 'Form Wizard',
-            root: '#/form-wizard'
-          }
-        ]
-      },
-      {
-        title: 'UI Elements',
-        icon: 'ion-android-laptop',
-        subMenu: [
-          {
-            title: 'Typography',
-            root: '#/typography'
-          },
-          {
-            title: 'Buttons',
-            root: '#/buttons'
-          },
-          {
-            title: 'Icons',
-            root: '#/icons'
-          },
-          {
-            title: 'Modals',
-            root: '#/modals'
-          },
-          {
-            title: 'Grid',
-            root: '#/grid'
-          },
-          {
-            title: 'Alerts',
-            root: '#/alerts'
-          },
-          {
-            title: 'Progress Bars',
-            root: '#/progressBars'
-          },
-          {
-            title: 'Notifications',
-            root: '#/notifications'
-          },
-          {
-            title: 'Tabs and Accordions',
-            root: '#/tabs'
-          },
-          {
-            title: 'Tree View',
-            root: '#/tree'
-          },
-          {
-            title: 'Sliders',
-            root: '#/slider'
-          },
-          {
-            title: 'Panels',
-            root: '#/panels'
-          }
-        ]
-      },
-      {
-        title: 'Mail',
-        icon: 'ion-ios-email-outline',
-        root: '#/mail/inbox'
-      },
-      {
-        title: 'Maps',
-        icon: 'ion-ios-location-outline',
-        subMenu: [
-          {
-            title: 'Google Maps',
-            root: '#/maps/gmap'
-          },
-          {
-            title: 'Leaflet',
-            root: '#/maps/leaflet'
-          },
-          {
-            title: 'Bubble Map',
-            root: '#/maps/bubble'
-          },
-          {
-            title: 'Line Map',
-            root: '#/maps/line'
-          }
-        ]
-      },
-      {
-        title: 'User Profile',
-        icon: 'ion-person',
-        root: '#/profile'
-      },
       {
         title: 'Login Page',
         icon: 'ion-log-out',
@@ -185,6 +69,8 @@
       }
     ];
 
+    $scope.menuItems = menuItems.concat(staticMenuItems);
+
     function changeSelectElemTopValue() {
       $timeout(function () {
         var selectedItem = $('.al-sidebar-list-item.selected');