Add search to users

This commit is contained in:
Angelina Filippova 2019-03-01 20:32:03 +03:00
parent a2a69e509c
commit adee07cacf
5 changed files with 60 additions and 31 deletions

View file

@ -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",

View file

@ -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 }

View file

@ -1,4 +1,4 @@
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)
}
}
}
}

View file

@ -1,30 +1,25 @@
<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>

View file

@ -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"