AkkomaGang/admin-fe
5
2
Fork 8
Code Issues 5 Pull requests 2 Projects Releases 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>
<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 class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.forceNsfw') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.stripMedia') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.sandbox') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
</el-dropdown-menu>
<el-dropdown size="small" trigger="click">
<el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
<el-dropdown-menu v-if="showDropdownForMultipleUsers" 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 class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.forceNsfw') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_nsfw')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_nsfw')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.stripMedia') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('strip_media')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('strip_media')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.forceUnlisted') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('force_unlisted')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('force_unlisted')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.sandbox') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('sandbox')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('sandbox')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.disableRemoteSubscription') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_remote_subscription')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_remote_subscription')">remove</el-button>
</el-button-group>
</div>
</el-dropdown-item>
<el-dropdown-item class="no-hover">
<div class="tag-container">
<span class="tag-text">{{ $t('users.disableAnySubscription') }}</span>
<el-button-group class="tag-button-group">
<el-button size="mini" @click.native="addTagForMultipleUsers('disable_any_subscription')">apply</el-button>
<el-button size="mini" @click.native="removeTagFromMultipleUsers('disable_any_subscription')">remove</el-button>
</el-button-group>
</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>
<script>
@ -96,6 +104,14 @@ export default {
}
}
},
computed: {
showDropdownForMultipleUsers() {
return this.$props.selectedUsers.length > 0
},
isDesktop() {
return this.$store.state.app.device === 'desktop'
}
},
methods: {
grantRightToMultipleUsers(right) {
const mapSelectedUsers = () => this.selectedUsers
@ -188,6 +204,9 @@ export default {
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.actions-button {
margin-left: 15px;
}
.tag-container {
display: flex;
justify-content: space-between;

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

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