Merge pull request #3 from GHarutyunyan/v2.0.0

support Laravel API resource pagination object
lionix-team · Aug 5, 2019 · a3aa149 · a3aa149
2 parents d00bf99 + ff68520
commit a3aa149
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ methods: {
     }
 }
 ```
-`this.data` object must be Laravel Pagination object.
+`this.data` object must be Laravel default or API Resource Pagination object.
 ##### Example:
 ```javascript
 {
@@ -62,6 +62,38 @@ methods: {
     total: 200
 }
 ```
+or
+```javascript
+{
+    "data": [
+        {
+            "id": 1,
+            "name": "Eladio Schroeder Sr.",
+            "email": "therese28@example.com",
+        },
+        {
+            "id": 2,
+            "name": "Liliana Mayert",
+            "email": "evandervort@example.com",
+        }
+    ],
+    "links":{
+        "first": "http://example.com/pagination?page=1",
+        "last": "http://example.com/pagination?page=1",
+        "prev": null,
+        "next": null
+    },
+    "meta":{
+        "current_page": 1,
+        "from": 1,
+        "last_page": 1,
+        "path": "http://example.com/pagination",
+        "per_page": 15,
+        "to": 10,
+        "total": 10
+    }
+}
+```
 
 ## Customizations
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-laravel-paginex",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "Laravel Pagination with VueJS (customizable)",
   "main": "src/Pagination.vue",
   "repository": {

diff --git a/src/Pagination.vue b/src/Pagination.vue
@@ -15,14 +15,6 @@
 
 <script>
     export default {
-        data() {
-            return {
-                prevPageUrl: null,
-                nextPageUrl: null,
-                currentPage: 1,
-                numbers: []
-            }
-        },
         props: {
             data: {
                 required: true
@@ -120,38 +112,49 @@
             data: {
                 deep: true,
                 handler() {
-                    let current = this.data.current_page,
-                        last = this.data.last_page,
-                        delta = parseInt(this.numbersCountForShowProp),
-                        left = current - delta,
-                        right = current + delta + 1,
-                        range = [],
-                        rangeWithDots = [],
-                        l;
-                    for (let i = 1; i <= last; i++) {
-                        if (i == 1 || i == last || i >= left && i < right) {
-                            range.push(i);
-                        }
+                    this.init();
+                }
+            },
+        },
+        data() {
+            return {
+                prevPageUrl: null,
+                nextPageUrl: null,
+                currentPage: 1,
+                numbers: []
+            }
+        },
+        methods: {
+            init() {
+                let current = this.data.current_page ? this.data.current_page : this.data.meta.current_page,
+                    last = this.data.last_page ? this.data.last_page : this.data.meta.last_page,
+                    delta = parseInt(this.numbersCountForShowProp),
+                    left = current - delta,
+                    right = current + delta + 1,
+                    range = [],
+                    rangeWithDots = [],
+                    l;
+                for (let i = 1; i <= last; i++) {
+                    if (i == 1 || i == last || i >= left && i < right) {
+                        range.push(i);
                     }
-                    for (let i of range) {
-                        if (l) {
-                            if (i - l === 2) {
-                                rangeWithDots.push(l + 1);
-                            } else if (i - l !== 1) {
-                                rangeWithDots.push('...');
-                            }
+                }
+                for (let i of range) {
+                    if (l) {
+                        if (i - l === 2) {
+                            rangeWithDots.push(l + 1);
+                        } else if (i - l !== 1) {
+                            rangeWithDots.push('...');
                         }
-                        rangeWithDots.push(i);
-                        l = i;
                     }
-                    this.numbers = rangeWithDots;
-                    this.currentPage = this.data.current_page;
-                    this.nextPageUrl = this.data.next_page_url;
-                    this.prevPageUrl = this.data.prev_page_url;
+                    rangeWithDots.push(i);
+                    l = i;
                 }
+                this.numbers = rangeWithDots;
+                this.currentPage = this.data.current_page ? this.data.current_page : this.data.meta.current_page;
+                this.nextPageUrl = this.data.next_page_url ? this.data.next_page_url : this.data.links.next;
+                this.prevPageUrl = this.data.prev_page_url ? this.data.prev_page_url : this.data.links.prev;
             },
-        },
-        methods: {
             handler(page) {
                 let parameters = {};
                 if (this.requestParams) {
@@ -166,6 +169,9 @@
                 }
                 return false;
             }
+        },
+        mounted() {
+            this.init();
         }
     }
 </script>