Commit 1bceb4d8 authored by anthony's avatar anthony
Browse files

feat(user list) fix table pagination

parent a20a299a
......@@ -15,7 +15,9 @@ export default function (searchOptions) {
return fetch(url, options)
.then(function (response) {
if (response.ok) {
return Promise.resolve(response.json())
return response.json().then(value => {
return {data: value, headers: response.headers};
})
}
return Promise.reject(response.error())
})
......
......@@ -10,7 +10,7 @@ export default {
name: 'Filters',
data () {
return {
search: 'test message'
search: ''
}
},
methods: {
......
......@@ -9,11 +9,9 @@ export default {
},
watch: {
// whenever search changes, this function will run
search: function (newSearch, oldSearch) {
this.fetchUsers({search: newSearch});
},
currentPage: function () {
this.fetchUsers({search: this.search});
search: function () {
this.currentPage = 1;
this.$refs.usersTable.refresh();
}
},
data () {
......@@ -21,18 +19,27 @@ export default {
users: [],
currentPage: 1,
perPage: 10,
totalRows: 20
totalRows: 200
}
},
created () {
// fetch the data when the view is created and the data is already being observed
this.fetchUsers({search: this.search});
},
methods: {
fetchUsers (searchOptions){
tableProvider () {
let searchOptions = {};
searchOptions.search = this.search;
searchOptions.page = this.currentPage -1;
searchOptions.elementsByPage = this.perPage;
fetchUsers(searchOptions).then((users) => { this.users = users });
return fetchUsers(searchOptions).then((response) => {
let items = response.data;
let contentRange = response.headers.get('Content-Range');
if (contentRange.lastIndexOf('/') >= 0) {
let nbElements = contentRange.substring(contentRange.lastIndexOf('/') + 1);
if (nbElements) {
this.totalRows = Number.parseInt(nbElements);
}
}
// Must return an array of items or an empty array if an error occurred
return(items || [])
})
}
}
......
<div class="user-list">
<h1>{{ search }}</h1>
<b-table striped hover :items="users" :current-page="currentPage" :per-page="perPage"></b-table>
<b-table ref="usersTable" striped hover :items="tableProvider" :current-page="currentPage" :per-page="perPage"></b-table>
<b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" />
</div>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment