sliver/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests 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

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

@ -1,5 +1,7 @@
<template> <template>
<el-dropdown-menu slot="dropdown"> <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 <el-dropdown-item
@click.native="grantRightToMultipleUsers('admin')"> @click.native="grantRightToMultipleUsers('admin')">
{{ $t('users.grantAdmin') }} {{ $t('users.grantAdmin') }}
@ -84,6 +86,12 @@
</div> </div>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </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;

15
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">
<el-button v-if="isDesktop" icon="el-icon-edit" class="actions-button"/>
<dropdown-menu <dropdown-menu
v-if="showDropdownForMultipleUsers"
:selected-users="selectedUsers" :selected-users="selectedUsers"
@apply-action="clearSelection"/> @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;
} }