flaschengeist-frontend/src/views/BarView.vue

<template>
    <div>
        <TitleBar/>
        <v-content>
            <SearchBar @add:creditList="addCreditList"/>
            <CreditLists v-bind:users="users" @add:amount="addAmount"></CreditLists>
        </v-content>
    </div>
</template>

<script>
    import TitleBar from "@/components/TitleBar";
    import CreditLists from "@/components/baruser/CreditLists";
    import httpClient from "../plugins/restService";
    // eslint-disable-next-line no-unused-vars
    import axios from "axios";
    import SearchBar from "../components/baruser/SearchBar";
    export default {
        name: "BarView",
        components: {SearchBar, CreditLists, TitleBar},
        created() {
            this.getUser()
        },
        data () {
            return {
                users: []
            }
        },
        methods: {
            getUser() {
                this. users = []
                httpClient.getUserBar(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
                        this.users.push({
                            id: lastId + 1,
                            username: response.data[user].username,
                            firstname: response.data[user].firstname,
                            lastname: response.data[user].lastname,
                            locked: response.data[user].locked,
                            amount: response.data[user].amount,
                            type: response.data[user].type
                        })
                    }
                })
                .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.username > b.username) return 1
                    if (a.username < b.username) return -1
                    return 0
                })
            },
            // eslint-disable-next-line no-unused-vars
            addAmount(username, amount) {
                httpClient.addAmountBar(this.$store.getters.getToken, {userId: username, amount: amount})
                .then((response) => {
                    let user = this.users.find(user => {
                        return user.username === username ? user : false
                    })
                    user.amount = response.data.amount
                    user.locked = response.data.locked
                    user.type = response.data.type
                })
                .catch(error => {
                    if (error.response) {
                        if (error.response.status === 401) {
                            this.$store.dispatch('logout')
                        }
                    }
                    this.users = []
                })
            },
            addCreditList(user) {
                if (!this.users.find(user1 => {
                    return user1.username === user.username
                })) {
                    httpClient.getOneUserBar(this.$store.getters.getToken, {userId: user.username})
                    .then(response => {
                        const lastId = this.users.length > 0 ? this.users[this.users.length - 1].id : 0
                        this.users.push({
                            id: lastId + 1,
                            username: response.data.username,
                            firstname: response.data.firstname,
                            lastname: response.data.lastname,
                            locked: response.data.locked,
                            amount: response.data.amount,
                            type: response.data.type
                        })
                    })

                }
            }
        }
    }
</script>

<style scoped>

</style>