Initial promotions listing (ng-grid) working

app/scripts/app.js

@@ -1,62 +1,63 @@
 'use strict';
 
 angular.module('robotoPromotoApp', [
-  'ngCookies',
-  'ngResource',
-  'ngSanitize',
-  'ngRoute'
+    'ngCookies',
+    'ngResource',
+    'ngSanitize',
+    'ngRoute',
+    'ngGrid'
 ])
-  .config(function ($routeProvider, $locationProvider, $httpProvider) {
-    $routeProvider
-      .when('/', {
-        templateUrl: 'partials/main',
-        controller: 'MainCtrl'
-      })
-      .when('/login', {
-        templateUrl: 'partials/login',
-        controller: 'LoginCtrl'
-      })
-      .when('/signup', {
-        templateUrl: 'partials/signup',
-        controller: 'SignupCtrl'
-      })
-      .when('/settings', {
-        templateUrl: 'partials/settings',
-        controller: 'SettingsCtrl',
-        authenticate: true
-      })
-      .when('/promotions', {
-        templateUrl: 'partials/promotions',
-        controller: 'PromotionsCtrl'
-      })
-      .otherwise({
-        redirectTo: '/'
-      });
-      
-    $locationProvider.html5Mode(true);
-      
-    // Intercept 401s and redirect you to login
-    $httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
-      return {
-        'responseError': function(response) {
-          if(response.status === 401) {
-            $location.path('/login');
-            return $q.reject(response);
-          }
-          else {
-            return $q.reject(response);
-          }
-        }
-      };
-    }]);
-  })
-  .run(function ($rootScope, $location, Auth) {
+    .config(function ($routeProvider, $locationProvider, $httpProvider) {
+        $routeProvider
+            .when('/', {
+                templateUrl: 'partials/main',
+                controller: 'MainCtrl'
+            })
+            .when('/login', {
+                templateUrl: 'partials/login',
+                controller: 'LoginCtrl'
+            })
+            .when('/signup', {
+                templateUrl: 'partials/signup',
+                controller: 'SignupCtrl'
+            })
+            .when('/settings', {
+                templateUrl: 'partials/settings',
+                controller: 'SettingsCtrl',
+                authenticate: true
+            })
+            .when('/promotions', {
+                templateUrl: 'partials/promotions',
+                controller: 'PromotionsCtrl'
+            })
+            .otherwise({
+                redirectTo: '/'
+            });
 
-    // Redirect to login if route requires auth and you're not logged in
-    $rootScope.$on('$routeChangeStart', function (event, next) {
-      
-      if (next.authenticate && !Auth.isLoggedIn()) {
-        $location.path('/login');
-      }
+        $locationProvider.html5Mode(true);
+
+        // Intercept 401s and redirect you to login
+        $httpProvider.interceptors.push(['$q', '$location', function ($q, $location) {
+            return {
+                'responseError': function (response) {
+                    if (response.status === 401) {
+                        $location.path('/login');
+                        return $q.reject(response);
+                    }
+                    else {
+                        return $q.reject(response);
+                    }
+                }
+            };
+        }]);
+    })
+    .run(function ($rootScope, $location, Auth) {
+
+        // Redirect to login if route requires auth and you're not logged in
+        $rootScope.$on('$routeChangeStart', function (event, next) {
+
+            if (next.authenticate && !Auth.isLoggedIn()) {
+                $location.path('/login');
+            }
+        });
     });
-  });

app/scripts/controllers/promotions.js

@@ -2,10 +2,59 @@
 
 angular.module('robotoPromotoApp')
     .controller('PromotionsCtrl', function ($scope, $http) {
-        $http.get('/api/promotions').success(function(promotions) {
-            $scope.gridPromotions = {
-                data: promotions,
-                filterOptions: $scope.filterOptions
-            };
-        });
+        $scope.filterOptions = {
+            filterText: "",
+            useExternalFilter: true
+        };
+        $scope.totalServerItems = 0;
+        $scope.pagingOptions = {
+            pageSizes: [5, 10, 20],
+            pageSize: 5,
+            currentPage: 1
+        }
+
+        $scope.setPagingData = function(data, page, pageSize){
+            var pagedData = data.slice((page-1) * pageSize, page * pageSize);
+            $scope.promotionData = pagedData;
+            $scope.totalServerItems = data.length;
+            if (!$scope.$$phase){
+                $scope.$apply();
+            }
+        };
+        $scope.getPagedDataAsync = function(pageSize, page, searchText){
+            setTimeout(function(){
+                var data;
+                if (searchText){
+                    var ft = searchText.toLowerCase();
+                }else{
+                    $http.get('api/promotions')
+                    .success(function (promotions) {
+                        $scope.setPagingData(promotions, page, pageSize);
+                    });
+                }
+            }, 3000);
+        };
+        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
+        $scope.$watch('pagingOptions', function(newVal, oldVal){
+            if (newVal != oldVal && newVal.currentPage != oldVal.currentPage){
+                $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
+            }
+        }, true);
+
+        $scope.$watch('filterOptions', function(newVal, oldVal){
+            if (newVal != oldVal){
+                $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
+            }
+        }, true);
+
+        $scope.gridPromotions = {
+            data: 'promotionData',
+            enablePaging: true,
+            showFooter: true,
+            totalServerItems: 'totalServerItems',
+            pagingOptions: $scope.pagingOptions,
+            filterOptions: $scope.filterOptions,
+            columnDefs: [{field:'title', displayName:'Title'}, {field:'created', displayName:'Date Created'}]
+        };
+        
     });

app/styles/main.scss

@@ -89,3 +89,10 @@ body {
         border-bottom: 0;
     }
 }
+
+/* Grids */
+.roboto-grid {
+    border: 1px solid rgb(212,212,212);
+    width: 600px; 
+    height: 300px;
+}

app/views/index.html

@@ -1,9 +1,13 @@
 <!doctype html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
-  <head>
+<!--[if lt IE 7]>
+<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>
+<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>
+<html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js"> <!--<![endif]-->
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <base href="/">
@@ -17,54 +21,63 @@
     <!-- endbuild -->
     <!-- build:css({.tmp,app}) styles/main.css -->
     <link rel="stylesheet" href="styles/main.css">
-    <link rel="stylesheet" href="bower_components/ng-grid/ng-grid.min.css"></link>
+    <link rel="stylesheet" href="bower_components/ui-grid/ng-grid.css">
     <!-- endbuild -->
-  </head>
-  <body ng-app="robotoPromotoApp">
-    <!--[if lt IE 7]>
-      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-    <![endif]-->
+</head>
+<body ng-app="robotoPromotoApp">
+<!--[if lt IE 7]>
+<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
+    your browser</a> to improve your experience.</p>
+<![endif]-->
 
-    <!-- Add your site or application content here -->
-    <div class="container" ng-view=""></div>
-    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
-     <script>
-       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-       ga('create', 'UA-XXXXX-X');
-       ga('send', 'pageview');
-    </script>
+<!-- Add your site or application content here -->
+<div class="container" ng-view=""></div>
+<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
+<script>
+    (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r;
+        i[r] = i[r] || function () {
+            (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date();
+        a = s.createElement(o),
+                m = s.getElementsByTagName(o)[0];
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m)
+    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+    ga('create', 'UA-XXXXX-X');
+    ga('send', 'pageview');
+</script>
 
-    <!--[if lt IE 9]>
-    <script src="bower_components/es5-shim/es5-shim.js"></script>
-    <script src="bower_components/json3/lib/json3.min.js"></script>
-    <![endif]-->
+<!--[if lt IE 9]>
+<script src="bower_components/es5-shim/es5-shim.js"></script>
+<script src="bower_components/json3/lib/json3.min.js"></script>
+<![endif]-->
 
-    <!-- build:js(app) scripts/vendor.js -->
-    <!-- bower:js -->
-    <script src="bower_components/jquery/dist/jquery.js"></script>
-    <script src="bower_components/angular/angular.js"></script>
-    <script src="bower_components/angular-resource/angular-resource.js"></script>
-    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
-    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
-    <script src="bower_components/angular-route/angular-route.js"></script>
-    <!-- endbower -->
-    <!-- endbuild -->
+<!-- build:js(app) scripts/vendor.js -->
+<!-- bower:js -->
+<script src="bower_components/jquery/dist/jquery.js"></script>
+<script src="bower_components/angular/angular.js"></script>
+<script src="bower_components/angular-resource/angular-resource.js"></script>
+<script src="bower_components/angular-cookies/angular-cookies.js"></script>
+<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
+<script src="bower_components/angular-route/angular-route.js"></script>
+<!-- endbower -->
+<!-- endbuild -->
+<script src="bower_components/ui-grid/ng-grid.js"></script>
 
-        <!-- build:js({.tmp,app}) scripts/scripts.js -->
-        <script src="scripts/app.js"></script>
-        <script src="scripts/controllers/main.js"></script>
-        <script src="scripts/controllers/navbar.js"></script>
-        <script src="scripts/controllers/promotions.js"></script>
-        <script src="scripts/controllers/login.js"></script>
-        <script src="scripts/controllers/signup.js"></script>
-        <script src="scripts/controllers/settings.js"></script>
-        <script src="scripts/services/auth.js"></script>
-        <script src="scripts/services/session.js"></script>
-        <script src="scripts/services/user.js"></script>
-        <script src="scripts/directives/mongooseError.js"></script>
-        <!-- endbuild -->
+<!-- build:js({.tmp,app}) scripts/scripts.js -->
+<script src="scripts/app.js"></script>
+<script src="scripts/controllers/main.js"></script>
+<script src="scripts/controllers/navbar.js"></script>
+<script src="scripts/controllers/promotions.js"></script>
+<script src="scripts/controllers/login.js"></script>
+<script src="scripts/controllers/signup.js"></script>
+<script src="scripts/controllers/settings.js"></script>
+<script src="scripts/services/auth.js"></script>
+<script src="scripts/services/session.js"></script>
+<script src="scripts/services/user.js"></script>
+<script src="scripts/directives/mongooseError.js"></script>
+<!-- endbuild -->
 </body>
 </html>

app/views/partials/promotions.html

@@ -1,7 +1,4 @@
 <div ng-include="'partials/navbar'"></div>
 
 <p><strong>Filter: </strong><input type="text" ng-model="filterOptions.filterText"/></p>
-<div class="gridStyle" ng-grid-"gridPromotions"></div>
-<div class="footer">
-  <p>♥ from the PodNoms team</p>
-</div>
+<div class="roboto-grid" ng-grid="gridPromotions"></div>