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>
                <template v-slot:append>
                    <v-list>
                        <v-list-item>
                            <v-list-item-icon><v-icon>search</v-icon></v-list-item-icon>
                            <v-list-item-title>
                                <v-autocomplete outlined return-object v-model="user" style="margin-top: 3px"
                                                placeholder="Suche Person" :items="allUsers" item-text="fullName"
                                                prepend-inner-icon="search" full-width/>
                            </v-list-item-title>
                        </v-list-item>
                        <v-list-item>
                            <v-list-item-icon><v-icon>person_add</v-icon></v-list-item-icon>
                            <v-list-item-title>
                                <v-btn text block @click="addUser">Hinzufügen</v-btn>
                            </v-list-item-title>
                        </v-list-item>
                    </v-list>
                </template>
            </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"
                      @add:amount="addAmount" @add:credit="addCredit"
                      @do:lock="doLock" @save:config="saveConfig"/>
            </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()
            httpClient.searchUser(this.$store.getters.getToken, {searchString: ""})
                .then(response => {
                    this.allUsers = response.data

                    for (let i = 0; i < this.allUsers.length; i++) {
                        this.allUsers[i].fullName = this.allUsers[i].firstname + " " + this.allUsers[i].lastname
                    }
                })
        },
        data () {
            return {
                users: [],
                activeUser: {
                    username: null,
                },
                allUsers: [],
                user: null
            }
        },
        methods: {
            test (e) {
                if (this.activeUser.username === e.username) {
                    this.activeUser = {username: null}
                } else {
                    this.activeUser = e
                }
            },
            createAmount(creditList) {
                let amount = {
                    type:'Schulden',
                    jan_amount: 0 - creditList.jan.depts,
                    feb_amount: 0 - creditList.feb.depts,
                    maer_amount: 0 - creditList.maer.depts,
                    apr_amount:0 - creditList.apr.depts,
                    mai_amount: 0 - creditList.mai.depts,
                    jun_amount: 0 - creditList.jun.depts,
                    jul_amount: 0 - creditList.jul.depts,
                    aug_amount: 0 - creditList.aug.depts,
                    sep_amount: 0 - creditList.sep.depts,
                    okt_amount: 0 - creditList.okt.depts,
                    nov_amount: 0 - creditList.nov.depts,
                    dez_amount: 0 - creditList.dez.depts,
                    last: 0 - 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
                return amount
            },
            createCredit(creditList) {
                let credit = {
                    type:'Guthaben',
                    jan_amount: creditList.jan.credit,
                    feb_amount: creditList.feb.credit,
                    maer_amount: creditList.maer.credit,
                    apr_amount: creditList.apr.credit,
                    mai_amount: creditList.mai.credit,
                    jun_amount: creditList.jun.credit,
                    jul_amount: creditList.jul.credit,
                    aug_amount: creditList.aug.credit,
                    sep_amount: creditList.sep.credit,
                    okt_amount: creditList.okt.credit,
                    nov_amount: creditList.nov.credit,
                    dez_amount: 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
                return credit
            },
            createSum(credit, 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
                return sum
            },
            getUser() {
                httpClient.getFinanzerMain(this.$store.getters.getToken)
                .then(response => {
                    for (let user in response.data) {
                        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']) {

                            let amount = this.createAmount(response.data[user]['creditList'][creditList])
                            let credit = this.createCredit(response.data[user]['creditList'][creditList])
                            let sum = this.createSum(credit, amount)
                            list[creditList] = [{...credit}, {...amount}, {...sum}]
                        }
                        this.users.push({
                            id: lastId + 1,
                            username: response.data[user].username,
                            firstname: response.data[user].firstname,
                            lastname: response.data[user].lastname,
                            limit: response.data[user].limit,
                            locked: response.data[user].locked,
                            autoLock: response.data[user].autoLock,
                            creditList: list,
                            expand: false,
                            active: false
                        })
                    }})
                    .catch(error => {
                        if (error.response) {
                            if (error.response.status === 401) {
                                this.$store.dispatch('logout')
                            }
                        }
                        this.users = []
                    })

                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
                })
            },
            addAmount(data) {
                httpClient.addAmountFinanzer(this.$store.getters.getToken, {userId: data.user.username, amount: data.amount * 100, year: data.year, month: data.month})
                .then(response => {

                    let user = this.users.find(user => {return user.username === data.user.username})
                    let index = this.users.indexOf(user)
                    let list = {}
                    for (let creditList in response.data) {
                        if (creditList !== 'locked') {
                            let amount = this.createAmount(response.data[creditList])
                            let credit = this.createCredit(response.data[creditList])
                            let sum = this.createSum(credit, amount)
                            list[creditList] = [{...credit}, {...amount}, {...sum}]
                        }
                    }
                    this.users[index].creditList = list
                    this.users[index].locked = response.data.locked
                })
                .catch(error => {
                    if (error.response) {
                        if (error.response.status === 401) {
                            this.$store.dispatch('logout')
                        }
                    }
                    this.users = []
                })
                this.users.find(a => {return a.username === this.activeUser.username})
            },
            addCredit(data) {

                httpClient.addCreditFinanzer(this.$store.getters.getToken, {userId: data.user.username, credit: data.credit * 100, year: data.year, month: data.month})
                .then(response => {

                    let user = this.users.find(user => {return user.username === data.user.username})
                    let index = this.users.indexOf(user)
                    let list = {}
                    for (let creditList in response.data) {
                        if (creditList !== 'locked') {
                            let amount = this.createAmount(response.data[creditList])
                            let credit = this.createCredit(response.data[creditList])
                            let sum = this.createSum(credit, amount)
                            list[creditList] = [{...credit}, {...amount}, {...sum}]
                        }
                    }
                    this.users[index].creditList = list
                    this.users[index].locked = response.data.locked
                })
                .catch(error => {
                    if (error.response) {
                        if (error.response.status === 401) {
                            this.$store.dispatch('logout')
                        }
                    }
                    this.users = []
                })
                this.users.find(a => {return a.username === this.activeUser.username})
            },
            deactivateAllUser() {
                for (let user in this.users) {
                    user.active = false
                }
            },
            doLock(data) {
                httpClient.lockUser(this.$store.getters.getToken, {userId: data.user.username, locked: data.locked})
                .then(response => {
                    let user = this.users.find(user => {return user.username === data.user.username})
                    let index = this.users.indexOf(user)
                    this.users[index].locked = response.data.locked
                })
                .catch(error => {
                    if (error.response) {
                        if (error.response.status === 401) {
                            this.$store.dispatch('logout')
                        }
                    }
                })
            },
            saveConfig(data) {
                httpClient.finanzerSetConfig(this.$store.getters.getToken, {userId: data.user.username, limit: data.limit * 100, autoLock: data.autoLock})
                .then(response => {
                    let user = this.users.find(user => {return user.username === data.user.username})
                    let index = this.users.indexOf(user)
                    this.users[index].limit = response.data.limit
                    this.users[index].autoLock = response.data.autoLock
                })
                .catch(error => {
                    if (error.response) {
                        if (error.response.status === 401) {
                            this.$store.dispatch('logout')
                        }
                    }
                })
            },
            addUser() {
                httpClient.finanzerAddUser(this.$store.getters.getToken, {userId: this.user.username})
                .then(response => {
                    for (let username in response.data) {
                        let existUser = this.users.find(a => {return a.username === username})
                        let list = {}
                        for (let creditList in response.data[username]['creditList']) {
                            let amount = this.createAmount(response.data[username]['creditList'][creditList])
                            let credit = this.createCredit(response.data[username]['creditList'][creditList])
                            let sum    = this.createSum(credit, amount)
                            list[creditList] = [{...credit}, {...amount}, {...sum}]
                        }
                        if (existUser) {
                            existUser.firstname = response.data[username].firstname
                            existUser.lastname = response.data[username].lastname
                            existUser.limit = response.data[username].limit
                            existUser.locked = response.data[username].locked
                            existUser.autoLock = response.data[username].autoLock
                            existUser.creditList = list
                        } else {
                            const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
                            this.users.push({
                                id: lastId + 1,
                                username: response.data[username].username,
                                firstname: response.data[username].firstname,
                                lastname: response.data[username].lastname,
                                limit: response.data[username].limit,
                                locked: response.data[username].locked,
                                autoLock: response.data[username].autoLock,
                                creditList: list,
                                expand: false,
                                active: false
                            })
                        }
                    }
                })
            }

        }
    }
</script>

<style scoped>

</style>