Add checkboxes to select users and a list of actions

This commit is contained in:
Angelina Filippova 2019-05-04 02:12:48 +03:00
parent 75182336c7
commit 97aff70b80
3 changed files with 100 additions and 3 deletions

View file

@ -188,7 +188,8 @@ export default {
forceUnlisted: 'Force posts to be unlisted', forceUnlisted: 'Force posts to be unlisted',
sandbox: 'Force posts to be followers-only', sandbox: 'Force posts to be followers-only',
disableRemoteSubscription: 'Disallow following user from remote instances', disableRemoteSubscription: 'Disallow following user from remote instances',
disableAnySubscription: 'Disallow following user at all' disableAnySubscription: 'Disallow following user at all',
selectUsers: 'Select users to apply actions to multiple users'
}, },
usersFilter: { usersFilter: {
inputPlaceholder: 'Select filter', inputPlaceholder: 'Select filter',

View file

@ -0,0 +1,70 @@
<template>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
@click.native="grantRightToMultipleUsers('admin')">
{{ $t('users.grantAdmin') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="revokeRightToMultipleUsers('admin')">
{{ $t('users.revokeAdmin') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="grantRightToMultipleUsers('moderator')">
{{ $t('users.grantModerator') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="revokeRightToMultipleUsers('moderator')">
{{ $t('users.revokeModerator') }}
</el-dropdown-item>
<el-dropdown-item
divided
@click.native="activateMultipleUsers">
{{ $t('users.activateAccount') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="deactivateMultipleUsers">
{{ $t('users.deactivateAccount') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="deleteMultipleUsers">
{{ $t('users.deleteAccount') }}
</el-dropdown-item>
<el-dropdown-item
divided
@click.native="toggleTagForMultipleUsers('force_nsfw')">
{{ $t('users.forceNsfw') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="toggleTagForMultipleUsers('strip_media')">
{{ $t('users.stripMedia') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="toggleTagForMultipleUsers('force_unlisted')">
{{ $t('users.forceUnlisted') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="toggleTagForMultipleUsers('sandbox')">
{{ $t('users.sandbox') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="toggleTagForMultipleUsers('disable_remote_subscription')">
{{ $t('users.disableRemoteSubscription') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="toggleTagForMultipleUsers('disable_any_subscription')">
{{ $t('users.disableAnySubscription') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
<script>
export default {
methods: {
toggleTagForMultipleUsers(tag) {
if (tag === 'disable_remote_subscription' || tag === 'disable_any_subscription') {
// filter users, because these actions can be applied only to local users
}
}
}
}
</script>

View file

@ -5,7 +5,17 @@
<users-filter/> <users-filter/>
<el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/> <el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
</div> </div>
<el-table v-loading="loading" :data="users" style="width: 100%"> <el-dropdown>
<el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
<dropdown-menu v-if="showDropdownForMultipleUsers"/>
<el-dropdown-menu v-else>
<el-dropdown-item>
{{ $t('users.selectUsers') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-table v-loading="loading" :data="users" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column v-if="isDesktop" type="selection" width="44" align="center"/>
<el-table-column :min-width="width" :label="$t('users.id')" prop="id" /> <el-table-column :min-width="width" :label="$t('users.id')" prop="id" />
<el-table-column :label="$t('users.name')" prop="nickname"> <el-table-column :label="$t('users.name')" prop="nickname">
<template slot-scope="scope"> <template slot-scope="scope">
@ -118,11 +128,18 @@
<script> <script>
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
import UsersFilter from './components/UsersFilter' import UsersFilter from './components/UsersFilter'
import DropdownMenu from './components/DropdownMenu'
export default { export default {
name: 'Users', name: 'Users',
components: { components: {
UsersFilter UsersFilter,
DropdownMenu
},
data: function() {
return {
selectedUsers: []
}
}, },
computed: { computed: {
loading() { loading() {
@ -148,6 +165,9 @@ export default {
}, },
width() { width() {
return this.isMobile ? 55 : false return this.isMobile ? 55 : false
},
showDropdownForMultipleUsers() {
return this.$data.selectedUsers.length > 0
} }
}, },
created() { created() {
@ -170,6 +190,9 @@ export default {
this.$store.dispatch('SearchUsers', { query: searchQuery, page }) this.$store.dispatch('SearchUsers', { query: searchQuery, page })
} }
}, },
handleSelectionChange(value) {
this.$data.selectedUsers = value
},
showDeactivatedButton(id) { showDeactivatedButton(id) {
return this.$store.state.user.id !== id return this.$store.state.user.id !== id
}, },
@ -206,6 +229,9 @@ export default {
} }
} }
.users-container { .users-container {
.actions-button {
margin-left: 15px;
}
h1 { h1 {
margin: 22px 0 0 15px; margin: 22px 0 0 15px;
} }