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

Move all parts of dropdown component to seperate file

Browse source
This commit is contained in:
Angelina Filippova 2019-05-12 23:45:27 +03:00
parent e524fd2ff4
commit bddfe8c97d
2 changed files with 107 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

189
src/views/users/components/DropdownMenu.vue
View file

@ -1,89 +1,97 @@
<template> <template>
<el-dropdown-menu slot="dropdown"> <el-dropdown size="small" trigger="click">
<el-dropdown-item <el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
@click.native="grantRightToMultipleUsers('admin')"> <el-dropdown-menu v-if="showDropdownForMultipleUsers" slot="dropdown">
{{ $t('users.grantAdmin') }} <el-dropdown-item
</el-dropdown-item> @click.native="grantRightToMultipleUsers('admin')">
<el-dropdown-item {{ $t('users.grantAdmin') }}
@click.native="revokeRightToMultipleUsers('admin')"> </el-dropdown-item>
{{ $t('users.revokeAdmin') }} <el-dropdown-item
</el-dropdown-item> @click.native="revokeRightToMultipleUsers('admin')">
<el-dropdown-item {{ $t('users.revokeAdmin') }}
@click.native="grantRightToMultipleUsers('moderator')"> </el-dropdown-item>
{{ $t('users.grantModerator') }} <el-dropdown-item
</el-dropdown-item> @click.native="grantRightToMultipleUsers('moderator')">
<el-dropdown-item {{ $t('users.grantModerator') }}
@click.native="revokeRightToMultipleUsers('moderator')"> </el-dropdown-item>
{{ $t('users.revokeModerator') }} <el-dropdown-item
</el-dropdown-item> @click.native="revokeRightToMultipleUsers('moderator')">
<el-dropdown-item {{ $t('users.revokeModerator') }}
divided </el-dropdown-item>
@click.native="activateMultipleUsers"> <el-dropdown-item
{{ $t('users.activateAccount') }} divided
</el-dropdown-item> @click.native="activateMultipleUsers">
<el-dropdown-item {{ $t('users.activateAccount') }}
@click.native="deactivateMultipleUsers"> </el-dropdown-item>
{{ $t('users.deactivateAccount') }} <el-dropdown-item
</el-dropdown-item> @click.native="deactivateMultipleUsers">
<el-dropdown-item {{ $t('users.deactivateAccount') }}
@click.native="deleteMultipleUsers"> </el-dropdown-item>
{{ $t('users.deleteAccount') }} <el-dropdown-item
</el-dropdown-item> @click.native="deleteMultipleUsers">
<el-dropdown-item divided class="no-hover"> {{ $t('users.deleteAccount') }}
<div class="tag-container"> </el-dropdown-item>
<span class="tag-text">{{ $t('users.forceNsfw') }}</span> <el-dropdown-item divided class="no-hover">
<el-button-group class="tag-button-group"> <div class="tag-container">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button> <span class="tag-text">{{ $t('users.forceNsfw') }}</span>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button> <el-button-group class="tag-button-group">
</el-button-group> <el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
</div> <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
</el-dropdown-item> </el-button-group>
<el-dropdown-item class="no-hover"> </div>
<div class="tag-container"> </el-dropdown-item>
<span class="tag-text">{{ $t('users.stripMedia') }}</span> <el-dropdown-item class="no-hover">
<el-button-group class="tag-button-group"> <div class="tag-container">
<el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button> <span class="tag-text">{{ $t('users.stripMedia') }}</span>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button> <el-button-group class="tag-button-group">
</el-button-group> <el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
</div> <el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
</el-dropdown-item> </el-button-group>
<el-dropdown-item class="no-hover"> </div>
<div class="tag-container"> </el-dropdown-item>
<span class="tag-text">{{ $t('users.forceUnlisted') }}</span> <el-dropdown-item class="no-hover">
<el-button-group class="tag-button-group"> <div class="tag-container">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button> <span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button> <el-button-group class="tag-button-group">
</el-button-group> <el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button>
</div> <el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
</el-dropdown-item> </el-button-group>
<el-dropdown-item class="no-hover"> </div>
<div class="tag-container"> </el-dropdown-item>
<span class="tag-text">{{ $t('users.sandbox') }}</span> <el-dropdown-item class="no-hover">
<el-button-group class="tag-button-group"> <div class="tag-container">
<el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button> <span class="tag-text">{{ $t('users.sandbox') }}</span>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button> <el-button-group class="tag-button-group">
</el-button-group> <el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button>
</div> <el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
</el-dropdown-item> </el-button-group>
<el-dropdown-item class="no-hover"> </div>
<div class="tag-container"> </el-dropdown-item>
<span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span> <el-dropdown-item class="no-hover">
<el-button-group class="tag-button-group"> <div class="tag-container">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button> <span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button> <el-button-group class="tag-button-group">
</el-button-group> <el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
</div> <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
</el-dropdown-item> </el-button-group>
<el-dropdown-item class="no-hover"> </div>
<div class="tag-container"> </el-dropdown-item>
<span class="tag-text">{{ $t('users.disableAnySubscription') }}</span> <el-dropdown-item class="no-hover">
<el-button-group class="tag-button-group"> <div class="tag-container">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button> <span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button> <el-button-group class="tag-button-group">
</el-button-group> <el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
</div> <el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
</el-dropdown-item> </el-button-group>
</el-dropdown-menu> </div>
</el-dropdown-item>
</el-dropdown-menu>
<el-dropdown-menu v-else slot="dropdown">
<el-dropdown-item>
{{ $t('users.selectUsers') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template> </template>
<script> <script>
@ -96,6 +104,14 @@ export default {
} }
} }
}, },
computed: {
showDropdownForMultipleUsers() {
return this.$props.selectedUsers.length > 0
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
}
},
methods: { methods: {
grantRightToMultipleUsers(right) { grantRightToMultipleUsers(right) {
const mapSelectedUsers = () => this.selectedUsers const mapSelectedUsers = () => this.selectedUsers
@ -188,6 +204,9 @@ export default {
</script> </script>
<style rel='stylesheet/scss' lang='scss' scoped> <style rel='stylesheet/scss' lang='scss' scoped>
.actions-button {
margin-left: 15px;
}
.tag-container { .tag-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

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

@ -8,18 +8,9 @@
<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-dropdown trigger="click"> <dropdown-menu
<el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/> :selected-users="selectedUsers"
<dropdown-menu @apply-action="clearSelection"/>
v-if="showDropdownForMultipleUsers"
:selected-users="selectedUsers"
@apply-action="clearSelection"/>
<el-dropdown-menu v-else slot="dropdown">
<el-dropdown-item>
{{ $t('users.selectUsers') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-table <el-table
v-loading="loading" v-loading="loading"
ref="usersTable" ref="usersTable"
@ -186,9 +177,6 @@ export default {
}, },
width() { width() {
return this.isMobile ? 55 : false return this.isMobile ? 55 : false
},
showDropdownForMultipleUsers() {
return this.$data.selectedUsers.length > 0
} }
}, },
created() { created() {
@ -257,9 +245,6 @@ export default {
color: #409EFF; color: #409EFF;
} }
.users-container { .users-container {
.actions-button {
margin-left: 15px;
}
h1 { h1 {
margin: 22px 0 0 15px; margin: 22px 0 0 15px;
} }