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

Add search to users Closes #3 See merge request pleroma/admin-fe!1
2019-03-05 15:46:34 +00:00 · 2019-03-05 15:46:34 +00:00 · 27a678a184
parent a2a69e509c 8a698398d5
commit 27a678a184
6 changed files with 108 additions and 41 deletions
--- a/package.json
+++ b/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",
--- a/src/api/users.js
+++ b/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 }
--- a/src/store/modules/user.js
+++ b/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) // 动态修改权限后 重绘侧边菜单
--- a/src/store/modules/users.js
+++ b/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_COUNT', response.data.count)
-      commit('SET_PAGE_SIZE', response.data.page_size)
-      commit('SET_LOADING', false)
+      commit('SET_LOADING', true)
+
+      loadUsers(commit, page, response.data)
    },
    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
--- a/src/views/users/index.vue
+++ b/src/views/users/index.vue
@ -1,46 +1,43 @@
 <template>
  <div class="users-container">
    <h1>Users</h1>
-    <el-table
-      v-loading="loading"
-      :data="users"
-      style="width: 100%">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="100" />
-      <el-table-column
-        prop="nickname"
-        label="Name" />
-      <el-table-column
-        label="Status">
+    <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="180"/>
+      <el-table-column prop="nickname" label="Name"/>
+      <el-table-column label="Status">
        <template slot-scope="scope">
-          <el-tag :type="scope.row.deactivated ? 'danger' : 'success'">
-            {{ scope.row.deactivated ? 'deactivated' : 'active' }}
-          </el-tag>
+          <el-tag
+            :type="scope.row.deactivated ? 'danger' : 'success'"
+          >{{ scope.row.deactivated ? 'deactivated' : 'active' }}</el-tag>
        </template>
      </el-table-column>
-      <el-table-column
-        fixed="right"
-        label="Actions">
+      <el-table-column 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 v-else type="text" size="small" @click="handleDeactivate(scope.row)">Deactivate</el-button>
+          <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>
--- a/yarn.lock
+++ b/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"