side menu; pkguid stack

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "luticate"]
-	path = luticate
-	url = https://git.rthoni.com/luticate/front-backoffice

app/app.js

@@ -7,21 +7,83 @@ angular.module('app', [
     'ui.router',
     'LocalStorageModule',
     'ngMaterial',
-    'dialogs.main',
-    'luticateAuth',
-    'luticateUtils',
+    'md.data.table',
+    'sasrio.angular-material-sidenav',
+    'luticate2Utils',
+    // 'luticateAuth',
     'appSdk'
 ])
-    .config(['$stateProvider', '$urlRouterProvider',
-        function($stateProvider, $urlRouterProvider) {
+    .config(['$stateProvider', '$urlRouterProvider', 'ssSideNavSectionsProvider', '$mdThemingProvider',
+        function($stateProvider, $urlRouterProvider, ssSideNavSectionsProvider, $mdThemingProvider) {
+
+            // $mdThemingProvider
+            //     .theme('default')
+            //     .primaryPalette('blue', {
+            //         'default': '700'
+            //     });
+
+            ssSideNavSectionsProvider.initWithTheme($mdThemingProvider);
+            ssSideNavSectionsProvider.initWithSections([{
+                id: 'toogle_1',
+                name: 'Home',
+                type: 'heading',
+                children: [{
+                    name: 'Home 1',
+                    type: 'toggle',
+                    pages: [{
+                        id: 'toogle_1_link_1',
+                        name: 'Home 1 1',
+                        state: 'home'
+                    }, {
+                        id: 'toogle_1_link_2',
+                        name: 'Home 1 2',
+                        state: 'home.1.2',
+                        hidden: true
+                    }, {
+                        id: 'toogle_1_link_3',
+                        name: 'Home 1 3',
+                        state: 'home.1.3'
+                    }]
+                }]
+            }, {
+                id: 'link_1',
+                name: 'Home 2 ',
+                state: 'home.2',
+                type: 'link',
+                icon: 'fa fa-check'
+            }, {
+                id: 'link_2',
+                name: 'Home 3',
+                state: 'home.3',
+                type: 'link'
+            }, {
+                id: 'link_3',
+                name: 'Link 3',
+                state: 'common.link3',
+                type: 'link',
+                hidden: true
+            },  {
+                id: 'toogle_2',
+                name: 'PkGuid',
+                type: 'heading',
+                children: [{
+                    name: 'PkGuid 1',
+                    type: 'toggle',
+                    pages: [{
+                        id: 'toogle_2_link_1',
+                        name: 'PkGuid 1 1',
+                        state: 'pkguid'
+                    }]
+                }]
+            }]);
 
             $stateProvider.state('root', {
                 abstract: true,
                 template: '<div ui-view=""></div>',
-                resolve: ['luticateAuthUsers', function(luticateAuthUsers)
-                {
-                    return luticateAuthUsers.loadUserData(null);
-                }]
+                // resolve: ['luticateAuthUsers', function(luticateAuthUsers)
+                // {
+                //     return luticateAuthUsers.loadUserData(null);
+                // }]
             });
 
             $stateProvider.state('home', {
@@ -33,6 +95,15 @@ angular.module('app', [
                 controller:'HomeController'
             });
 
+            $stateProvider.state('pkguid', {
+                url:'/pkguid',
+                parent: 'root',
+                title: "PkGuid",
+                reloadOnSearch: false,
+                templateUrl:'views/pkguid.html',
+                controller:'PkGuidController'
+            });
+
             $urlRouterProvider.otherwise('/');
     }])
     .directive('dateNow', ['$filter', function($filter) {

app/controllers/pkguid.controller.js

@@ -0,0 +1,46 @@
+angular.module('app')
+    .controller('PkGuidController', ['$scope', '$state', '$mdDialog', 'pkGuidBusiness',
+        function($scope, $state, $mdDialog, pkGuidBusiness) {
+
+            $scope.selected = [];
+
+            $scope.query = {
+                order: 'someText',
+                limit: 5,
+                page: 1
+            };
+
+            $scope.pkGuids = null;
+            $scope.pkGuidsError = null;
+
+            $scope.getPkGuids = function()
+            {
+                $scope.pkGuidsError = null;
+                var orderBy = $scope.query.order;
+                if (orderBy[0] == '-') {
+                    orderBy = orderBy.substr(1) + ":DESC";
+                }
+                else {
+                    orderBy = orderBy + ":ASC";
+                }
+                $scope.promise = pkGuidBusiness.getMultiple(orderBy, $scope.query.page - 1, $scope.query.limit).then(function(data)
+                {
+                    $scope.pkGuids = data;
+                    $scope.pkGuidsError = null;
+                }, function(error)
+                {
+                    $scope.pkGuids = null;
+                    $scope.pkGuidsError = error;
+                });
+            };
+
+            $scope.getPkGuids();
+
+            // pkGuidBusiness.getSingleById('42').then(function(data)
+            // {
+            //     console.log(data);
+            // }, function(error)
+            // {
+            //     console.error(error);
+            // });
+    }]);

app/controllers/sidebar.controller.js

@@ -3,7 +3,9 @@
  */
 
 angular.module('app')
-    .controller('SideBarController', ['$scope', '$state', '$mdDialog', '$mdSidenav',
-        function($scope, $state, $mdDialog, $mdSidenav) {
+    .controller('SideBarController', ['$scope', '$state', '$mdDialog', '$mdSidenav', 'ssSideNav',
+        function($scope, $state, $mdDialog, $mdSidenav, ssSideNav) {
+
+            $scope.menu = ssSideNav;
 
         }]);

app/index.html

@@ -6,9 +6,11 @@
     <title ng-bind="title">App</title>
 
     <!-- build:css css/globals.css -->
-    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="../bower_components/angular-material/angular-material.min.css">
-    <link rel="stylesheet" href="../bower_components/luticate-utils/src/lubusy.css">
+    <link rel="stylesheet" href="../bower_components/components-font-awesome/css/font-awesome.min.css"/>
+    <link rel="stylesheet" href="../bower_components/angular-material/angular-material.min.css"/>
+    <link rel="stylesheet" href="../bower_components/angular-material-data-table/dist/md-data-table.min.css"/>
+    <link rel="stylesheet" href="../bower_components/angular-material-sidenav/angular-material-sidenav.css"/>
+    <!--<link rel="stylesheet" href="../bower_components/luticate-utils/src/lubusy.css">-->
     <!-- endbuild -->
 
     <!-- build:less css/styles.css -->
@@ -31,17 +33,16 @@
     <script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
     <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
     <script src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
-    <script src="../bower_components/bootstrap/js/collapse.js"></script>
-    <script src="../bower_components/bootstrap/js/transition.js"></script>
-    <script src="../bower_components/bootstrap/js/dropdown.js"></script>
     <script src="../bower_components/less/dist/less-1.7.4.js"></script>
     <script src="../bower_components/angular-aria/angular-aria.min.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.min.js"></script>
     <script src="../bower_components/angular-material/angular-material.min.js"></script>
-    <script src="../bower_components/luticate-utils/dist/luticate-utils.min.js"></script>
-    <script src="../bower_components/luticate-auth/dist/luticate-auth.min.js"></script>
-    <script src="../bower_components/angular-dialog-service/dist/dialogs.js"></script>
-    <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
+    <script src="../bower_components/luticate2-utils/dist/luticate-utils.min.js"></script>
+    <script src="../bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
+    <script src="../bower_components/angular-material-sidenav/angular-material-sidenav.js"></script>
+    <!--<script src="../bower_components/luticate-auth/dist/luticate-auth.min.js"></script>-->
+    <!--<script src="../bower_components/angular-dialog-service/dist/dialogs.js"></script>-->
+    <!--<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>-->
 
     <!-- scripts -->
     <script src="app.js"></script>
@@ -50,11 +51,14 @@
     <script src="controllers/sidebar.controller.js"></script>
     <script src="controllers/toolbar.controller.js"></script>
     <script src="controllers/home.controller.js"></script>
+    <script src="controllers/pkguid.controller.js"></script>
 
     <!-- Modal Controller -->
 
     <!-- SDK -->
     <script src="../sdk/sdk.js"></script>
+    <script src="../sdk/DataAccess/pkguid.dataaccess.js"></script>
+    <script src="../sdk/Business/pkguid.business.js"></script>
 
     <!-- Directives -->
 
@@ -62,7 +66,7 @@
 
 </head>
 <body layout="column">
-    <div layout="row"  flex>
+    <div layout="row" flex>
         <ng-include src="'views/sidebar.html'"></ng-include>
         <div layout="column" flex id="content">
             <md-content class="md-main-content">

app/less/app.less

@@ -28,6 +28,42 @@
    user-select: none;
 }
 
+
+.isa_info, .isa_success, .isa_warning, .isa_error {
+  margin: 10px 0px;
+  padding:12px;
+}
+.isa_info {
+  color: #00529B;
+  background-color: #BDE5F8;
+}
+.isa_success {
+  color: #4F8A10;
+  background-color: #DFF2BF;
+}
+.isa_warning {
+  color: #9F6000;
+  background-color: #FEEFB3;
+}
+.isa_error {
+  color: #D8000C;
+  background-color: #FFBABA;
+}
+.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
+  margin:10px 22px;
+  font-size:2em;
+  vertical-align:middle;
+}
+
+md-sidenav {
+  height: 100%;
+}
+
+.md-content-nav {
+  overflow-x: hidden;
+  height: 100%;
+}
+
 /**
 ========================================================
 **/

app/views/footer.html

@@ -1,12 +1,11 @@
-<!-- /.container -->
-<div class="container">
+<!-- Footer -->
+<footer>
     <hr>
-    <!-- Footer -->
-    <footer>
-        <div class="row">
-            <div class="col-lg-12 text-center">
+    <div layout="column" layout-fill layout-align="top center">
+        <div flex>
+            <div class="col-lg-12">
                 <p>Copyright &copy; <a href="https://www.rthoni.com/">Robin Thoni</a> <span date-now="yyyy"></span></p>
             </div>
         </div>
-    </footer>
-</div>
+    </div>
+</footer>

app/views/home.html

@@ -1,5 +1,3 @@
-<div layout="column" layout-fill layout-align="top center">
-    <p>
-        Welcome home
-    </p>
+<div layout="column" layout-fill layout-align="top">
+    <p>Welcome Home</p>
 </div>

app/views/pkguid.html

@@ -0,0 +1,39 @@
+<div layout="column" layout-fill layout-align="top">
+
+    <div flex>
+        <md-toolbar class="md-table-toolbar md-default">
+            <div class="md-toolbar-tools">
+                <span>PkGuids</span>
+            </div>
+        </md-toolbar>
+    </div>
+
+    <div flex>
+        <div class="isa_error" ng-show="pkGuidsError != null">
+            <i class="fa fa-times-circle"></i>
+            {{ pkGuidsError.data.message }}
+        </div>
+        <md-table-container>
+            <table md-table md-row-select multiple ng-model="selected" md-progress="promise">
+                <thead md-head md-order="query.order" md-on-reorder="getPkGuids">
+                <tr md-row>
+                    <th md-column md-order-by="id"><span>Id</span></th>
+                    <th md-column md-order-by="someText"><span>Some Text</span></th>
+                    <th md-column md-order-by="someInt" md-numeric>Some Int</th>
+                    <th md-column md-order-by="createdAt">Created At</th>
+                </tr>
+                </thead>
+                <tbody md-body>
+                <tr md-row md-select="item" md-select-id="id" md-auto-select ng-repeat="item in pkGuids.data">
+                    <td md-cell>{{item.id}}</td>
+                    <td md-cell>{{item.someText}}</td>
+                    <td md-cell>{{item.someInt}}</td>
+                    <td md-cell>{{item.createdAt}}</td>
+                </tr>
+                </tbody>
+            </table>
+        </md-table-container>
+    </div>
+
+    <md-table-pagination class="col-xs-11" md-limit="query.limit" md-limit-options="[1, 5, 10, 15]" md-page="query.page" md-total="{{pkGuids.count}}" md-on-paginate="getPkGuids" md-page-select></md-table-pagination>
+</div>

app/views/sidebar.html

@@ -1,10 +1,12 @@
-<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
-    <md-toolbar class="md-theme-indigo">
-        <h1 class="md-toolbar-tools"><a ui-sref="home">App</a></h1>
-    </md-toolbar>
-    <md-content layout-padding ng-controller="SideBarController">
-        <div lu-busy="sidebar">
-            <p>Sidebar</p>
-        </div>
-    </md-content>
+<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
+    <header class="nav-header" ss-style-color="{'background-color': 'primary.default'}">
+        <md-toolbar class="md-theme-indigo">
+            <h1 class="md-toolbar-tools"><a ui-sref="home">App</a></h1>
+        </md-toolbar>
+    </header>
+    <div flex ng-controller="SideBarController">
+        <md-content flex role="navigation" ss-style-color="{'background-color': 'primary.default'}" class="md-content-nav">
+            <ss-sidenav flex menu="menu"></ss-sidenav>
+        </md-content>
+    </div>
 </md-sidenav>

bower.json

@@ -6,19 +6,15 @@
   "license": "",
   "private": true,
   "dependencies": {
-    "angular": "1.5.x",
+    "angular": "1.6.x",
     "jquery": "2.1.x",
     "angular-bootstrap": "1.1.x",
-    "angular-ui-router": "0.2.x",
-    "bootstrap": "3.3.x",
+    "angular-ui-router": "1.0.x",
     "less": "1.7.x",
-    "angular-local-storage": "0.2.3",
-    "angular-material": "^1.0.6",
-    "luticate-utils": "https://git.rthoni.com/luticate/front-utils.git#0.1.x",
-    "luticate-auth": "https://git.rthoni.com/luticate/front-auth.git#0.1.x"
-  },
-  "resolutions": {
-    "angular-material": "^1.0.6",
-    "angular-bootstrap": "1.1.x"
+    "angular-local-storage": "0.5.x",
+    "angular-material": "1.1.x",
+    "angular-material-data-table": "^0.10.9",
+    "components-font-awesome": "^4.7.0",
+    "angular-material-sidenav": "^0.0.14"
   }
 }

luticate

@@ -1 +0,0 @@
-Subproject commit 1566235d9b9fa3bde7784ff3878f9c862642ab23

sdk/Business/pkguid.business.js

@@ -0,0 +1,15 @@
+/**
+ * Created by robin on 12/12/16.
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('appSdk')
+        .factory('pkGuidBusiness', ['luWebApiCrudBusiness', 'pkGuidDataAccess', function (luWebApiCrudBusiness, pkGuidDataAccess) {
+
+            var Business = luWebApiCrudBusiness.create(pkGuidDataAccess);
+
+            return Business;
+        }]);
+})();

sdk/DataAccess/pkguid.dataaccess.js

@@ -0,0 +1,15 @@
+/**
+ * Created by robin on 12/12/16.
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('appSdk')
+        .factory('pkGuidDataAccess', ['luWebApiCrudDataAccess', function (luWebApiCrudDataAccess) {
+
+            var DataAccess = luWebApiCrudDataAccess.create('/api/pkguid');
+
+            return DataAccess;
+        }]);
+})();