o Improved paging with a "view" state that's either 'loading', 'data' or 'error'.

3 files changed, 69 insertions, 33 deletions

diff --git a/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java b/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java
index 158e9ab..8ca2521 100755
--- a/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java
+++ b/src/main/java/io/trygvis/esper/testing/web/resource/CoreResource.java
@@ -35,6 +35,11 @@ public class CoreResource extends AbstractResource {
     @Path("/person")
     public List<PersonDetailJson> getPersons(@MagicParam final PageRequest pageRequest,
                                              @QueryParam("query") final String query) throws Exception {
+//        Thread.sleep(1000);
+//        if(new Random().nextInt(3) == 0) {
+//            throw new RuntimeException("internal error");
+//        }
+
         return da.inTransaction(new CoreDaosCallback<List<PersonDetailJson>>() {
             protected List<PersonDetailJson> run() throws SQLException {
                 List<PersonDetailJson> list = new ArrayList<>();
@@ -201,7 +206,7 @@ public class CoreResource extends AbstractResource {
 
         protected final SqlF<BuildDto, BuildJson> getBuildJson = new SqlF<BuildDto, BuildJson>() {
             public BuildJson apply(BuildDto dto) throws SQLException {
-                return new BuildJson(dto.uuid, dto.timestamp, dto.success);
+                return new BuildJson(dto.uuid, dto.createdDate, dto.timestamp, dto.success);
             }
         };
 
@@ -245,11 +250,13 @@ public class CoreResource extends AbstractResource {
 class BuildJson {
     public final UUID uuid;
     public final DateTime createdDate;
+    public final DateTime timestamp;
     public final boolean success;
 
-    public BuildJson(UUID uuid, DateTime createdDate, boolean success) {
+    public BuildJson(UUID uuid, DateTime createdDate, DateTime timestamp, boolean success) {
         this.uuid = uuid;
         this.createdDate = createdDate;
+        this.timestamp = timestamp;
         this.success = success;
     }
 }
diff --git a/src/main/resources/webapp/apps/core/PagingTableService.js b/src/main/resources/webapp/apps/core/PagingTableService.js
index a2d53f9..b602fbe 100755
--- a/src/main/resources/webapp/apps/core/PagingTableService.js
+++ b/src/main/resources/webapp/apps/core/PagingTableService.js
@@ -2,45 +2,67 @@ function PagingTableService() {
   var create = function ($scope, fetchCallback, options) {
     options = options || {};
     var watcher = options.watcher || function(){};
+    // This is exposed to the view as accessible variables
     var self = {
       rows: [],
       query: "",
       startIndex: options.startIndex || 0,
       count: options.count || 10,
+      error: undefined
+    };
+
+    var internal = {
+      // either "loading", "data" or "error"
+      state: "loading",
       currentlySearching: false,
       queryStart: 0
     };
 
     var update = function () {
       var query = self.query;
-      if (self.currentlySearching) {
+      if (internal.currentlySearching) {
         console.log("query active, storing =", query);
         return;
       }
-      self.currentlySearching = true;
-      self.queryStart = new Date().getTime();
+      internal.currentlySearching = true;
+      internal.queryStart = new Date().getTime();
 
       // This will update the spinner if the user want to show it.
       var interval = setInterval(function () {
         $scope.$apply();
       }, 500);
 
-      fetchCallback(self.startIndex, self.count, query, function (data) {
+      fetchCallback(self.startIndex, self.count, query, function (data, error) {
         var now = new Date().getTime();
-        console.log("Query took " + (now - self.queryStart) + "ms");
-
+        console.log("Query took " + (now - internal.queryStart) + "ms");
         clearInterval(interval);
 
-        self.rows = data.rows;
-        self.currentlySearching = false;
-        self.queryStart = 0;
+        if(typeof data !== "undefined") {
+          internal.state = "data";
+          internal.currentlySearching = false;
+          internal.queryStart = 0;
+          self.rows = data.rows;
+          self.error = undefined;
 
-        if(self.query != query) {
-          console.log("Had a new query requested, sending. query =", query, ", self.query =", self.query);
-          update();
-        }
+          if(self.query != query) {
+            console.log("Had a new query requested, sending. query =", query, ", self.query =", self.query);
+            update();
+          }
 
-        watcher();
+          watcher();
+        }
+        else {
+          internal.state = "error";
+          internal.currentlySearching = false;
+          internal.queryStart = 0;
+          // Here we should probably store the old rows.
+          self.rows = [];
+          self.error = {
+            message: "wat!!"
+          };
+
+          watcher();
+        }
       });
     };
 
@@ -50,7 +72,7 @@ function PagingTableService() {
     };
 
     self.next = function () {
-      if (self.currentlySearching) {
+      if (internal.currentlySearching) {
         return;
       }
       self.startIndex += self.count;
@@ -58,7 +80,7 @@ function PagingTableService() {
     };
 
     self.prev = function () {
-      if (self.currentlySearching) {
+      if (internal.currentlySearching) {
         return;
       }
       if (self.startIndex == 0) {
@@ -83,16 +105,10 @@ function PagingTableService() {
 
     /*
      * UI State queries
-     *
-     * TODO: the results should only be shown if the last query was successful. Add an 'error' state too.
      */
 
-    self.showSpinner = function () {
-      return self.currentlySearching && new Date().getTime() - self.queryStart > 500;
-    };
-
-    self.showResults = function () {
-      return !self.currentlySearching;
+    self.viewState = function() {
+      return internal.state;
     };
 
     self.showPrev = function () {
@@ -104,11 +120,11 @@ function PagingTableService() {
     };
 
     self.nextDisabled = function () {
-      return self.currentlySearching;
+      return internal.currentlySearching;
     };
 
     self.prevDisabled = function () {
-      return self.currentlySearching;
+      return internal.currentlySearching;
     };
 
     // Do an initial fetch
@@ -137,6 +153,10 @@ function PagingTableService() {
           totalResults: totalResults,
           rows: data
         });
+      }, function() {
+        console.log("Failed");
+        console.log(arguments);
+        cb(undefined, {message: "Error loading data..."});
       });
     };
   };
diff --git a/src/main/resources/webapp/apps/frontPageApp/personList.html b/src/main/resources/webapp/apps/frontPageApp/personList.html
index d229659..f36aba7 100755
--- a/src/main/resources/webapp/apps/frontPageApp/personList.html
+++ b/src/main/resources/webapp/apps/frontPageApp/personList.html
@@ -33,7 +33,7 @@
 
   <div class="row">
     <div class="span12">
-      <div class="row" ng-show="persons.showSpinner()">
+      <div class="row" ng-show="persons.viewState() == 'loading'">
         <div class="span12">
           <div style="height: 100px">
             <div spinner spinner-class="wat" spinner-left="564px" spinner-top="50%"></div>
@@ -41,19 +41,28 @@
         </div>
       </div>
 
-      <div class="row" ng-repeat="group in personGroups" ng-show="persons.showResults()">
+      <div class="row" ng-repeat="group in personGroups" ng-show="persons.viewState() == 'data'">
         <div class="span3" ng-repeat="person in group" style="padding-bottom: 1em">
           <div class="row">
             <avatar-xl person="person.person"></avatar-xl>
             <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>
+              <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>
 
+      <div class="row" ng-show="persons.viewState() == 'error'">
+        <div class="span12">
+          <p>An error occurred when loading the data...</p>
+          <p ng-show="persons.error">
+            Error: {{persons.error.message}}
+          </p>
+        </div>
+      </div>
+
       <ul class="pager">
         <li ng-show="persons.showPrev()" class="previous {{{true: 'disabled', false: ''}[persons.prevDisabled()]}}">
           <a ng-click="persons.prev()">&larr; Prev</a>