From 1197329e27d7d6cad564d8091f7e0cc8018e694c Mon Sep 17 00:00:00 2001
From: Garik Harutyunyan <garik.harutyunyan99@gmail.com>
Date: Mon, 5 Aug 2019 00:25:31 +0400
Subject: [PATCH] support Laravel API resource pagination object

---
 README.md          | 34 +++++++++++++++++-
 package.json       |  2 +-
 src/Pagination.vue | 88 +++++++++++++++++++++++++---------------------
 3 files changed, 81 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index 07f5c11..c00475c 100644
--- 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
index 06305ca..169b66d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-laravel-paginex",
-  "version": "1.0.2",
+  "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
index 43eedee..b0b191e 100755
--- 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
@@ -55,10 +47,10 @@
                 default: 2
             },
             changePage: {
-                required:true
+                required: true
             },
             options: {},
-            requestParameters:{}
+            requestParams: {}
         },
         computed: {
             containerClassProp: function () {
@@ -120,45 +112,56 @@
             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.requestParameters) {
-                    parameters=this.requestParameters();
+                if (this.requestParams) {
+                    parameters = this.requestParams();
                 }
                 parameters.page = page;
-                this.changePage(page);
+                this.changePage(parameters);
             },
             isCurrent(page) {
                 if (this.currentPage === page) {
@@ -166,6 +169,9 @@
                 }
                 return false;
             }
+        },
+        mounted() {
+            this.init();
         }
     }
-</script>
+</script>
\ No newline at end of file