Support dynamic perPage

TahaSh · Jun 1, 2016 · 63b3417 · 63b3417
1 parent 01c5076
commit 63b3417
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 6 deletions.
diff --git a/dist/vue-paginate.js b/dist/vue-paginate.js
@@ -253,7 +253,7 @@ exports.default = {
 
     var vm = this.vm;
     this.listName = this.expression;
-    var perPage = +this.arg;
+    var perPage = this.getPerPage();
     var limit = +this.params.limit;
 
     if (!vm[this.listName]) {
@@ -271,6 +271,13 @@ exports.default = {
       vm['refresh' + _utils2.default.capitalize(_this.listName) + 'Page']();
     });
 
+    if (this.isPerPageDynamic()) {
+      vm.$watch(this.arg, function (newVal) {
+        _this.list.perPage = +newVal <= 0 ? 1 : +newVal;
+        vm['refresh' + _utils2.default.capitalize(_this.listName) + 'Page']();
+      });
+    }
+
     this.list = { currentPage: 0, initial: 0, perPage: perPage };
 
     // Set links array.
@@ -307,7 +314,7 @@ exports.default = {
     };
 
     vm['refresh' + _utils2.default.capitalize(this.listName) + 'Page'] = function () {
-      vm['change' + _utils2.default.capitalize(_this.listName) + 'Page'](0);
+      vm['change' + _utils2.default.capitalize(_this.listName) + 'Page'](1);
     };
 
     // Turn on warnings back
@@ -344,6 +351,34 @@ exports.default = {
     var links = new _LimitedLinksGenerator2.default(this.vm, this.list, this.listName).generate(limit);
 
     this.vm.$set('limited' + _utils2.default.capitalize(this.listName) + 'Links', links);
+  },
+  getPerPage: function getPerPage() {
+    var vm = this.vm;
+    var arg = this.arg;
+    var regex = new RegExp(arg, 'i');
+
+    if (!this.isPerPageDynamic()) {
+      return +arg;
+    }
+
+    if (isDynamicPerPageValid()) {
+      this.arg = getDynamicArg();
+      return +vm[this.arg];
+    }
+
+    return 1;
+
+    function getDynamicArg() {
+      return Object.keys(vm.$data).find(function (a) {
+        return a.match(regex);
+      });
+    }
+    function isDynamicPerPageValid() {
+      return +vm[getDynamicArg()] > 0;
+    }
+  },
+  isPerPageDynamic: function isPerPageDynamic() {
+    return !Number.isInteger(Number.parseInt(this.arg));
   }
 };
 

diff --git a/dist/vue-paginate.min.js b/dist/vue-paginate.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-paginate",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A simple vue.js plugin to paginate data",
   "main": "src/index.js",
   "scripts": {

diff --git a/src/paginate.js b/src/paginate.js
@@ -28,7 +28,7 @@ export default {
 
     var vm = this.vm;
     this.listName = this.expression;
-    var perPage = +this.arg;
+    var perPage = this.getPerPage();
     var limit = +this.params.limit;
 
     if (!vm[this.listName]) {
@@ -46,6 +46,13 @@ export default {
       vm['refresh' + utils.capitalize(this.listName) + 'Page']();
     });
 
+    if (this.isPerPageDynamic()) {
+      vm.$watch(this.arg, (newVal) => {
+        this.list.perPage = +newVal <= 0 ? 1 : +newVal;
+        vm['refresh' + utils.capitalize(this.listName) + 'Page']();
+      });
+    }
+
     this.list = { currentPage: 0, initial: 0, perPage };
 
     // Set links array.
@@ -86,7 +93,7 @@ export default {
     };
 
     vm['refresh' + utils.capitalize(this.listName) + 'Page'] = () => {
-      vm['change' + utils.capitalize(this.listName) + 'Page'](0);
+      vm['change' + utils.capitalize(this.listName) + 'Page'](1);
     };
 
     // Turn on warnings back
@@ -134,5 +141,30 @@ export default {
         ).generate(limit);
 
     this.vm.$set('limited' + utils.capitalize(this.listName) + 'Links', links);
+  },
+
+  getPerPage () {
+    let vm = this.vm;
+    let arg = this.arg;
+    let regex = new RegExp(arg, 'i')
+
+    if (! this.isPerPageDynamic()) {
+      return +arg
+    }
+
+    if (isDynamicPerPageValid()) {
+      this.arg = getDynamicArg();
+      return +vm[this.arg];
+    }
+
+    return 1;
+
+    function getDynamicArg() { return Object.keys(vm.$data).find(a => a.match(regex)) }
+    function isDynamicPerPageValid () { return +vm[getDynamicArg()] > 0; }
+  },
+
+  isPerPageDynamic () {
+    return ! Number.isInteger(Number.parseInt(this.arg));
   }
+
 }
diff --git a/test/functional/test.js b/test/functional/test.js
@@ -134,6 +134,33 @@ describe('Vue-Paginate', () => {
       vm.$data.limitedLangsLinks.should.eql([1, 2, 3, 4, 5, 6, 7]);
     });
   });
+
+  describe('Dynamic perPage', () => {
+    it('supports dynamic perPage', () => {
+      vm = new Vue({
+        template: '<div v-paginate:perPage="langs">Hello</div>',
+        data: {
+          langs: ['PHP', 'JS', 'Ruby', 'Python'],
+          perPage: 2
+        }
+      }).$mount();
+
+      vm.$data.langs.should.have.length(2);
+    });
+
+    it('guards agains non-positive perPage', () => {
+      vm = new Vue({
+        template: '<div v-paginate:perPage="langs">Hello</div>',
+        data: {
+          langs: ['PHP', 'JS', 'Ruby', 'Python'],
+          perPage: -3
+        }
+      }).$mount();
+
+      vm.$data.langs.should.have.length(1);
+    });
+
+  });
 });
 
 var triggerUpdate = () => vm._directives[0].update(vm.$data.fullLangs);