Merge branch 'feature/users-search' into 'master'

Add search to users

Closes #3

See merge request pleroma/admin-fe!1

package.json

@@ -46,6 +46,7 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.1.5",
+    "lodash.debounce": "^4.0.8",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/api/users.js

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

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

@@ -1,46 +1,77 @@
-import { fetchUsers, toggleUserActivation } from '@/api/users'
+import { fetchUsers, toggleUserActivation, searchUsers } from '@/api/users'
 
 const user = {
   state: {
     fetchedUsers: [],
-    loading: true
+    loading: true,
+    searchQuery: '',
+    totalUsersCount: 0,
+    currentPage: 1
   },
   mutations: {
     SET_USERS: (state, users) => {
-      state.fetchedUsers = users.sort((a, b) => a.id.localeCompare(b.id))
+      state.fetchedUsers = users
     },
     SET_LOADING: (state, status) => {
       state.loading = status
     },
     SWAP_USER: (state, user) => {
-      const usersWithoutSwapped = state.fetchedUsers.filter((u) => {
+      const usersWithoutSwapped = state.fetchedUsers.filter(u => {
         return u.id !== user.id
       })
 
-      state.fetchedUsers = [...usersWithoutSwapped, user].sort((a, b) => a.id.localeCompare(b.id))
+      state.fetchedUsers = [...usersWithoutSwapped, user].sort((a, b) =>
+        a.id.localeCompare(b.id)
+      )
     },
     SET_COUNT: (state, count) => {
       state.totalUsersCount = count
     },
+    SET_PAGE: (state, page) => {
+      state.currentPage = page
+    },
     SET_PAGE_SIZE: (state, pageSize) => {
       state.pageSize = pageSize
+    },
+    SET_SEARCH_QUERY: (state, query) => {
+      state.searchQuery = query
     }
   },
   actions: {
-    async FetchUsers({ commit }, page = 1) {
+    async FetchUsers({ commit }, { page }) {
       const response = await fetchUsers(page)
 
-      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, page, response.data)
-      commit('SET_LOADING', false)
     },
     async ToggleUserActivation({ commit }, nickname) {
       const response = await toggleUserActivation(nickname)
 
       commit('SWAP_USER', response.data)
+    },
+    async SearchUsers({ commit, dispatch }, { query, page }) {
+      if (query.length === 0) {
+        commit('SET_SEARCH_QUERY', query)
+        dispatch('FetchUsers', page)
+      } else {
+        commit('SET_LOADING', true)
+        commit('SET_SEARCH_QUERY', query)
+
+        const response = await searchUsers(query, page)
+
+        loadUsers(commit, page, response.data)
+      }
     }
   }
 }
 
+const loadUsers = (commit, page, { users, count, page_size }) => {
+  commit('SET_USERS', users)
+  commit('SET_COUNT', count)
+  commit('SET_PAGE', page)
+  commit('SET_PAGE_SIZE', page_size)
+  commit('SET_LOADING', false)
+}
+
 export default user

src/views/users/index.vue

@@ -1,46 +1,43 @@
 <template>
   <div class="users-container">
     <h1>Users</h1>
-    <el-table
+    <el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/>
-      v-loading="loading"
+    <el-table v-loading="loading" :data="users" style="width: 100%">
-      :data="users"
+      <el-table-column prop="id" label="ID" width="180"/>
-      style="width: 100%">
+      <el-table-column prop="nickname" label="Name"/>
-      <el-table-column
+      <el-table-column label="Status">
-        prop="id"
-        label="ID"
-        width="100" />
-      <el-table-column
-        prop="nickname"
-        label="Name" />
-      <el-table-column
-        label="Status">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.deactivated ? 'danger' : 'success'">
+          <el-tag
-            {{ scope.row.deactivated ? 'deactivated' : 'active' }}
+            :type="scope.row.deactivated ? 'danger' : 'success'"
-          </el-tag>
+          >{{ scope.row.deactivated ? 'deactivated' : 'active' }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column
+      <el-table-column fixed="right" label="Actions">
-        fixed="right"
-        label="Actions">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.deactivated" type="text" size="small" @click="handleDeactivate(scope.row)">Activate</el-button>
+          <el-button
-          <el-button v-else type="text" size="small" @click="handleDeactivate(scope.row)">Deactivate</el-button>
+            v-if="showDeactivatedButton(scope.row.id)"
+            type="text"
+            size="small"
+            @click="handleDeactivate(scope.row)"
+          >{{ scope.row.deactivated ? 'Activate' : 'Deactivate' }}</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div v-if="!loading" class="pagination">
       <el-pagination
         :total="usersCount"
+        :current-page="currentPage"
         :page-size="pageSize"
         background
         layout="prev, pager, next"
-        @current-change="handlePageChange" />
+        @current-change="handlePageChange"
+      />
     </div>
   </div>
 </template>
 
 <script>
+import debounce from 'lodash.debounce'
 
 export default {
   name: 'Users',
@@ -56,34 +53,54 @@ export default {
     },
     pageSize() {
       return this.$store.state.users.pageSize
+    },
+    currentPage() {
+      return this.$store.state.users.currentPage
     }
   },
+  created() {
+    this.handleDebounceSearchInput = debounce((query) => {
+      this.$store.dispatch('SearchUsers', { query, page: 1 })
+    }, 500)
+  },
   mounted: function() {
-    this.$store.dispatch('FetchUsers')
+    this.$store.dispatch('FetchUsers', { page: 1 })
   },
   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 })
+      } else {
+        this.$store.dispatch('SearchUsers', { query: searchQuery, page })
+      }
+    },
+    showDeactivatedButton(id) {
+      return this.$store.state.user.id !== id
     }
   }
 }
-
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style rel='stylesheet/scss' lang='scss' scoped>
-
 .users-container {
   h1 {
     margin-left: 15px;
   }
 
   .pagination {
-    margin: 25px 0 0;
+    margin: 25px 0;
     text-align: center;
   }
-}
 
+  .search {
+    width: 300px;
+    margin-bottom: 21.5px;
+    margin-right: 15px;
+    float: right;
+  }
+}
 </style>

yarn.lock

@@ -5013,6 +5013,11 @@ lodash.clonedeep@^4.3.2:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -6906,9 +6911,9 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
   integrity sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=
 
-"raphael@git+https://github.com/nhnent/raphael.git#2.2.0-c":
+"raphael@https://github.com/nhnent/raphael.git#2.2.0-c":
   version "2.2.0-c"
-  resolved "git+https://github.com/nhnent/raphael.git#78a6ed3ec269f33b6457b0ec66f8c3d1f2ed70e0"
+  resolved "https://github.com/nhnent/raphael.git#78a6ed3ec269f33b6457b0ec66f8c3d1f2ed70e0"
   dependencies:
     eve "git://github.com/adobe-webplatform/eve.git#eef80ed"