Skip to content

Commit

Permalink
Add support for Laravel API Resource responses
Browse files Browse the repository at this point in the history
  • Loading branch information
@gilbitron
gilbitron committed Oct 5, 2018
1 parent aa0b48a commit c908181
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 61 deletions.
78 changes: 54 additions & 24 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,51 @@
<template>
<div class="p-5">
<p>Paginator Response:</p>
<pagination :data="laravelData" :limit="2" @pagination-change-page="getResults" />

<p>API Resource Response:</p>
<pagination :data="laravelResourceData" :limit="2" @pagination-change-page="getResourceResults" />
</div>
</template>

<script>
import '../node_modules/bootstrap/dist/css/bootstrap.css';
import LaravelVuePagination from './LaravelVuePagination.vue';
const dummyData = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 },
{ id: 11 },
{ id: 12 },
{ id: 13 },
{ id: 14 },
{ id: 15 },
{ id: 16 },
{ id: 17 },
{ id: 18 },
{ id: 19 },
{ id: 20 }
];
export default {
data () {
return {
laravelData: {}
laravelData: {},
laravelResourceData: {}
}
},
mounted () {
this.getResults();
this.getResourceResults();
},
methods: {
Expand All @@ -25,29 +54,6 @@ export default {
page = 1;
}
var dummyData = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 },
{ id: 11 },
{ id: 12 },
{ id: 13 },
{ id: 14 },
{ id: 15 },
{ id: 16 },
{ id: 17 },
{ id: 18 },
{ id: 19 },
{ id: 20 }
];
this.laravelData = {
current_page: page,
data: dummyData,
Expand All @@ -59,6 +65,30 @@ export default {
to: page + 1,
total: dummyData.length
};
},
getResourceResults (page) {
if (!page) {
page = 1;
}
this.laravelResourceData = {
data: dummyData,
links: {
first: 'http://example.com/page/1',
last: 'http://example.com/page/' + dummyData.length,
prev: page > 1 ? 'http://example.com/page/1' : null,
next: page < dummyData.length ? 'http://example.com/page/2' : null
},
meta: {
current_page: page,
from: page,
last_page: dummyData.length,
path: 'http://example.com/page',
per_page: 1,
to: page + 1,
total: dummyData.length
}
};
}
},
Expand Down
22 changes: 5 additions & 17 deletions src/LaravelVuePagination.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<template>
<renderless-laravel-vue-pagination :data="data" :limit="limit" v-on:pagination-change-page="onPaginationChangePage">
<ul class="pagination" v-if="data.total > data.per_page" slot-scope="{ data, limit, pageRange, prevButtonEvents, nextButtonEvents, pageButtonEvents }">
<li class="page-item pagination-prev-nav" v-if="data.prev_page_url">
<ul class="pagination" v-if="computed.total > computed.perPage" slot-scope="{ data, limit, computed, prevButtonEvents, nextButtonEvents, pageButtonEvents }">
<li class="page-item pagination-prev-nav" v-if="computed.prevPageUrl">
<a class="page-link" href="#" aria-label="Previous" v-on="prevButtonEvents">
<slot name="prev-nav">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</slot>
</a>
</li>
<li class="page-item pagination-page-nav" v-for="(page, key) in pageRange" :key="key" :class="{ 'active': page == data.current_page }">
<li class="page-item pagination-page-nav" v-for="(page, key) in computed.pageRange" :key="key" :class="{ 'active': page == computed.currentPage }">
<a class="page-link" href="#" v-on="pageButtonEvents(page)">{{ page }}</a>
</li>
<li class="page-item pagination-next-nav" v-if="data.next_page_url">
<li class="page-item pagination-next-nav" v-if="computed.nextPageUrl">
<a class="page-link" href="#" aria-label="Next" v-on="nextButtonEvents">
<slot name="next-nav">
<span aria-hidden="true">&raquo;</span>
Expand All @@ -31,19 +31,7 @@ export default {
props: {
data: {
type: Object,
default: () => {
return {
current_page: 1,
data: [],
from: 1,
last_page: 1,
next_page_url: null,
per_page: 10,
prev_page_url: null,
to: 1,
total: 0
}
}
default: () => {}
},
limit: {
type: Number,
Expand Down
72 changes: 53 additions & 19 deletions src/RenderlessLaravelVuePagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,7 @@ export default {
props: {
data: {
type: Object,
default: () => {
return {
current_page: 1,
data: [],
from: 1,
last_page: 1,
next_page_url: null,
per_page: 10,
prev_page_url: null,
to: 1,
total: 0
}
}
default: () => {}
},
limit: {
type: Number,
Expand All @@ -24,17 +12,50 @@ export default {
},
computed: {
isApiResource () {
return !!this.data.meta;
},
currentPage () {
return this.isApiResource ? this.data.meta.current_page : this.data.current_page;
},
firstPageUrl () {
return this.isApiResource ? this.data.links.first : null;
},
from () {
return this.isApiResource ? this.data.meta.from : this.data.from;
},
lastPage () {
return this.isApiResource ? this.data.meta.last_page : this.data.last_page;
},
lastPageUrl () {
return this.isApiResource ? this.data.links.last : null;
},
nextPageUrl () {
return this.isApiResource ? this.data.links.next : this.data.next_page_url;
},
perPage () {
return this.isApiResource ? this.data.meta.per_page : this.data.per_page;
},
prevPageUrl () {
return this.isApiResource ? this.data.links.prev : this.data.prev_page_url;
},
to () {
return this.isApiResource ? this.data.meta.to : this.data.to;
},
total () {
return this.isApiResource ? this.data.meta.total : this.data.total;
},
pageRange () {
if (this.limit === -1) {
return 0;
}
if (this.limit === 0) {
return this.data.last_page;
return this.lastPage;
}
var current = this.data.current_page;
var last = this.data.last_page;
var current = this.currentPage;
var last = this.lastPage;
var delta = this.limit;
var left = current - delta;
var right = current + delta + 1;
Expand Down Expand Up @@ -66,10 +87,10 @@ export default {
methods: {
previousPage () {
this.selectPage(--this.data.current_page);
this.selectPage((this.currentPage - 1));
},
nextPage () {
this.selectPage(++this.data.current_page);
this.selectPage((this.currentPage + 1));
},
selectPage (page) {
if (page === '...') {
Expand All @@ -84,7 +105,20 @@ export default {
return this.$scopedSlots.default({
data: this.data,
limit: this.limit,
pageRange: this.pageRange,
computed: {
isApiResource: this.isApiResource,
currentPage: this.currentPage,
firstPageUrl: this.firstPageUrl,
from: this.from,
lastPage: this.lastPage,
lastPageUrl: this.lastPageUrl,
nextPageUrl: this.nextPageUrl,
perPage: this.perPage,
prevPageUrl: this.prevPageUrl,
to: this.to,
total: this.total,
pageRange: this.pageRange
},
prevButtonEvents: {
click: (e) => {
e.preventDefault();
Expand Down
43 changes: 42 additions & 1 deletion tests/unit/LaravelVuePagination.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,41 @@ var exampleData = {
next_page_url: 'http://example.com/page/2',
per_page: 2,
prev_page_url: null,
to: 3,
to: 2,
total: 11,
};

var exampleResourceData = {
data: [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 },
{ id: 11 },
],
links: {
first: 'http://example.com/page/1',
last: 'http://example.com/page/6',
prev: null,
next: 'http://example.com/page/2'
},
meta: {
current_page: 1,
from: 1,
last_page: 6,
path: 'http://example.com/page',
per_page: 2,
to: 2,
total: 11,
}
};

describe('LaravelVuePagination', function() {
it('has correct DOM structure', function() {
const wrapper = getComponent(LaravelVuePagination, {
Expand Down Expand Up @@ -112,4 +143,14 @@ describe('LaravelVuePagination', function() {
expect(wrapper.html()).toContain('<span class="custom-prev-nav">Previous</span>');
expect(wrapper.html()).toContain('<span>Next</span>');
});

it('has correct DOM structure for Laravel API Resource responses', function() {
const wrapper = getComponent(LaravelVuePagination, {
data: exampleResourceData
});

expect(wrapper.contains('ul')).toBe(true);
expect(wrapper.findAll('li').length).toBe(7);
expect(wrapper.findAll('li').at(0).element.classList).toContain('active');
});
});

0 comments on commit c908181

Please sign in to comment.