Make ReactiveVars in settings update subscriptions for server-side co…

…llections. (#357)

lib/reactive_table.js

@@ -336,12 +336,34 @@ var getPageCount = function () {
     return Math.ceil(count / rowsPerPage);
 };
 
-var getUpdateHandleForTemplate = function (template_instance) {
-    if (!template_instance.updateHandle) {
-        template_instance.updateHandle = _.debounce(updateHandle, 200);
-    }
-    return template_instance.updateHandle;
-};
+Template.reactiveTable.onCreated(function() {
+   this.updateHandle = _.debounce(updateHandle, 200);
+
+   var rowsPerPage = this.data.rowsPerPage || (this.data.settings && this.data.settings.rowsPerPage);
+   var currentPage = this.data.currentPage || (this.data.settings && this.data.settings.currentPage);
+   var fields = this.data.fields || (this.data.settings && this.data.settings.fields) || [];
+
+   var template = this;
+   Tracker.autorun(function(c) {
+     if (rowsPerPage instanceof ReactiveVar) {
+       rowsPerPage.dep.depend();
+     }
+     if (currentPage instanceof ReactiveVar) {
+       currentPage.dep.depend();
+     }
+     _.each(fields, function (field) {
+       if (field.sortOrder && field.sortOrder instanceof ReactiveVar) {
+         field.sortOrder.dep.depend();
+       }
+       if (field.sortDirection && field.sortDirection instanceof ReactiveVar) {
+         field.sortDirection.dep.depend();
+       }
+     });
+     if (template.context) {
+       template.updateHandle(template.context);
+     }
+   });
+});
 
 Template.reactiveTable.onDestroyed(function() {
   if (this.context.server && this.context.handle) {
@@ -535,7 +557,7 @@ Template.reactiveTable.events({
         var target = $(event.target).is('i') ? $(event.target).parent() : $(event.target);
         var sortFieldId = target.attr('fieldid');
         changePrimarySort(sortFieldId, template.context.fields, template.multiColumnSort);
-        getUpdateHandleForTemplate(template)(template.context);
+        template.updateHandle(template.context);
     },
 
     'click .reactive-table-columns-dropdown li': function (event) {
@@ -562,7 +584,7 @@ Template.reactiveTable.events({
         if (currentPage > pageCount) {
           template.context.currentPage.set(pageCount - 1);
         }
-        getUpdateHandleForTemplate(template)(template.context);
+        template.updateHandle(template.context);
     },
 
     'change .reactive-table-navigation .page-number input': function (event) {
@@ -577,20 +599,20 @@ Template.reactiveTable.events({
         var template = Template.instance();
         template.context.currentPage.set(currentPage - 1);
         $(event.target).val(currentPage);
-        getUpdateHandleForTemplate(template)(template.context);
+        template.updateHandle(template.context);
     },
 
     'click .reactive-table-navigation .previous-page': function (event) {
         var template = Template.instance();
         var currentPage = template.context.currentPage.get();
         template.context.currentPage.set(currentPage - 1);
-        getUpdateHandleForTemplate(template)(template.context);
+        template.updateHandle(template.context);
     },
 
     'click .reactive-table-navigation .next-page': function (event) {
         var template = Template.instance();
         var currentPage = template.context.currentPage.get();
         template.context.currentPage.set(currentPage + 1);
-        getUpdateHandleForTemplate(template)(template.context);
+        template.updateHandle(template.context);
     }
 });

package.js

@@ -1,6 +1,6 @@
 Package.describe({
   summary: "A reactive table designed for Meteor",
-  version: "0.8.26",
+  version: "0.8.27",
   name: "aslagle:reactive-table",
   git: "https://github.com/aslagle/reactive-table.git"
 });
@@ -10,6 +10,7 @@ Package.on_use(function (api) {
     api.use('templating', 'client');
     api.use('jquery', 'client');
     api.use('underscore', 'client');
+    api.use('[email protected]', 'client');
     api.use('[email protected]', 'client');
     api.use("anti:[email protected]", 'client');
     api.use("[email protected]", ["server", "client"]);
@@ -33,6 +34,7 @@ Package.on_test(function (api) {
     api.use('templating', 'client');
     api.use('jquery', 'client');
     api.use('underscore', ['client', 'server']);
+    api.use('[email protected]', 'client');
     api.use('[email protected]', 'client');
     api.use("anti:[email protected]", 'client');
     api.use("mongo", ["server", "client"]);

test/test_fields.js

@@ -402,6 +402,43 @@ testAsyncMulti('Fields - sortOrder ReactiveVar', [function (test, expect) {
   Meteor.setTimeout(expectSortByScore, 0);
 }]);
 
+testAsyncMulti('Fields - sortOrder ReactiveVar with server-side collection', [function (test, expect) {
+  var nameOrder = new ReactiveVar(0);
+  var scoreOrder = new ReactiveVar(1);
+  var table = Blaze.renderWithData(
+    Template.reactiveTable,
+    {
+      collection: "collection",
+      fields: [
+        {key: 'name', label: 'Name', sortOrder: nameOrder},
+        {key: 'score', label: 'Score', sortOrder: scoreOrder}
+      ]
+    },
+    document.body
+  );
+
+  var expectSortByName = expect(function () {
+    test.equal($('.reactive-table tbody tr:first-child td:first-child').text(), "Ada Lovelace", "sort should be by name");
+    test.equal($('.reactive-table tbody tr:nth-child(2) td:first-child').text(), "Carl Friedrich Gauss", "sort should be by name");
+    test.equal($('.reactive-table tbody tr:nth-child(6) td:first-child').text(), "Nikola Tesla", "sort should be by name");
+    test.equal(nameOrder.get(), 0, 'name ReactiveVar should update');
+
+    Blaze.remove(table);
+  });
+
+  var expectSortByScore = expect(function () {
+    test.equal($('.reactive-table tbody tr:first-child td:first-child').text(), "Carl Friedrich Gauss", "sort should be by score");
+    test.equal($('.reactive-table tbody tr:nth-child(2) td:first-child').text(), "Ada Lovelace", "sort should be by score");
+    test.equal($('.reactive-table tbody tr:nth-child(6) td:first-child').text(), "Nikola Tesla", "sort should be by score");
+
+    $('.reactive-table th:first-child').click();
+    Meteor.setTimeout(expectSortByName, 500);
+  });
+
+  nameOrder.set(2);
+  Meteor.setTimeout(expectSortByScore, 500);
+}]);
+
 Tinytest.add('Fields - sortDirection', function (test) {
   _.each(['descending', 'desc', -1], function (sort) {
     testTable(
@@ -489,6 +526,41 @@ testAsyncMulti('Fields - sortDirection ReactiveVar', [function (test, expect) {
   Meteor.setTimeout(expectDescending, 0);
 }]);
 
+testAsyncMulti('Fields - sortDirection ReactiveVar with server-side collection', [function (test, expect) {
+  var nameDirection = new ReactiveVar(1);
+  var table = Blaze.renderWithData(
+    Template.reactiveTable,
+    {
+      collection: "collection",
+      fields: [
+        {key: 'name', label: 'Name', sortDirection: nameDirection}
+      ]
+    },
+    document.body
+  );
+
+  var expectAscending = expect(function () {
+    test.equal($('.reactive-table tbody tr:first-child td:first-child').text(), "Ada Lovelace", "sort should be ascending");
+    test.equal($('.reactive-table tbody tr:nth-child(2) td:first-child').text(), "Carl Friedrich Gauss", "sort should be ascending");
+    test.equal($('.reactive-table tbody tr:nth-child(6) td:first-child').text(), "Nikola Tesla", "sort should be ascending");
+    test.equal(nameDirection.get(), 1, 'ReactiveVar should update');
+
+    Blaze.remove(table);
+  });
+
+  var expectDescending = expect(function () {
+    test.equal($('.reactive-table tbody tr:first-child td:first-child').text(), "Nikola Tesla", "sort should be descending");
+    test.equal($('.reactive-table tbody tr:nth-child(2) td:first-child').text(), "Marie Curie", "sort should be descending");
+    test.equal($('.reactive-table tbody tr:nth-child(6) td:first-child').text(), "Ada Lovelace", "sort should be descending");
+
+    $('.reactive-table th:first-child').click();
+    Meteor.setTimeout(expectAscending, 500);
+  });
+
+  nameDirection.set(-1);
+  Meteor.setTimeout(expectDescending, 500);
+}]);
+
 Tinytest.add('Fields - default sort', function (test) {
   testTable(
     {

test/test_settings.js

@@ -372,6 +372,45 @@ testAsyncMulti('Settings - currentPage var updates table', [function (test, expe
   Meteor.setTimeout(expectLastPage, 0);
 }]);
 
+testAsyncMulti('Settings - currentPage var updates table with server-side collection', [function (test, expect) {
+  var page = new ReactiveVar(0);
+
+  var table = Blaze.renderWithData(
+    Template.reactiveTable,
+    {collection: "collection", fields: ["name"], settings: {rowsPerPage: 2, currentPage: page}},
+    document.body
+  );
+
+  var expectFirstPage = expect(function () {
+    test.equal($('.reactive-table tbody tr:first-child td:first-child').text(), "Ada Lovelace", "should be on first page");
+    test.length($('.reactive-table tbody tr'), 2, "first page should have two rows");
+    test.equal($('.reactive-table-navigation .page-number input').val(), "1", "displayed page number should be 1");
+
+    Blaze.remove(table);
+  });
+
+  var expectSecondPage = expect(function () {
+    test.equal($('.reactive-table tbody tr:first-child td:first-child').text(), "Claude Shannon", "should be on the second page");
+    test.length($('.reactive-table tbody tr'), 2, "second page should have two rows");
+    test.equal($('.reactive-table-navigation .page-number input').val(), "2", "displayed page number should be 2");
+
+    page.set(0);
+    Meteor.setTimeout(expectFirstPage, 500);
+  });
+
+  var expectLastPage = expect(function () {
+    test.equal($('.reactive-table tbody tr:first-child td:first-child').text(), "Marie Curie", "should be on last page");
+    test.length($('.reactive-table tbody tr'), 2, "last page should have two rows");
+    test.equal($('.reactive-table-navigation .page-number input').val(), "3", "displayed page number should be 3");
+
+    page.set(1);
+    Meteor.setTimeout(expectSecondPage, 500);
+  });
+
+  page.set(2);
+  Meteor.setTimeout(expectLastPage, 500);
+}]);
+
 testAsyncMulti('Settings - currentPage var updated from table changes', [function (test, expect) {
   var page = new ReactiveVar(0);
 
@@ -433,6 +472,31 @@ testAsyncMulti('Settings - rowsPerPage var updates table', [function (test, expe
   Meteor.setTimeout(expectFiveRows, 0);
 }]);
 
+testAsyncMulti('Settings - rowsPerPage var updates table with server-side collection', [function (test, expect) {
+  var rowsPerPage = new ReactiveVar(5);
+
+  var table = Blaze.renderWithData(
+    Template.reactiveTable,
+    {collection: "collection", fields: ["name"], settings: {rowsPerPage: rowsPerPage}},
+    document.body
+  );
+
+  var expectThreeRows = expect(function () {
+    test.length($('.reactive-table tbody tr'), 3, "three rows should be rendered");
+
+    Blaze.remove(table);
+  });
+
+  var expectFiveRows = expect(function () {
+    test.length($('.reactive-table tbody tr'), 5, "five rows should be rendered");
+
+    rowsPerPage.set(3);
+    Meteor.setTimeout(expectThreeRows, 500);
+  });
+
+  Meteor.setTimeout(expectFiveRows, 500);
+}]);
+
 testAsyncMulti('Settings - rowsPerPage var updated from table changes', [function (test, expect) {
   var rowsPerPage = new ReactiveVar(5);