diff --git a/src/api/users.js b/src/api/users.js index b9740cff..193191ff 100644 --- a/src/api/users.js +++ b/src/api/users.js @@ -1,8 +1,8 @@ import request from '@/utils/request' -export async function fetchUsers() { +export async function fetchUsers(page = 1) { return await request({ - url: '/api/pleroma/admin/users', + url: `/api/pleroma/admin/users?page=${page}`, method: 'get' }) } diff --git a/src/store/modules/users.js b/src/store/modules/users.js index f77db0fa..ad95d68e 100644 --- a/src/store/modules/users.js +++ b/src/store/modules/users.js @@ -18,13 +18,21 @@ const user = { }) state.fetchedUsers = [...usersWithoutSwapped, user].sort((a, b) => a.id.localeCompare(b.id)) + }, + SET_COUNT: (state, count) => { + state.totalUsersCount = count + }, + SET_PAGE_SIZE: (state, pageSize) => { + state.pageSize = pageSize } }, actions: { - async FetchUsers({ commit }) { - const response = await fetchUsers() + async FetchUsers({ commit }, page = 1) { + const response = await fetchUsers(page) - commit('SET_USERS', response.data) + commit('SET_USERS', response.data.users) + commit('SET_COUNT', response.data.count) + commit('SET_PAGE_SIZE', response.data.page_size) commit('SET_LOADING', false) }, async ToggleUserActivation({ commit }, nickname) { diff --git a/src/views/users/index.vue b/src/views/users/index.vue index 69f16127..c5feccf5 100644 --- a/src/views/users/index.vue +++ b/src/views/users/index.vue @@ -29,6 +29,14 @@ + @@ -42,6 +50,12 @@ export default { }, users() { return this.$store.state.users.fetchedUsers + }, + usersCount() { + return this.$store.state.users.totalUsersCount + }, + pageSize() { + return this.$store.state.users.pageSize } }, mounted: function() { @@ -50,6 +64,9 @@ export default { methods: { handleDeactivate({ nickname }) { this.$store.dispatch('ToggleUserActivation', nickname) + }, + handlePageChange(page) { + this.$store.dispatch('FetchUsers', page) } } } @@ -62,6 +79,11 @@ export default { h1 { margin-left: 15px; } + + .pagination { + margin: 25px 0 0; + text-align: center; + } }