o Much better person list.

2 files changed, 57 insertions, 28 deletions

diff --git a/src/main/webapp/apps/frontPageApp/frontPageApp.js b/src/main/webapp/apps/frontPageApp/frontPageApp.js
index c973983..39dbc9d 100755
--- a/src/main/webapp/apps/frontPageApp/frontPageApp.js
+++ b/src/main/webapp/apps/frontPageApp/frontPageApp.js
@@ -13,14 +13,35 @@ function FrontPageCtrl($scope, Person, Badge) {
 }
 
 function PersonListCtrl($scope, Person, PagingTableService) {
-  $scope.persons = PagingTableService.create($scope, PagingTableService.defaultCallback(Person, {orderBy: "name"}));
+  var personsWatcher = function () {
+    var array = $scope.persons.rows;
+
+    var group = [];
+    var groups = [];
+    angular.forEach(array, function(element) {
+      group.push(element);
+      if(group.length == 4) {
+        groups.push(group);
+        group = [];
+      }
+    });
+
+    if(group.length != 0) {
+      groups.push(group);
+    }
+
+    $scope.personGroups = groups;
+  };
+
+  $scope.persons = PagingTableService.create($scope, PagingTableService.defaultCallback(Person, {orderBy: "name"}), {count: 4 * 6, watcher: personsWatcher});
+
+  $scope.personGroups = [];
 }
 
 function PersonCtrl($scope, $routeParams, Person, Build, PagingTableService) {
   var personUuid = $routeParams.personUuid;
 
   $scope.mode = 'overview';
-
   $scope.builds = PagingTableService.create($scope, PagingTableService.defaultCallback(Build, {person: personUuid}));
 
   $scope.setMode = function(mode) {
@@ -44,8 +65,4 @@ function PersonCtrl($scope, $routeParams, Person, Build, PagingTableService) {
   Build.query({person: personUuid}, function (builds) {
     $scope.recentBuilds = builds;
   });
-
-//  Badge.query({person: personUuid}, function (badges) {
-//    $scope.badges = badges;
-//  });
 }
diff --git a/src/main/webapp/apps/frontPageApp/personList.html b/src/main/webapp/apps/frontPageApp/personList.html
index a4f48c1..5212ff6 100755
--- a/src/main/webapp/apps/frontPageApp/personList.html
+++ b/src/main/webapp/apps/frontPageApp/personList.html
@@ -6,30 +6,42 @@
     <h1>People</h1>
   </div>
 
+  <style>
+    .avatar-image {
+      /* This has to match bootstrap's row margin. */
+      margin-left: 30px;
+      padding-right: 1em;
+      float: left;
+      margin-top: 0;
+
+      /* This has to match the Gravatar image */
+      width: 80px;
+      height: 80px;
+    }
+  </style>
+
   <div class="row">
     <div class="span12">
-      <table class="table">
-        <tbody>
-        <tr ng-repeat="person in persons.rows">
-          <td><a href="/#/person/{{person.person.uuid}}">{{person.person.name}}</a></td>
-        </tr>
-        </tbody>
-        <tfoot>
-        <tr>
-          <td colspan="2">
-            <ul class="pager">
-              <!--ng-class="{disabled: persons.startIndex == 0}"-->
-              <li class="previous" ng-hide="persons.startIndex == 0">
-                <a ng-click="persons.prev()">&larr; Prev</a>
-              </li>
-              <li class="next">
-                <a ng-click="persons.next()">Next &rarr;</a>
-              </li>
-            </ul>
-          </td>
-        </tr>
-        </tfoot>
-      </table>
+      <div class="row" ng-repeat="group in personGroups">
+        <div class="span3" ng-repeat="person in group" style="padding-bottom: 1em">
+          <div class="row">
+            <img ng-src="{{person.person.gravatar}}?default=identicon" class="avatar-image"/>
+            <a href="/#/person/{{person.person.uuid}}">{{person.person.name}}</a>
+            <br/>
+            <span ng-repeat="level in person.badges | countBadgeByLevel | gz">
+              <span class="badge-inverse badge-level-{{$index + 1}} badge"><i class="icon-user"></i> x {{level}}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <ul class="pager">
+        <li class="previous" ng-hide="persons.startIndex == 0">
+          <a ng-click="persons.prev()">&larr; Prev</a>
+        </li>
+        <li class="next">
+          <a ng-click="persons.next()">Next &rarr;</a>
+        </li>
+      </ul>
     </div>
   </div>
 </div>