[serenity challenge] challenges grid listing

bower.json

@@ -10,6 +10,7 @@
     "angular-route": "latest",
     "bootstrap": "3.1.1",
     "angular-bootstrap": "0.11.0",
-    "angular-ui-router": "#master"
+    "angular-ui-router": "#master",
+    "ng-grid": "latest"
   }
 }

config/assets.json

@@ -1,7 +1,9 @@
 {
   "core": {
     "css": {
-      "bower_components/build/css/dist.min.css": []
+      "bower_components/build/css/dist.min.css": [
+        "bower_components/ng-grid/ng-grid.css"
+      ]
     },
     "js": {
       "bower_components/build/js/dist.min.js": [
@@ -12,7 +14,8 @@
         "bower_components/angular-resource/angular-resource.js",
         "bower_components/angular-ui-router/release/angular-ui-router.js",
         "bower_components/angular-bootstrap/ui-bootstrap.js",
-        "bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
+        "bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
+        "bower_components/ng-grid/ng-grid-2.0.12.debug.js"
       ]
     }
   }

packages/challenges/app.js

@@ -60,7 +60,7 @@ Challenges.register(function (app, auth, database) {
         //you now have the settings object
     });
    */
-
+  Challenges.aggregateAsset('css', 'challenges.css');
 
   return Challenges;
-});
+});

packages/challenges/public/assets/css/challenges.css

@@ -1,3 +1,8 @@
 .challenges-example h1{
 	background-color: purple
 }
+
+.gridStyle {
+    border: 1px solid rgb(212,212,212);
+    height: 480px;
+}

packages/challenges/public/challenges.js

@@ -3,4 +3,4 @@
  */
 'use strict';
 
-angular.module('mean.challenges', []);
+angular.module('mean.challenges', ['ngGrid']);

packages/challenges/public/controllers/challenges.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-angular.module('mean.challenges').controller('ChallengesController', ['$scope', '$stateParams', '$location', '$sce', 'Global', 'Challenges',
+angular.module('mean.challenges', ['ngGrid']).controller('ChallengesController', ['$scope', '$stateParams', '$location', '$sce', 'Global', 'Challenges',
   function($scope, $stateParams, $location, $sce, Global, Challenges) {
     $scope.global = Global;
 
@@ -145,5 +145,16 @@ angular.module('mean.challenges').controller('ChallengesController', ['$scope',
         }
       });
     };
+
+    $scope.gridOptions = {
+      data: 'challenges',
+      columnDefs: [
+          {field:'id', displayName:'', cellTemplate: '<a class="btn" href="/#!/challenges/{{row.getProperty(col.field)}}/edit"><i class="glyphicon glyphicon-edit"></i></a>' },
+          {field:'title', displayName: 'Title', cellTemplate: '<a data-ng-href="#!/challenges/{{row.getProperty(\'id\')}}">{{row.getProperty(col.field)}}</a>' },
+          {field:'creator', displayName: 'Creator'},
+          {field:'createdAt', displayName:'Created', cellFilter: 'date:\'yyyy-MM-dd HH:mm a Z\'' }
+      ]
+    };
+
   }
 ]);

packages/challenges/public/views/list.html

@@ -1,4 +1,5 @@
 <section data-ng-controller="ChallengesController" data-ng-init="find()">
+<!--
   <ul class="challenges list-unstyled">
     <li data-ng-repeat="challenge in challenges">
 
@@ -15,7 +16,8 @@ <h2>
 
     </li>
   </ul>
-
+-->
+  <div class="gridStyle" ng-grid="gridOptions"></div>
   <h1 data-ng-hide="!challenges || challenges.length">No challenges yet. <br>
    Why don't you <a href="/#!/challenges/create">Create One</a>?</h1>
 </section>