s/element/vuetify :D
This commit is contained in:
les
@@ -1,41 +1,54 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
//- ADD NEW USER
|
||||
el-collapse
|
||||
el-collapse-item
|
||||
template(slot='title')
|
||||
el-button(type='text' mini size='mini') <v-icon name='plus'/> {{$t('common.new_user')}}
|
||||
el-form(inline @submit.native.prevent='create_user')
|
||||
el-form-item(:label="$t('common.email')")
|
||||
el-input(v-model='new_user.email')
|
||||
el-form-item(:label="$t('common.admin')")
|
||||
el-switch(v-model='new_user.is_admin')
|
||||
el-button.float-right(@click='create_user' type='success' plain) {{$t('common.send')}}
|
||||
el-alert.mb-1(type='info' show-icon :closable='false') {{$t('admin.user_add_help')}}
|
||||
v-container
|
||||
|
||||
//- USERS LIST
|
||||
el-table(:data='paginatedUsers' small)
|
||||
el-table-column(label='Email' width='220')
|
||||
template(slot-scope='data')
|
||||
el-popover(trigger='hover' :content='data.row.description' width='400')
|
||||
span(slot='reference') {{data.row.email}}
|
||||
el-table-column(:label="$t('common.actions')")
|
||||
template(slot-scope='data')
|
||||
div(v-if='data.row.id!==$auth.user.id')
|
||||
el-button-group
|
||||
el-button(size='mini'
|
||||
:type='data.row.is_active?"warning":"success"'
|
||||
@click='toggle(data.row)') {{data.row.is_active?$t('common.deactivate'):$t('common.activate')}}
|
||||
el-button(size='mini'
|
||||
:type='data.row.is_admin?"danger":"warning"'
|
||||
@click='toggleAdmin(data.row)') {{data.row.is_admin?$t('admin.remove_admin'):$t('common.admin')}}
|
||||
el-button(size='mini'
|
||||
type='danger'
|
||||
@click='delete_user(data.row)') {{$t('admin.delete_user')}}
|
||||
div(v-else)
|
||||
span {{$t('common.me')}}
|
||||
client-only
|
||||
el-pagination(:page-size='perPage' :currentPage.sync='userPage' v-if='perPage<users_.length' :total='users_.length')
|
||||
//- ADD NEW USER
|
||||
v-dialog(v-model='newUser' width='500')
|
||||
template(v-slot:activator="{ on }")
|
||||
v-btn(text v-on='on') <v-icon>mdi-plus</v-icon> {{$t('common.new_user')}}
|
||||
|
||||
v-card
|
||||
v-card-title <v-icon name='plus'/> {{$t('common.new_user')}}
|
||||
v-card-text
|
||||
v-form(inline @submit.native.prevent='create_user')
|
||||
v-text-field(v-model='new_user.email'
|
||||
:label="$t('common.email')")
|
||||
v-switch(v-model='new_user.is_admin' :label="$t('common.admin')" inset)
|
||||
v-alert(type='info' :closable='false') {{$t('admin.user_add_help')}}
|
||||
v-card-actions
|
||||
v-btn(@click='create_user' color='success' plain) {{$t('common.send')}}
|
||||
|
||||
//- USERS LIST
|
||||
v-data-table(
|
||||
:headers='headers'
|
||||
:items='users')
|
||||
template(v-slot:item.actions='{item}')
|
||||
v-btn(text small @click='toggle(item)'
|
||||
:color='item.is_active?"warning":"success"') {{item.is_active?$t('common.deactivate'):$t('common.activate')}}
|
||||
v-btn(text small @click='toggleAdmin(item)'
|
||||
:color='item.is_admin?"warning":"error"') {{item.is_admin?$t('common.remove_admin'):$t('common.admin')}}
|
||||
v-btn(text small @click='deleteUser(item)'
|
||||
:color='danger') {{$t('admin.delete_user')}}
|
||||
|
||||
//- el-table-column(label='Email' width='220')
|
||||
//- template(slot-scope='data')
|
||||
//- el-popover(trigger='hover' :content='data.row.description' width='400')
|
||||
//- span(slot='reference') {{data.row.email}}
|
||||
//- el-table-column(:label="$t('common.actions')")
|
||||
//- template(slot-scope='data')
|
||||
//- div(v-if='data.row.id!==$auth.user.id')
|
||||
//- el-button-group
|
||||
//- el-button(size='mini'
|
||||
//- :type='data.row.is_active?"warning":"success"'
|
||||
//- @click='toggle(data.row)') {{data.row.is_active?$t('common.deactivate'):$t('common.activate')}}
|
||||
//- el-button(size='mini'
|
||||
//- :type='data.row.is_admin?"danger":"warning"'
|
||||
//- @click='toggleAdmin(data.row)') {{data.row.is_admin?$t('admin.remove_admin'):$t('common.admin')}}
|
||||
//- el-button(size='mini'
|
||||
//- type='danger'
|
||||
//- @click='delete_user(data.row)') {{$t('admin.delete_user')}}
|
||||
//- div(v-else)
|
||||
//- span {{$t('common.me')}}
|
||||
//- v-pagination(:page-size='perPage' :currentPage.sync='userPage' v-if='perPage<users_.length' :total='users_.length')
|
||||
|
||||
</template>
|
||||
<script>
|
||||
@@ -44,27 +57,24 @@ import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Users',
|
||||
props: ['users'],
|
||||
props: {
|
||||
users: { type: Array, default: () => [] }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
perPage: 10,
|
||||
userPage: 1,
|
||||
new_user: {
|
||||
email: '',
|
||||
is_admin: false
|
||||
},
|
||||
users_: this.users
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['settings']),
|
||||
paginatedUsers () {
|
||||
return this.users_.slice((this.userPage - 1) * this.perPage,
|
||||
this.userPage * this.perPage)
|
||||
headers: [
|
||||
{ value: 'email', text: 'Email' },
|
||||
{ value: 'actions', text: 'Actions', align: 'right' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: mapState(['settings']),
|
||||
methods: {
|
||||
delete_user (user) {
|
||||
deleteUser (user) {
|
||||
MessageBox.confirm(this.$t('admin.delete_user_confirm'),
|
||||
this.$t('common.confirm'), {
|
||||
confirmButtonText: this.$t('common.ok'),
|
||||
|
||||
Reference in New Issue
Block a user