nano-buckets/resources/js/components/users.riot

<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>