<template>
    <div class="Userlist">
        <h1>Userlist</h1>
        <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" :limit="50"></scroll-table>
    </div>
</template>

<script>
import ScrollTable from '../../components/scroll-table.vue';

export default {
    name: "Userlist",
    components: {
        ScrollTable
    },
    data() {
        return {
            actions: [{
                title: 'Edit',
                icon: 'icon-pencil',
                action(row) {
                    console.log("yay edit", row);
                }
            }, {
                title: 'Duplicate',
                icon: 'icon-docs',
                action(row) {
                    console.log("yay duplicate", row);
                }
            }, {
                title: 'Hide',
                icon: 'icon-eye-off',
                action(row) {
                    console.log("yay hide", row);
                }
            }],
            columns: [{
                heading: 'ID',
                prop: 'ID',
                orderBy: 'id',
                align: 'left'
            }, {
                heading: 'Benutzername',
                prop: 'Username',
                orderBy: 'username',
                align: 'center'
            }, {
                heading: 'Firma',
                prop: 'Company',
                orderBy: 'company'
            }, {
                heading: 'Nachname',
                prop: 'Lastname',
                orderBy: 'lastname'
            }, {
                heading: 'Vorname',
                prop: 'Firstname',
                orderBy: 'firstname'
            }, {
                heading: 'Email',
                prop: 'Email',
                orderBy: 'email'
            }, {
                heading: 'Reseller',
                prop: 'Reseller.Username'
            }, {
                heading: 'Render',
                render(row) {
                   return 'ID:' + row.ID;
                }
            }],
            newRows: [ ],
            hasMore: true,
            loading: false
        }
    },
    methods: {
        more(offset, limit, orderBy, orderDesc, search) {
            this.loading = true;
            this.$store.dispatch('apiRequest', {
                endpoint: 'users',
                params: {
                    start: offset,
                    length: limit,
                    orderBy,
                    orderDesc,
                    search
                }
            })
                .then(rows => {
                    this.hasMore = (rows.length >= limit);
                    this.newRows = rows;
                    this.loading = false;
                })
                .catch(error => {
                    this.loading = false;
                    this.hasMore = false;

                    console.log(error);
                });

        }
    }
}
</script>
