Add search to users

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) {
+  return await request({
+    url: `/api/pleroma/admin/users/search?query=${query}`,
+    method: 'get'
+  })
+}
+
 export default { fetchUsers, toggleUserActivation }

src/store/modules/users.js

-import { fetchUsers, toggleUserActivation } from '@/api/users'
+import { fetchUsers, toggleUserActivation, searchUsers } from '@/api/users'
 
 const user = {
   state: {
@@ -7,17 +7,19 @@ const user = {
   },
   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
@@ -39,6 +41,14 @@ const user = {
       const response = await toggleUserActivation(nickname)
 
       commit('SWAP_USER', response.data)
+    },
+    async SearchUsers({ commit, dispatch }, searchValue) {
+      if (searchValue.length === 0) {
+        dispatch('FetchUsers')
+      } else {
+        const response = await searchUsers(searchValue)
+        commit('SET_USERS', response.data.users)
+      }
     }
   }
 }

src/views/users/index.vue

 <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="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'">
-            {{ 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-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>
         </template>
       </el-table-column>
@@ -35,12 +30,14 @@
         :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',
@@ -58,6 +55,11 @@ export default {
       return this.$store.state.users.pageSize
     }
   },
+  created() {
+    this.handleDebounceSearchInput = debounce((query) => {
+      this.$store.dispatch('SearchUsers', query)
+    }, 500)
+  },
   mounted: function() {
     this.$store.dispatch('FetchUsers')
   },
@@ -70,11 +72,9 @@ export default {
     }
   }
 }
-
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-
+<style rel='stylesheet/scss' lang='scss' scoped>
 .users-container {
   h1 {
     margin-left: 15px;
@@ -84,6 +84,12 @@ export default {
     margin: 25px 0 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"