Add pagination to users

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'
   })
 }

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) {

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>