flaschengeist-frontend/src/views/FinanzerView.vue

<template>
        <div>
            <TitleBar/>
            <v-navigation-drawer mini-variant expand-on-hover app clipped permanent overflow>
                <v-list>
                    <v-list-item class="title" link @click="test(activeUser)">
                        <v-list-item-icon>
                            <v-icon>home</v-icon>
                        </v-list-item-icon>
                        <v-list-item-title>
                            Gesamtübersicht
                        </v-list-item-title>

                    </v-list-item>
                </v-list>
                <v-divider/>
                <v-list>
                    <v-list-item v-for="user in users" v-bind:key="users.indexOf(user)" :class="user.username === activeUser.username ? 'v-list-item--highlighted' : ''" link @click="test(user)">
                        <v-list-item-title>{{user.lastname}}, {{user.firstname}}</v-list-item-title>
                    </v-list-item>
                </v-list>
            </v-navigation-drawer>
            <v-content v-if="!activeUser.username">
                <Overview v-bind:users="users" @add:amount="addAmount" @add:credit="addCredit"/>
            </v-content>
            <v-content v-else>
                <User v-bind:user="activeUser"/>
            </v-content>
        </div>
</template>

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

    export default {
        name: "FinanzerView",
        components: {User, Overview, TitleBar},
        created() {
          this.getUser()
        },
        data () {
            return {
                users: [],
                activeUser: {
                    username: null,
                },
            }
        },
        methods: {
            test (e) {
                // eslint-disable-next-line no-console
                console.log("event: ", e)
                if (this.activeUser.username === e.username) {
                    this.activeUser = {username: null}
                } else {
                    this.activeUser = {...e}
                }
            },
            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
                        // eslint-disable-next-line no-unused-vars
                        let list = {}
                        for (let creditList in response.data[user]['creditList']) {
                            // eslint-disable-next-line no-unused-vars
                            // eslint-disable-next-line no-console
                            console.log('creditList: ', creditList, response.data[user]['creditList'])
                            let amount = {
                                type:'Schulden',
                                jan_amount: 0 - response.data[user]['creditList'][creditList].jan.depts,
                                feb_amount: 0 - response.data[user]['creditList'][creditList].feb.depts,
                                maer_amount: 0 - response.data[user]['creditList'][creditList].maer.depts,
                                apr_amount:0 - response.data[user]['creditList'][creditList].apr.depts,
                                mai_amount: 0 - response.data[user]['creditList'][creditList].mai.depts,
                                jun_amount: 0 - response.data[user]['creditList'][creditList].jun.depts,
                                jul_amount: 0 - response.data[user]['creditList'][creditList].jul.depts,
                                aug_amount: 0 - response.data[user]['creditList'][creditList].aug.depts,
                                sep_amount: 0 - response.data[user]['creditList'][creditList].sep.depts,
                                okt_amount: 0 - response.data[user]['creditList'][creditList].okt.depts,
                                nov_amount: 0 - response.data[user]['creditList'][creditList].nov.depts,
                                dez_amount: 0 - response.data[user]['creditList'][creditList].dez.depts,
                                last: 0 - response.data[user]['creditList'][creditList]['last']
                            }

                            amount.sum = amount.jan_amount + amount.feb_amount + amount.maer_amount + amount.apr_amount + amount.mai_amount + amount.jun_amount + amount.jul_amount + amount.aug_amount + amount.sep_amount + amount.okt_amount + amount.nov_amount + amount.dez_amount

                            let credit = {
                                type:'Guthaben',
                                jan_amount: response.data[user]['creditList'][creditList].jan.credit,
                                feb_amount: response.data[user]['creditList'][creditList].feb.credit,
                                maer_amount: response.data[user]['creditList'][creditList].maer.credit,
                                apr_amount:response.data[user]['creditList'][creditList].apr.credit,
                                mai_amount:response.data[user]['creditList'][creditList].mai.credit,
                                jun_amount:response.data[user]['creditList'][creditList].jun.credit,
                                jul_amount:response.data[user]['creditList'][creditList].jul.credit,
                                aug_amount:response.data[user]['creditList'][creditList].aug.credit,
                                sep_amount:response.data[user]['creditList'][creditList].sep.credit,
                                okt_amount:response.data[user]['creditList'][creditList].okt.credit,
                                nov_amount:response.data[user]['creditList'][creditList].nov.credit,
                                dez_amount:response.data[user]['creditList'][creditList].dez.credit
                            }
                            credit.sum = credit.jan_amount + credit.feb_amount + credit.maer_amount + credit.apr_amount + credit.mai_amount + credit.jun_amount + credit.jul_amount + credit.aug_amount + credit.sep_amount + credit.okt_amount + credit.nov_amount + credit.dez_amount
                            let sum = {
                                type:'Summe',
                                jan_amount: credit.jan_amount + amount.jan_amount,
                                feb_amount: credit.feb_amount + amount.feb_amount,
                                maer_amount: credit.maer_amount + amount.maer_amount,
                                apr_amount: credit.apr_amount + amount.apr_amount,
                                mai_amount: credit.mai_amount + amount.mai_amount,
                                jun_amount: credit.jun_amount + amount.jun_amount,
                                jul_amount: credit.jul_amount + amount.jul_amount,
                                aug_amount: credit.aug_amount + amount.aug_amount,
                                sep_amount: credit.sep_amount + amount.sep_amount,
                                okt_amount: credit.okt_amount + amount.okt_amount,
                                nov_amount: credit.nov_amount + amount.nov_amount,
                                dez_amount: credit.dez_amount + amount.dez_amount,
                            }
                            sum.sum = sum.jan_amount + sum.feb_amount + sum.maer_amount + sum.apr_amount + sum.mai_amount + sum.jun_amount + sum.jul_amount + sum.aug_amount + sum.sep_amount + sum.okt_amount + sum.nov_amount + sum.dez_amount

                            list[creditList] = [{...credit}, {...amount}, {...sum}]
                            // eslint-disable-next-line no-console
                            console.log("creditList list:", creditList, list)
                        }
                        this.users.push({
                            id: lastId + 1,
                            username: response.data[user].username,
                            firstname: response.data[user].firstname,
                            lastname: response.data[user].lastname,
                            creditList: list,
                            expand: false,
                            active: false
                        })
                    }})
                .catch(error => {
                    // eslint-disable-next-line no-console
                    console.log("error: ", error.response.data.error)
                })

                this.users = this.users.sort((a, b) => {
                    if (a.lastname > b.lastname) return 1
                    if (a.lastname < b.lastname) return -1
                    if (a.firstname > b.firstname) return 1
                    if (a.firstname < b.firstname) return -1
                    return 0
                })

                // eslint-disable-next-line no-console
                console.log("this.users: ", this.users)
            },
            addAmount(data) {
                httpClient.addAmountFinanzer(this.$store.getters.getToken, {userId: data.user.username, amount: data.amount * 100, year: data.year, month: data.month})
            },
            addCredit(data) {

                httpClient.addCreditFinanzer(this.$store.getters.getToken, {userId: data.user.username, credit: data.credit * 100, year: data.year, month: data.month})
            },
            deactivateAllUser() {
                for (let user in this.users) {
                    user.active = false
                }
            }

        }
    }
</script>

<style scoped>

</style>