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) { ...@@ -15,7 +15,9 @@ export default function (searchOptions) {
return fetch(url, options) return fetch(url, options)
.then(function (response) { .then(function (response) {
if (response.ok) { if (response.ok) {
return Promise.resolve(response.json()) return response.json().then(value => {
return {data: value, headers: response.headers};
})
} }
return Promise.reject(response.error()) return Promise.reject(response.error())
}) })
......
...@@ -10,7 +10,7 @@ export default { ...@@ -10,7 +10,7 @@ export default {
name: 'Filters', name: 'Filters',
data () { data () {
return { return {
search: 'test message' search: ''
} }
}, },
methods: { methods: {
......
...@@ -9,11 +9,9 @@ export default { ...@@ -9,11 +9,9 @@ export default {
}, },
watch: { watch: {
// whenever search changes, this function will run // whenever search changes, this function will run
search: function (newSearch, oldSearch) { search: function () {
this.fetchUsers({search: newSearch}); this.currentPage = 1;
}, this.$refs.usersTable.refresh();
currentPage: function () {
this.fetchUsers({search: this.search});
} }
}, },
data () { data () {
...@@ -21,18 +19,27 @@ export default { ...@@ -21,18 +19,27 @@ export default {
users: [], users: [],
currentPage: 1, currentPage: 1,
perPage: 10, 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: { methods: {
fetchUsers (searchOptions){ tableProvider () {
let searchOptions = {};
searchOptions.search = this.search;
searchOptions.page = this.currentPage -1; searchOptions.page = this.currentPage -1;
searchOptions.elementsByPage = this.perPage; 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"> <div class="user-list">
<h1>{{ search }}</h1> <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" /> <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" />
</div> </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