<template>
        <div>
            <TitleBar/>
            <v-navigation-drawer permanent width="auto" app clipped class="elevation-2">
                <v-container>
                <h1 v-for="user in users" v-bind:key="user.id">{{user.firstname}} {{user.lastname}}</h1>
                </v-container>
            </v-navigation-drawer>
            <v-content>
                <v-container>

                </v-container>
            </v-content>
        </div>
</template>

<script>
    import TitleBar from "@/components/TitleBar";
    import httpClient from "../plugins/restService";

    export default {
        name: "FinanzerView",
        components: {TitleBar},
        created() {
          this.getUser()
        },
        data () {
            return {
                users: [],
            }
        },
        methods: {
            getUser() {
                httpClient.getFinanzerMain(this.$store.getters.getToken)
                .then(response => {
                    // eslint-disable-next-line no-console
                    console.log("ich bin hier. response: ", response.data)
                    for (let user in response.data) {
                        // eslint-disable-next-line no-console
                        console.log("user: ", user)
                        const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
                        this.users.push({
                            id: lastId + 1,
                            username: response.data[user].username,
                            firstname: response.data[user].firstname,
                            lastname: response.data[user].lastname
                        })
                    }})
                .catch(error => {
                    // eslint-disable-next-line no-console
                    console.log("error: ", error.response.data.error)
                })

                // eslint-disable-next-line no-console
                console.log("this.users: ", this.users)
            },


        }
    }
</script>

<style scoped>

</style>
