You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
4.6 KiB
147 lines
4.6 KiB
<app-users>
|
|
<div class="buckets">
|
|
<table class="table">
|
|
<thead>
|
|
<tr class="table__tr">
|
|
<th class="table__th">
|
|
Email
|
|
</th>
|
|
<th class="table__th">
|
|
Display Name
|
|
</th>
|
|
<th class="table__th" colspan="2">
|
|
Roles
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="table__tr" each={ user in state.users }>
|
|
|
|
<td class="table__td">
|
|
{ user.email }
|
|
</td>
|
|
|
|
<td class="table__td">
|
|
{ user.display_name }
|
|
</td>
|
|
|
|
<td class="table__td">
|
|
<div if={ user.roles && user.roles.indexOf('admin') >= 0 }>
|
|
Admin
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-check"></use>
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- actions -->
|
|
<td class="table__td right">
|
|
<button class="button button--small m-bottom-0 m-right-3">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-edit"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="button button--small m-bottom-0" type="button" onclick={ (event) => { handleDelete(event, user) } }>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-delete"></use>
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="modal">
|
|
<div class="modal__inner">
|
|
<div class="modal__title center">
|
|
<svg class="icon fill-text-contrast" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
|
</svg>
|
|
{ title }
|
|
</div>
|
|
<div class="modal__body">
|
|
{ content }
|
|
</div>
|
|
<div class="modal__footer">
|
|
<button class="button button--outline button--danger" onclick={ () => { handleConfirm(event, data) } }>
|
|
Confirm
|
|
</button>
|
|
<button class="button button--outline float-right" onclick={ (event) => { handleClose(event) } }>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid" if={ state.maxLength > state.users.length }>
|
|
<div class="col-12">
|
|
<div class="buckets__more">
|
|
<button type="button" class="button" onclick={ handleClick }>
|
|
More
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-arrow-down"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
import remove from 'lodash.remove'
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
state: {
|
|
users: [],
|
|
maxLength: 0
|
|
},
|
|
|
|
onBeforeMount() {
|
|
this.fetch()
|
|
},
|
|
|
|
handleClick() {
|
|
|
|
},
|
|
|
|
handleDelete(event, user) {
|
|
event.preventDefault()
|
|
|
|
axios.delete('/api/users/' + user._id)
|
|
.then((response) => {
|
|
|
|
// removing from buckets
|
|
remove(this.state.users, function(u) {
|
|
return u._id === user._id
|
|
})
|
|
|
|
this.update()
|
|
})
|
|
},
|
|
|
|
/**
|
|
* getting all buckets
|
|
*
|
|
*
|
|
*/
|
|
fetch() {
|
|
axios.get('/api/users').then((response) => {
|
|
this.state.users = response.data.data
|
|
this.update()
|
|
})
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</app-users>
|