Implementing pagination for search

This commit is contained in:
Angelina Filippova 2019-03-03 23:01:00 +03:00
parent adee07cacf
commit 9eb99cb3a3
4 changed files with 60 additions and 25 deletions

View file

@ -1,8 +1,8 @@
import request from '@/utils/request' import request from '@/utils/request'
export async function fetchUsers(page = 1) { export async function fetchUsers(page = 1, page_size) {
return await request({ return await request({
url: `/api/pleroma/admin/users?page=${page}`, url: `/api/pleroma/admin/users?page=${page}&page_size=${page_size}`,
method: 'get' method: 'get'
}) })
} }
@ -14,9 +14,9 @@ export async function toggleUserActivation(nickname) {
}) })
} }
export async function searchUsers(query) { export async function searchUsers(query, page = 1, page_size) {
return await request({ return await request({
url: `/api/pleroma/admin/users/search?query=${query}`, url: `/api/pleroma/admin/users/search?query=${query}&page=${page}&page_size=${page_size}`,
method: 'get' method: 'get'
}) })
} }

View file

@ -4,6 +4,7 @@ import { getToken, setToken, removeToken } from '@/utils/auth'
const user = { const user = {
state: { state: {
user: '', user: '',
id: '',
status: '', status: '',
code: '', code: '',
token: getToken(), token: getToken(),
@ -40,6 +41,9 @@ const user = {
}, },
SET_ROLES: (state, roles) => { SET_ROLES: (state, roles) => {
state.roles = roles state.roles = roles
},
SET_ID: (state, id) => {
state.id = id
} }
}, },
@ -74,6 +78,7 @@ const user = {
} }
commit('SET_NAME', data.name) commit('SET_NAME', data.name)
commit('SET_ID', data.id)
commit('SET_AVATAR', data.profile_image_url) commit('SET_AVATAR', data.profile_image_url)
commit('SET_INTRODUCTION', '') commit('SET_INTRODUCTION', '')
resolve(response) resolve(response)
@ -129,6 +134,7 @@ const user = {
const data = response.data const data = response.data
commit('SET_ROLES', data.roles) commit('SET_ROLES', data.roles)
commit('SET_NAME', data.name) commit('SET_NAME', data.name)
commit('SET_ID', data.id)
commit('SET_AVATAR', data.avatar) commit('SET_AVATAR', data.avatar)
commit('SET_INTRODUCTION', data.introduction) commit('SET_INTRODUCTION', data.introduction)
dispatch('GenerateRoutes', data) // 动态修改权限后 重绘侧边菜单 dispatch('GenerateRoutes', data) // 动态修改权限后 重绘侧边菜单

View file

@ -3,7 +3,10 @@ import { fetchUsers, toggleUserActivation, searchUsers } from '@/api/users'
const user = { const user = {
state: { state: {
fetchedUsers: [], fetchedUsers: [],
loading: true loading: true,
searchQuery: '',
totalUsersCount: 0,
pageSize: 2
}, },
mutations: { mutations: {
SET_USERS: (state, users) => { SET_USERS: (state, users) => {
@ -26,31 +29,48 @@ const user = {
}, },
SET_PAGE_SIZE: (state, pageSize) => { SET_PAGE_SIZE: (state, pageSize) => {
state.pageSize = pageSize state.pageSize = pageSize
},
SET_SEARCH_QUERY: (state, query) => {
state.searchQuery = query
} }
}, },
actions: { actions: {
async FetchUsers({ commit }, page = 1) { async FetchUsers({ commit }, { page, page_size }) {
const response = await fetchUsers(page) const response = await fetchUsers(page, page_size)
commit('SET_USERS', response.data.users) commit('SET_LOADING', true)
commit('SET_COUNT', response.data.count)
commit('SET_PAGE_SIZE', response.data.page_size) loadUsers(commit, response.data)
commit('SET_LOADING', false)
}, },
async ToggleUserActivation({ commit }, nickname) { async ToggleUserActivation({ commit }, nickname) {
const response = await toggleUserActivation(nickname) const response = await toggleUserActivation(nickname)
commit('SWAP_USER', response.data) commit('SWAP_USER', response.data)
}, },
async SearchUsers({ commit, dispatch }, searchValue) { async SearchUsers({ commit, dispatch }, { query, page, page_size }) {
if (searchValue.length === 0) { if (query.length === 0) {
dispatch('FetchUsers') // console.log(page)
// console.log(query)
// console.log(page_size)
commit('SET_SEARCH_QUERY', query)
dispatch('FetchUsers', { page, page_size: 2 })
} else { } else {
const response = await searchUsers(searchValue) commit('SET_LOADING', true)
commit('SET_USERS', response.data.users) commit('SET_SEARCH_QUERY', query)
const response = await searchUsers(query, page, page_size)
loadUsers(commit, response.data)
} }
} }
} }
} }
const loadUsers = (commit, { users, count, page_size }) => {
commit('SET_USERS', users)
commit('SET_COUNT', count)
commit('SET_PAGE_SIZE', page_size)
commit('SET_LOADING', false)
}
export default user export default user

View file

@ -3,7 +3,7 @@
<h1>Users</h1> <h1>Users</h1>
<el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/> <el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/>
<el-table v-loading="loading" :data="users" style="width: 100%"> <el-table v-loading="loading" :data="users" style="width: 100%">
<el-table-column prop="id" label="ID" width="100"/> <el-table-column prop="id" label="ID" width="180"/>
<el-table-column prop="nickname" label="Name"/> <el-table-column prop="nickname" label="Name"/>
<el-table-column label="Status"> <el-table-column label="Status">
<template slot-scope="scope"> <template slot-scope="scope">
@ -15,19 +15,18 @@
<el-table-column fixed="right" label="Actions"> <el-table-column fixed="right" label="Actions">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
v-if="scope.row.deactivated" v-if="showDeactivatedButton(scope.row.id)"
type="text" type="text"
size="small" size="small"
@click="handleDeactivate(scope.row)" @click="handleDeactivate(scope.row)"
>Activate</el-button> >{{ scope.row.deactivated ? 'Activate' : 'Deactivate' }}</el-button>
<el-button v-else type="text" size="small" @click="handleDeactivate(scope.row)">Deactivate</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div v-if="!loading" class="pagination"> <div v-if="!loading" class="pagination">
<el-pagination <el-pagination
:total="usersCount" :total="usersCount"
:page-size="pageSize" :page-size.sync="pageSize"
background background
layout="prev, pager, next" layout="prev, pager, next"
@current-change="handlePageChange" @current-change="handlePageChange"
@ -57,18 +56,28 @@ export default {
}, },
created() { created() {
this.handleDebounceSearchInput = debounce((query) => { this.handleDebounceSearchInput = debounce((query) => {
this.$store.dispatch('SearchUsers', query) this.$store.dispatch('SearchUsers', { query, page: 1, page_size: 2 })
}, 500) }, 500)
}, },
mounted: function() { mounted: function() {
this.$store.dispatch('FetchUsers') this.$store.dispatch('FetchUsers', { page: 1, page_size: 2 })
}, },
methods: { methods: {
handleDeactivate({ nickname }) { handleDeactivate({ nickname }) {
this.$store.dispatch('ToggleUserActivation', nickname) this.$store.dispatch('ToggleUserActivation', nickname)
}, },
handlePageChange(page) { handlePageChange(page) {
this.$store.dispatch('FetchUsers', page) const searchQuery = this.$store.state.users.searchQuery
if (searchQuery === '') {
this.$store.dispatch('FetchUsers', { page, page_size: 2 })
} else {
console.log(searchQuery)
console.log(page)
this.$store.dispatch('SearchUsers', { query: searchQuery, page, page_size: 2 })
}
},
showDeactivatedButton(id) {
return this.$store.state.user.id !== id
} }
} }
} }
@ -81,7 +90,7 @@ export default {
} }
.pagination { .pagination {
margin: 25px 0 0; margin: 25px 0;
text-align: center; text-align: center;
} }