From a2a69e509c803a7cb7f870cf042266b130324228 Mon Sep 17 00:00:00 2001
From: Maxim Filippov <colixer@gmail.com>
Date: Thu, 28 Feb 2019 01:13:20 +0300
Subject: [PATCH] Add pagination to users

---
 src/api/users.js           |  4 ++--
 src/store/modules/users.js | 14 +++++++++++---
 src/views/users/index.vue  | 22 ++++++++++++++++++++++
 3 files changed, 35 insertions(+), 5 deletions(-)

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 @@
         </template>
       </el-table-column>
     </el-table>
+    <div v-if="!loading" class="pagination">
+      <el-pagination
+        :total="usersCount"
+        :page-size="pageSize"
+        background
+        layout="prev, pager, next"
+        @current-change="handlePageChange" />
+    </div>
   </div>
 </template>
 
@@ -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;
+  }
 }
 
 </style>