o Adding details page for persons.

o Better front page.

2 files changed, 70 insertions, 23 deletions

diff --git a/src/main/webapp/apps/frontPageApp/frontPage.html b/src/main/webapp/apps/frontPageApp/frontPage.html
index bfa2477..4523e6f 100644
--- a/src/main/webapp/apps/frontPageApp/frontPage.html
+++ b/src/main/webapp/apps/frontPageApp/frontPage.html
@@ -1,24 +1,15 @@
 <div class="container">
 
-<div class="page-header">
-  <h1>Users</h1>
-</div>
+  <div class="page-header">
+    <h1>Newcomers</h1>
+  </div>
+
+  <style>
+    .personsGrid {
+      height: 400px;
+    }
+  </style>
 
-<p>
-  <table>
-    <thead>
-      <th>Name</th>
-      <th>Level</th>
-      <th>Count</th>
-      <th>Progress</th>
-      <th>Goal</th>
-    </thead>
-    <tbody ng-repeat="person in persons">
-    <tr>
-      <td>{{person.name}}</td>
-      <td>{{person.badges.length}}</td>
-    </tr>
-  </table>
-</p>
+  <div class="personsGrid" ng-grid="personsGridOptions"><!-- --></div>
 
 </div>
diff --git a/src/main/webapp/apps/frontPageApp/frontPageApp.js b/src/main/webapp/apps/frontPageApp/frontPageApp.js
index 4c5df8b..d92a163 100644
--- a/src/main/webapp/apps/frontPageApp/frontPageApp.js
+++ b/src/main/webapp/apps/frontPageApp/frontPageApp.js
@@ -1,12 +1,68 @@
 'use strict';
 
-var frontPageApp = angular.module('frontPageApp', ['personService']).config(function ($routeProvider, $locationProvider) {
+var frontPageApp = angular.module('frontPageApp', ['ngGrid', 'personService']).config(function ($routeProvider, $locationProvider) {
   $routeProvider.
       when('/', {controller: FrontPageCtrl, templateUrl: '/apps/frontPageApp/frontPage.html?noCache=' + noCache});
 });
 
-function FrontPageCtrl($scope, $location, PersonService) {
-  PersonService.query(function (persons) {
-    $scope.persons = persons;
+function FrontPageCtrl($scope, $http, PersonService) {
+  $scope.persons = [];
+
+  $scope.pagingOptions = {
+    pageSizes: [10],
+    pageSize: 10,
+    totalServerItems: 0,
+    currentPage: 1
+  };
+
+  $scope.personsGridOptions = {
+    data: 'persons',
+    displayFooter: true,
+    enablePaging: true,
+    showFilter: false,
+    showColumnMenu: false,
+    canSelectRows: false,
+    displaySelectionCheckbox: false,
+    pagingOptions: $scope.pagingOptions,
+    columnDefs: [
+      {
+        field: 'name',
+        displayName: 'Name',
+        cellTemplate: '<a href="/person/{{row.getProperty(\'uuid\')}}">{{row.getProperty(col.field)}}</a>'
+      },
+      {
+        field: 'badges',
+        displayName: 'Badges',
+        cellTemplate: '<div>{{row.getProperty(col.field).length}}</div>'
+      }
+    ]
+  };
+
+  $scope.setPagingData = function(data, page, pageSize){
+//    $scope.persons = data.slice((page - 1) * pageSize, page * pageSize);
+    $scope.persons = data;
+    $scope.personsGridOptions.totalServerItems = data.length;
+    if (!$scope.$$phase) {
+      $scope.$apply();
+    }
+  };
+
+  $scope.getPagedDataAsync = function (pageSize, page/*, searchText*/) {
+    setTimeout(function () {
+
+      PersonService.query({startIndex: page * pageSize, count: pageSize}, function (persons) {
+        $scope.setPagingData(persons, page, pageSize);
+      });
+    }, 100);
+  };
+
+  $scope.$watch('pagingOptions', function () {
+    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
+  }, true);
+
+  $http.get('/resource/core/person-count').success(function(count) {
+    $scope.pagingOptions.totalServerItems = count;
+
+    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
   });
 }