add/edit controller

app/app.js

@@ -22,8 +22,12 @@ angular.module('app', [
             //         'default': '700'
             //     });
 
+            // $mdThemingProvider.theme('default')
+            //     .primaryPalette('blue')
+            //     .accentPalette('pink');
+
             $mdIconProvider
-                .icon('md-toggle-arrow', 'img/arrow.svg') ;
+                .icon('md-toggle-arrow', 'img/arrow.svg');
 
             ssSideNavSectionsProvider.initWithTheme($mdThemingProvider);
             ssSideNavSectionsProvider.initWithSections([{
@@ -70,12 +74,16 @@ angular.module('app', [
                 name: 'PkGuid',
                 type: 'heading',
                 children: [{
-                    name: 'PkGuid 1',
+                    name: 'PkGuids',
                     type: 'toggle',
                     pages: [{
                         id: 'toogle_2_link_1',
-                        name: 'PkGuid 1 1',
+                        name: 'All',
                         state: 'pkguid'
+                    },{
+                        id: 'toogle_2_link_1',
+                        name: 'New',
+                        state: 'pkguid_add'
                     }]
                 }]
             }]);
@@ -99,7 +107,7 @@ angular.module('app', [
             });
 
             $stateProvider.state('pkguid', {
-                url:'/pkguid',
+                url:'/pkguids',
                 parent: 'root',
                 title: "PkGuid",
                 reloadOnSearch: false,
@@ -107,6 +115,27 @@ angular.module('app', [
                 controller:'PkGuidController'
             });
 
+            $stateProvider.state('pkguid_add', {
+                url:'/pkguids/add',
+                parent: 'root',
+                title: "New PkGuid",
+                reloadOnSearch: false,
+                templateUrl:'views/pkguidedit.html',
+                controller:'PkGuidEditController'
+            });
+
+            $stateProvider.state('pkguid_edit', {
+                url:'/pkguids/edit/:id',
+                parent: 'root',
+                title: "Edit PkGuid",
+                reloadOnSearch: false,
+                templateUrl:'views/pkguidedit.html',
+                controller:'PkGuidEditController',
+                params: {
+                    pkguid: null
+                }
+            });
+
             $urlRouterProvider.otherwise('/');
     }])
     .directive('dateNow', ['$filter', function($filter) {
@@ -116,9 +145,10 @@ angular.module('app', [
             }
         };
     }])
-    .run(['$rootScope', '$state',
-        function ($rootScope, $state) {
-            $rootScope.$on('$stateChangeSuccess', function (event, current, previous) {
-                $rootScope.title = current.title + " - App";
-            });
+    .run(['$rootScope', '$transitions', function ($rootScope, $transitions) {
+        $transitions.onSuccess({}, function($transitions)
+        {
+            var toState = $transitions.$to();
+            $rootScope.title = toState.title + " - App";
+        });
     }]);

app/controllers/pkguid.controller.js

@@ -1,6 +1,6 @@
 angular.module('app')
-    .controller('PkGuidController', ['$scope', '$state', '$mdDialog', 'pkGuidBusiness',
-        function($scope, $state, $mdDialog, pkGuidBusiness) {
+    .controller('PkGuidController', ['$scope', 'pkGuidBusiness', 'AppUtilsBusiness',
+        function($scope, pkGuidBusiness, AppUtilsBusiness) {
 
             $scope.selected = [];
 
@@ -11,36 +11,21 @@ angular.module('app')
             };
 
             $scope.pkGuids = null;
-            $scope.pkGuidsError = null;
+            $scope.error = 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.error = null;
+                var orderBy = AppUtilsBusiness.convertOrderBy($scope.query.order);
                 $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.error = error;
                 });
             };
 
             $scope.getPkGuids();
-
-            // pkGuidBusiness.getSingleById('42').then(function(data)
-            // {
-            //     console.log(data);
-            // }, function(error)
-            // {
-            //     console.error(error);
-            // });
     }]);

app/controllers/pkguidedit.controller.js

@@ -0,0 +1,62 @@
+angular.module('app')
+    .controller('PkGuidEditController', ['$scope', '$state', '$mdDialog', 'pkGuidBusiness',
+        function ($scope, $state, $mdDialog, pkGuidBusiness) {
+
+            $scope.pkguid = null;
+            $scope.defaultPkguid = {
+                id: null,
+                someText: "Test.",
+                someInt: 42
+            };
+
+            $scope.running = false;
+
+            $scope.error = null;
+
+            if ($state.params != null) {
+                if ($state.params.pkguid != null) {
+                    $scope.pkguid = $state.params.pkguid;
+                }
+                else if ($state.params.id != null) {
+                    $scope.running = true;
+                    pkGuidBusiness.getSingleById($state.params.id).then(function(data)
+                    {
+                        $scope.running = false;
+                        $scope.pkguid = data;
+                    }, function (error) {
+                        $scope.running = false;
+                        $scope.error = error;
+                    });
+                }
+                else {
+                    $scope.pkguid = angular.copy($scope.defaultPkguid);
+                }
+            }
+            else {
+                $scope.pkguid = angular.copy($scope.defaultPkguid);
+            }
+
+            $scope.submit = function () {
+                $scope.error = null;
+                $scope.running = true;
+                if ($scope.pkguid.id == null) {
+                    pkGuidBusiness.addDbo($scope.pkguid).then(function (data) {
+                        $scope.running = false;
+                        $state.go('pkguid_edit', {pkguid: data, id: data.id});
+                    }, function (error) {
+                        $scope.running = false;
+                        $scope.error = error;
+                    });
+                }
+                else {
+                    pkGuidBusiness.editSingleByIdDbo($scope.pkguid.id, $scope.pkguid).then(function (data) {
+                        $scope.running = false;
+                        $scope.pkguid = data;
+                    }, function (error) {
+                        $scope.running = false;
+                        $scope.error = error;
+                    });
+                }
+            };
+
+        }]);

app/img/menu.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-    <path d="M0 0h18v18h-18z" fill="none"/>
-    <path d="M2 13.5h14v-1.5h-14v1.5zm0-4h14v-1.5h-14v1.5zm0-5.5v1.5h14v-1.5h-14z"/>
-</svg>

app/index.html

@@ -52,11 +52,13 @@
     <script src="controllers/toolbar.controller.js"></script>
     <script src="controllers/home.controller.js"></script>
     <script src="controllers/pkguid.controller.js"></script>
+    <script src="controllers/pkguidedit.controller.js"></script>
 
     <!-- Modal Controller -->
 
     <!-- SDK -->
     <script src="../sdk/sdk.js"></script>
+    <script src="../sdk/Business/apputils.business.js"></script>
     <script src="../sdk/DataAccess/pkguid.dataaccess.js"></script>
     <script src="../sdk/Business/pkguid.business.js"></script>
 

app/less/app.less

@@ -64,6 +64,50 @@ md-sidenav {
   height: 100%;
 }
 
+md-toolbar.md-table-toolbar.alternate .md-toolbar-tools {
+  color: #1e88e5;
+  font-size: 16px;
+  background-color: #e3f2fd;
+}
+
 /**
 ========================================================
 **/
+
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+  local('MaterialIcons-Regular'),
+  url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
+  url(../fonts/MaterialIcons-Regular.woff) format('woff'),
+  url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

app/views/pkguid.html

@@ -1,18 +1,32 @@
 <div layout="column" layout-fill layout-align="top">
 
     <div flex>
-        <md-toolbar class="md-table-toolbar md-default">
+        <md-toolbar class="md-table-toolbar md-default" ng-show="selected.length == 0">
             <div class="md-toolbar-tools">
                 <span>PkGuids</span>
+                <span flex></span>
+                <a ui-sref="pkguid_add">
+                    <md-button class="md-icon-button" ng-click="">
+                        <md-icon class="material-icons">add</md-icon>
+                    </md-button>
+                </a>
+                <md-button class="md-icon-button" ng-click="getPkGuids()">
+                    <md-icon class="material-icons">refresh</md-icon>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
+            <div class="md-toolbar-tools">
+                <span>{{selected.length}} {{selected.length > 1 ? 'PkGuids' : 'PkGuid'}} selected</span>
+                <span flex></span>
+                <md-button class="md-icon-button">
+                    <md-icon class="material-icons">delete</md-icon>
+                </md-button>
             </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">
@@ -21,14 +35,24 @@
                     <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>
+                    <th md-column md-order-by="updatedAt">Updated 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">
+                <tr md-row md-select="item" md-select-id="id" 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>
+                    <td md-cell>{{item.createdAt | date : 'medium'}}</td>
+                    <td md-cell>
+                        {{item.updatedAt == null ? 'Never' : item.updatedAt | date : 'medium'}}
+                        <span flex></span>
+                        <a ui-sref="pkguid_edit({id: item.id, pkguid: item})">
+                            <md-button class="md-icon-button">
+                                <md-icon class="material-icons">mode_edit</md-icon>
+                            </md-button>
+                        </a>
+                    </td>
                 </tr>
                 </tbody>
             </table>
@@ -36,4 +60,9 @@
     </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 class="isa_error" ng-show="error != null">
+        <i class="fa fa-times-circle"></i>
+        {{ error.data.message }}
+    </div>
 </div>

app/views/pkguidedit.html

@@ -0,0 +1,27 @@
+<div layout="column" ng-cloak class="md-inline-form">
+    <md-content layout-padding>
+        <form name="editForm">
+            <div layout-gt-sm="row">
+                <md-input-container class="md-block" flex-gt-sm>
+                    <label>SomeText</label>
+                    <input required ng-model="pkguid.someText">
+                </md-input-container>
+
+                <md-input-container class="md-block" flex-gt-sm>
+                    <label>Some Int</label>
+                    <input required type="number" ng-model="pkguid.someInt">
+                </md-input-container>
+            </div>
+            <div flex>
+                <md-progress-linear ng-disabled="!running" md-mode="indeterminate"></md-progress-linear>
+            </div>
+            <div>
+                <md-button type="submit" ng-click="!editForm.$invalid && submit()">Submit</md-button>
+            </div>
+            <div class="isa_error" ng-show="error != null">
+                <i class="fa fa-times-circle"></i>
+                {{ error.data.message }}
+            </div>
+        </form>
+    </md-content>
+</div>

app/views/toolbar.html

@@ -1,7 +1,7 @@
 <md-toolbar layout="row" ng-controller="ToolBarController">
     <div class="md-toolbar-tools">
         <md-button class="md-icon-button" aria-label="Toolbar" ng-click="toggleSideBar()" hide-gt-md>
-            <md-icon md-svg-icon="img/menu.svg"></md-icon>
+            <md-icon class="material-icons">menu</md-icon>
         </md-button>
         <h2>Toolbar</h2>
         <span flex></span>

bower.json

@@ -15,6 +15,7 @@
     "angular-material": "1.1.x",
     "angular-material-data-table": "^0.10.9",
     "components-font-awesome": "^4.7.0",
-    "angular-material-sidenav": "^0.0.14"
+    "angular-material-sidenav": "^0.0.14",
+    "material-design-icons": "^3.0.1"
   }
 }

sdk/Business/apputils.business.js

@@ -0,0 +1,26 @@
+/**
+ * Created by robin on 12/15/16.
+ */
+
+(function () {
+    'use strict';
+
+    angular.module('appSdk')
+        .factory('AppUtilsBusiness', [function () {
+
+            var AppUtilsBusiness = {};
+
+            AppUtilsBusiness.convertOrderBy = function(orderBy)
+            {
+                if (orderBy[0] == '-') {
+                    orderBy = orderBy.substr(1) + ":DESC";
+                }
+                else {
+                    orderBy = orderBy + ":ASC";
+                }
+                return orderBy;
+            };
+
+            return AppUtilsBusiness;
+        }]);
+})();