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.
172 lines
5.4 KiB
172 lines
5.4 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">
|
|
<app-sidebar-button class="m-bottom-0 m-right-3" event="app-users-form-open" selector="app-users-form" data={ user }>
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-edit"></use>
|
|
</svg>
|
|
</app-sidebar-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>
|
|
|
|
<app-modal id="user-delete-confirm">
|
|
<span slot="title">
|
|
<svg class="icon fill-text-contrast" aria-hidden="true">
|
|
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
|
</svg>
|
|
Delete
|
|
</span>
|
|
</app-modal>
|
|
|
|
<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>
|
|
|
|
<app-loading loading={ state.loading }></app-loading>
|
|
|
|
</div>
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
import remove from 'lodash.remove'
|
|
|
|
import * as riot from 'riot'
|
|
import AppModal from './modal.riot'
|
|
|
|
riot.register('app-modal', AppModal)
|
|
riot.mount('app-modal')
|
|
|
|
/**
|
|
*
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
export default {
|
|
|
|
state: {
|
|
users: [],
|
|
maxLength: 0
|
|
},
|
|
|
|
onBeforeMount() {
|
|
this.fetch()
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {[type]} event
|
|
* @param {[type]} user
|
|
* @return {[type]}
|
|
*
|
|
*/
|
|
handleUpdate(event, user) {
|
|
const customEvent = new CustomEvent('app-users-form-open', {
|
|
'detail': user
|
|
})
|
|
|
|
document.querySelector('app-users-form').dispatchEvent(customEvent);
|
|
},
|
|
|
|
handleDelete(event, user) {
|
|
|
|
event.preventDefault()
|
|
|
|
const customEvent = new CustomEvent('open', {
|
|
'detail': {
|
|
'confirm': () => {
|
|
|
|
this.state.loading = true
|
|
|
|
axios.delete('/api/users/v1/' + user._id)
|
|
.then((response) => {
|
|
|
|
// removing from buckets
|
|
remove(this.state.users, function(u) {
|
|
return u._id === user._id
|
|
})
|
|
|
|
}).catch((error) => {
|
|
|
|
}).then(() => {
|
|
this.state.loading = false
|
|
this.update()
|
|
})
|
|
},
|
|
|
|
// @TODO find a better solution to create body text
|
|
'body': 'Do you want delete ' + user.email + '?'
|
|
}
|
|
})
|
|
|
|
this.$('#user-delete-confirm').dispatchEvent(customEvent);
|
|
},
|
|
|
|
/**
|
|
* getting all buckets
|
|
*
|
|
*
|
|
*/
|
|
fetch() {
|
|
axios.get('/api/users/v1').then((response) => {
|
|
this.state.users = response.data.data
|
|
this.update()
|
|
})
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</app-users>
|