Fix pagination bug
This commit is contained in:
parent
9eb99cb3a3
commit
3adcd048a1
2 changed files with 14 additions and 10 deletions
|
@ -6,7 +6,8 @@ const user = {
|
||||||
loading: true,
|
loading: true,
|
||||||
searchQuery: '',
|
searchQuery: '',
|
||||||
totalUsersCount: 0,
|
totalUsersCount: 0,
|
||||||
pageSize: 2
|
pageSize: 2,
|
||||||
|
currentPage: 1
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
SET_USERS: (state, users) => {
|
SET_USERS: (state, users) => {
|
||||||
|
@ -27,6 +28,9 @@ const user = {
|
||||||
SET_COUNT: (state, count) => {
|
SET_COUNT: (state, count) => {
|
||||||
state.totalUsersCount = count
|
state.totalUsersCount = count
|
||||||
},
|
},
|
||||||
|
SET_PAGE: (state, page) => {
|
||||||
|
state.currentPage = page
|
||||||
|
},
|
||||||
SET_PAGE_SIZE: (state, pageSize) => {
|
SET_PAGE_SIZE: (state, pageSize) => {
|
||||||
state.pageSize = pageSize
|
state.pageSize = pageSize
|
||||||
},
|
},
|
||||||
|
@ -40,7 +44,7 @@ const user = {
|
||||||
|
|
||||||
commit('SET_LOADING', true)
|
commit('SET_LOADING', true)
|
||||||
|
|
||||||
loadUsers(commit, response.data)
|
loadUsers(commit, page, response.data)
|
||||||
},
|
},
|
||||||
async ToggleUserActivation({ commit }, nickname) {
|
async ToggleUserActivation({ commit }, nickname) {
|
||||||
const response = await toggleUserActivation(nickname)
|
const response = await toggleUserActivation(nickname)
|
||||||
|
@ -49,9 +53,6 @@ const user = {
|
||||||
},
|
},
|
||||||
async SearchUsers({ commit, dispatch }, { query, page, page_size }) {
|
async SearchUsers({ commit, dispatch }, { query, page, page_size }) {
|
||||||
if (query.length === 0) {
|
if (query.length === 0) {
|
||||||
// console.log(page)
|
|
||||||
// console.log(query)
|
|
||||||
// console.log(page_size)
|
|
||||||
commit('SET_SEARCH_QUERY', query)
|
commit('SET_SEARCH_QUERY', query)
|
||||||
dispatch('FetchUsers', { page, page_size: 2 })
|
dispatch('FetchUsers', { page, page_size: 2 })
|
||||||
} else {
|
} else {
|
||||||
|
@ -60,15 +61,16 @@ const user = {
|
||||||
|
|
||||||
const response = await searchUsers(query, page, page_size)
|
const response = await searchUsers(query, page, page_size)
|
||||||
|
|
||||||
loadUsers(commit, response.data)
|
loadUsers(commit, page, response.data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const loadUsers = (commit, { users, count, page_size }) => {
|
const loadUsers = (commit, page, { users, count, page_size }) => {
|
||||||
commit('SET_USERS', users)
|
commit('SET_USERS', users)
|
||||||
commit('SET_COUNT', count)
|
commit('SET_COUNT', count)
|
||||||
|
commit('SET_PAGE', page)
|
||||||
commit('SET_PAGE_SIZE', page_size)
|
commit('SET_PAGE_SIZE', page_size)
|
||||||
commit('SET_LOADING', false)
|
commit('SET_LOADING', false)
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,7 +26,8 @@
|
||||||
<div v-if="!loading" class="pagination">
|
<div v-if="!loading" class="pagination">
|
||||||
<el-pagination
|
<el-pagination
|
||||||
:total="usersCount"
|
:total="usersCount"
|
||||||
:page-size.sync="pageSize"
|
:current-page="currentPage"
|
||||||
|
:page-size="pageSize"
|
||||||
background
|
background
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
@current-change="handlePageChange"
|
@current-change="handlePageChange"
|
||||||
|
@ -52,6 +53,9 @@ export default {
|
||||||
},
|
},
|
||||||
pageSize() {
|
pageSize() {
|
||||||
return this.$store.state.users.pageSize
|
return this.$store.state.users.pageSize
|
||||||
|
},
|
||||||
|
currentPage() {
|
||||||
|
return this.$store.state.users.currentPage
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -71,8 +75,6 @@ export default {
|
||||||
if (searchQuery === '') {
|
if (searchQuery === '') {
|
||||||
this.$store.dispatch('FetchUsers', { page, page_size: 2 })
|
this.$store.dispatch('FetchUsers', { page, page_size: 2 })
|
||||||
} else {
|
} else {
|
||||||
console.log(searchQuery)
|
|
||||||
console.log(page)
|
|
||||||
this.$store.dispatch('SearchUsers', { query: searchQuery, page, page_size: 2 })
|
this.$store.dispatch('SearchUsers', { query: searchQuery, page, page_size: 2 })
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue