eris/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add checkboxes to select users and a list of actions

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/lang/en.js
View file

@ -188,7 +188,8 @@ export default {
forceUnlisted: 'Force posts to be unlisted',
sandbox: 'Force posts to be followers-only',
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: {
inputPlaceholder: 'Select filter',

70
src/views/users/components/DropdownMenu.vue Normal file
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>

30
src/views/users/index.vue
View file

@ -5,7 +5,17 @@
<users-filter/>
<el-input :placeholder="$t('users.search')" class="search" @input="handleDebounceSearchInput"/>
</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 :label="$t('users.name')" prop="nickname">
<template slot-scope="scope">
@ -118,11 +128,18 @@
<script>
import debounce from 'lodash.debounce'
import UsersFilter from './components/UsersFilter'
import DropdownMenu from './components/DropdownMenu'
export default {
name: 'Users',
components: {
UsersFilter
UsersFilter,
DropdownMenu
},
data: function() {
return {
selectedUsers: []
}
},
computed: {
loading() {
@ -148,6 +165,9 @@ export default {
},
width() {
return this.isMobile ? 55 : false
},
showDropdownForMultipleUsers() {
return this.$data.selectedUsers.length > 0
}
},
created() {
@ -170,6 +190,9 @@ export default {
this.$store.dispatch('SearchUsers', { query: searchQuery, page })
}
},
handleSelectionChange(value) {
this.$data.selectedUsers = value
},
showDeactivatedButton(id) {
return this.$store.state.user.id !== id
},
@ -206,6 +229,9 @@ export default {
}
}
.users-container {
.actions-button {
margin-left: 15px;
}
h1 {
margin: 22px 0 0 15px;
}