Implementing pagination for search

src/api/users.js

@@ -1,8 +1,8 @@
 import request from '@/utils/request'
 
-export async function fetchUsers(page = 1) {
+export async function fetchUsers(page = 1, page_size) {
   return await request({
-    url: `/api/pleroma/admin/users?page=${page}`,
+    url: `/api/pleroma/admin/users?page=${page}&page_size=${page_size}`,
     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({
-    url: `/api/pleroma/admin/users/search?query=${query}`,
+    url: `/api/pleroma/admin/users/search?query=${query}&page=${page}&page_size=${page_size}`,
     method: 'get'
   })
 }

src/store/modules/user.js

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

src/store/modules/users.js

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

src/views/users/index.vue

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