Fauxton: Pagination improvements

8 files changed, 94 insertions, 33 deletions

diff --git a/src/fauxton/app/modules/databases/routes.js b/src/fauxton/app/modules/databases/routes.js
index 001fab6c8..19772642a 100644
--- a/src/fauxton/app/modules/databases/routes.js
+++ b/src/fauxton/app/modules/databases/routes.js
@@ -64,7 +64,6 @@ function(app, FauxtonAPI, Databases, Views) {
 
       databases.fetch().done(function(resp) {
         FauxtonAPI.when(databases.map(function(database) {
-          console.log('fetching', database);
           return database.status.fetch();
         })).always(function(resp) {
           //make this always so that even if a user is not allowed access to a database
diff --git a/src/fauxton/app/modules/documents/resources.js b/src/fauxton/app/modules/documents/resources.js
index a9e9836d6..70be81cf5 100644
--- a/src/fauxton/app/modules/documents/resources.js
+++ b/src/fauxton/app/modules/documents/resources.js
@@ -253,6 +253,7 @@ function(app, FauxtonAPI) {
     initialize: function(_models, options) {
       this.database = options.database;
       this.params = options.params;
+      this.skipFirstItem = false;
     },
 
     url: function(context) {
@@ -274,7 +275,9 @@ function(app, FauxtonAPI) {
 
       this.params.startkey_docid = '"' + lastId + '"';
       this.params.startkey = '"' + lastId + '"';
-      this.params.limit = num;
+      // when paginating forward, fetch 21 and don't show
+      // the first item as it was the last item in the previous list
+      this.params.limit = num + 1;
       return this.url('app');
     },
 
@@ -287,6 +290,7 @@ function(app, FauxtonAPI) {
         delete this.params.startkey;
         delete this.params.startkey_docid;
       }
+
       return this.url('app');
     },
 
@@ -298,14 +302,33 @@ function(app, FauxtonAPI) {
       return this.viewMeta.update_seq || false;
     },
 
+    recordStart: function () {
+      if (this.viewMeta.offset === 0) {
+        return 1;
+      }
+
+      if (this.skipFirstItem) {
+        return this.viewMeta.offset + 2;
+      }
+
+      return this.viewMeta.offset + 1;
+    },
+
     parse: function(resp) {
-      that = this;
+      var rows = resp.rows;
+
       this.viewMeta = {
         total_rows: resp.total_rows,
-        offest: resp.offset,
+        offset: resp.offset,
         update_seq: resp.update_seq
       };
-      return _.map(resp.rows, function(row) {
+
+      //Paginating, don't show first item as it was the last
+      //item in the previous page
+      if (this.skipFirstItem) {
+        rows = rows.splice(1);
+      }
+      return _.map(rows, function(row) {
         return {
           _id: row.id,
           _rev: row.value.rev,
@@ -322,10 +345,11 @@ function(app, FauxtonAPI) {
 
     initialize: function(_models, options) {
       this.database = options.database;
-      this.params = _.extend({limit: 10, reduce: false}, options.params);
+      this.params = _.extend({limit: 20, reduce: false}, options.params);
       this.idxType = "_view";
       this.view = options.view;
       this.design = options.design.replace('_design/','');
+      this.skipFirstItem = false;
     },
 
     url: function(context) {
@@ -366,6 +390,18 @@ function(app, FauxtonAPI) {
       return this.url('app');
     },
 
+    recordStart: function () {
+      if (this.viewMeta.offset === 0) {
+        return 1;
+      }
+
+      if (this.skipFirstItem) {
+        return this.viewMeta.offset + 2;
+      }
+
+      return this.viewMeta.offset + 1;
+    },
+
     totalRows: function() {
       return this.viewMeta.total_rows || "unknown";
     },
@@ -375,15 +411,20 @@ function(app, FauxtonAPI) {
     },
 
     parse: function(resp) {
+      var rows = resp.rows;
       this.endTime = new Date().getTime();
       this.requestDuration = (this.endTime - this.startTime);
 
+      if (this.skipFirstItem) {
+        rows = rows.splice(1);
+      }
+
       this.viewMeta = {
         total_rows: resp.total_rows,
         offset: resp.offset,
         update_seq: resp.update_seq
       };
-      return _.map(resp.rows, function(row) {
+      return _.map(rows, function(row) {
         return {
           value: row.value,
           key: row.key,
@@ -450,7 +491,7 @@ function(app, FauxtonAPI) {
       this.rows = options.rows;
       this.view = options.view;
       this.design = options.design.replace('_design/','');
-      this.params = _.extend({limit: 10, reduce: false}, options.params);
+      this.params = _.extend({limit: 20, reduce: false}, options.params);
       this.idxType = "_view";
     },
 
@@ -464,7 +505,7 @@ function(app, FauxtonAPI) {
 
       this.viewMeta = {
         total_rows: this.rows.length,
-        offest: 0,
+        offset: 0,
         update_seq: false
       };
 
diff --git a/src/fauxton/app/modules/documents/routes.js b/src/fauxton/app/modules/documents/routes.js
index 730b4bfde..0edf18d08 100644
--- a/src/fauxton/app/modules/documents/routes.js
+++ b/src/fauxton/app/modules/documents/routes.js
@@ -159,7 +159,8 @@ function(app, FauxtonAPI, Documents, Databases) {
     events: {
       "route:updateAllDocs": "updateAllDocsFromView",
       "route:updatePreviewDocs": "updateAllDocsFromPreview",
-      "route:reloadDesignDocs": "reloadDesignDocs"
+      "route:reloadDesignDocs": "reloadDesignDocs",
+      "route:paginate": "paginate"
     },
 
     initialize: function (route, masterLayout, options) {
@@ -328,6 +329,16 @@ function(app, FauxtonAPI, Documents, Databases) {
       }));
     },
 
+    paginate: function (direction) {
+      _.extend(this.documentsView.collection.params, app.getParams());
+      this.documentsView.forceRender();
+      if (direction === 'next') {
+        this.documentsView.collection.skipFirstItem = true;
+      } else {
+        this.documentsView.collection.skipFirstItem = false;
+      }
+    },
+
     reloadDesignDocs: function (event) {
       this.sidebar.forceRender();
 
diff --git a/src/fauxton/app/modules/documents/tests/resourcesSpec.js b/src/fauxton/app/modules/documents/tests/resourcesSpec.js
index 35bbdb367..e78a3c391 100644
--- a/src/fauxton/app/modules/documents/tests/resourcesSpec.js
+++ b/src/fauxton/app/modules/documents/tests/resourcesSpec.js
@@ -68,7 +68,7 @@ define([
     it('Should return urlNext', function () {
       var url = collection.urlNextPage(20);
 
-      assert.equal(url, 'database/databaseId/_all_docs?limit=20&startkey_docid=%22myId2%22&startkey=%22myId2%22');
+      assert.equal(url, 'database/databaseId/_all_docs?limit=21&startkey_docid=%22myId2%22&startkey=%22myId2%22');
 
     });
 
diff --git a/src/fauxton/app/modules/documents/views.js b/src/fauxton/app/modules/documents/views.js
index 08ea6767c..5bc6a7a43 100644
--- a/src/fauxton/app/modules/documents/views.js
+++ b/src/fauxton/app/modules/documents/views.js
@@ -442,7 +442,7 @@ function(app, FauxtonAPI, Paginate, Documents, pouchdb, Codemirror, JSHint, resi
     establish: function() {
       if (this.newView) { return null; }
 
-      return this.collection.fetch().fail(function() {
+      return this.collection.fetch({reset: true}).fail(function() {
         // TODO: handle error requests that slip through
         // This should just throw a notification, not break the page
         console.log("ERROR: ", arguments);
@@ -455,17 +455,21 @@ function(app, FauxtonAPI, Paginate, Documents, pouchdb, Codemirror, JSHint, resi
 
     serialize: function() {
       var totalRows = 0,
-      updateSeq = false;
+          recordStart = 0,
+          updateSeq = false;
 
       if (!this.newView) {
         totalRows = this.collection.totalRows();
         updateSeq = this.collection.updateSeq();
       }
 
+      recordStart = this.collection.recordStart();
+
       var info = {
         updateSeq: updateSeq,
+        offset: recordStart,
         totalRows: totalRows,
-        numModels: this.collection.models.length,
+        numModels: this.collection.models.length + recordStart - 1,
         viewList: this.viewList,
         requestDuration: null
       };
@@ -530,7 +534,7 @@ function(app, FauxtonAPI, Paginate, Documents, pouchdb, Codemirror, JSHint, resi
         },
         canShowNextfn: function () {
           
-          if ((collection.viewMeta.offset + 1) === collection.viewMeta.total_rows) {
+          if ((collection.viewMeta.offset + collection.length + 2) >= collection.viewMeta.total_rows) {
             return false;
           }
 
diff --git a/src/fauxton/app/modules/fauxton/paginate.js b/src/fauxton/app/modules/fauxton/paginate.js
index a32bbbe62..074fb479a 100644
--- a/src/fauxton/app/modules/fauxton/paginate.js
+++ b/src/fauxton/app/modules/fauxton/paginate.js
@@ -49,7 +49,6 @@ function(app, FauxtonAPI) {
       "click a#previous": 'previousClicked'
     },
 
-    currentDirection: 'next',
     previousIds: [],
 
     scrollTo: function () {
@@ -68,15 +67,15 @@ function(app, FauxtonAPI) {
 
     previousClicked: function (event) {
       event.preventDefault();
-      this.currentDirection = 'previous';
-      FauxtonAPI.navigate(this.previousUrlfn());
+      FauxtonAPI.navigate(this.previousUrlfn(), {trigger: false});
+      FauxtonAPI.triggerRouteEvent('paginate', 'previous');
     },
 
     nextClicked: function (event) {
       event.preventDefault();
-      this.currentDirection = 'next';
       this.previousIds.push(this.collection.first().id);
-      FauxtonAPI.navigate(this.nextUrlfn());
+      FauxtonAPI.navigate(this.nextUrlfn(), {trigger: false});
+      FauxtonAPI.triggerRouteEvent('paginate', 'next');
     },
 
     serialize: function () {
diff --git a/src/fauxton/app/templates/documents/all_docs_list.html b/src/fauxton/app/templates/documents/all_docs_list.html
index f60257551..e5ab8ac05 100644
--- a/src/fauxton/app/templates/documents/all_docs_list.html
+++ b/src/fauxton/app/templates/documents/all_docs_list.html
@@ -28,7 +28,7 @@ the License.
     </div>
   <% } %>
   <p>
-    Showing 1-<%= numModels %> of <%= totalRows %> rows
+  Showing <%=offset%> - <%= numModels %> of <%= totalRows %> rows
     <% if (updateSeq) { %>
       -- Update Sequence: <%= updateSeq %>
     <% } %>
diff --git a/src/fauxton/test/core/paginateSpec.js b/src/fauxton/test/core/paginateSpec.js
index 6b7bfb6e7..981380e27 100644
--- a/src/fauxton/test/core/paginateSpec.js
+++ b/src/fauxton/test/core/paginateSpec.js
@@ -55,12 +55,9 @@ define([
     });
 
     describe('#next', function () {
-
-      it('should set direction as next', function () {
-        paginate.$('a#next').click();
-
-        assert.equal(paginate.currentDirection, 'next');
-
+      beforeEach(function () {
+        //do this so it doesn't throw an error on other unwired up components
+        FauxtonAPI.triggerRouteEvent = function () {};
       });
 
       it('Should navigate', function () {
@@ -72,17 +69,19 @@ define([
         FauxtonAPI.navigate.restore();
       });
 
-    });
+      it('Should trigger routeEvent', function () {
+        var navigateMock = sinon.spy(FauxtonAPI, 'triggerRouteEvent');
 
+        paginate.$('a#next').click();
 
-    describe('#previous', function () {
+        assert.ok(navigateMock.calledOnce);
+        FauxtonAPI.triggerRouteEvent.restore();
+      });
 
-      it('should set direction as next', function () {
-        paginate.$('a#previous').click();
+    });
 
-        assert.equal(paginate.currentDirection, 'previous');
 
-      });
+    describe('#previous', function () {
 
       it('Should navigate', function () {
         var navigateMock = sinon.spy(FauxtonAPI, 'navigate');
@@ -93,6 +92,14 @@ define([
         FauxtonAPI.navigate.restore();
       });
 
+      it('Should trigger routeEvent', function () {
+        var navigateMock = sinon.spy(FauxtonAPI, 'triggerRouteEvent');
+
+        paginate.$('a#previous').click();
+
+        assert.ok(navigateMock.calledOnce);
+        FauxtonAPI.triggerRouteEvent.restore();
+      });
 
     });