flaschengeist-frontend/src/components/baruser/CreditLists.vue

<template>
    <div>
        <div v-for="user in users" :key="users.indexOf(user)">
            <v-container>
                <v-card>
                    <v-list-item>
                        <v-list-item-title class="title">{{user.firstname}} {{user.lastname}}</v-list-item-title>
                    </v-list-item>
                    <v-card-text>
                        <v-row>
                            <v-col cols="10">
                                <v-row>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 200})"
                                               :color="color" :disabled="user.locked">2 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 100})"
                                               :color="color" :disabled="user.locked">1 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 50})"
                                               :color="color" :disabled="user.locked">
                                            0,50 €
                                        </v-btn>
                                    </v-col>
                                </v-row>
                                <v-row>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount({username:user.username, amount: 40})"
                                               :color="color" :disabled="user.locked">
                                            0,40 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 20})"
                                               :color="color" :disabled="user.locked">
                                            0,20 €
                                        </v-btn>
                                    </v-col>
                                    <v-col>
                                        <v-btn class="creditBtn" block @click="addAmount({username: user.username, amount: 10})"
                                               :color="color" :disabled="user.locked">
                                            0,10 €
                                        </v-btn>
                                    </v-col>
                                </v-row>
                            </v-col>
                            <v-col align-self="center">
                                <v-row>
                                    <v-list-item>
                                        <v-list-item-action-text :class="getColor(user.type)">
                                            {{(user.amount/100).toFixed(2)}} €
                                        </v-list-item-action-text>
                                    </v-list-item>
                                </v-row>
                            </v-col>
                        </v-row>
                        <v-alert v-if="user.locked" type="error">{{user.firstname}} darf nicht mehr anschreiben. {{user.firstname}} sollte sich lieber mal beim Finanzer melden.</v-alert>
                    </v-card-text>
                </v-card>
            </v-container>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex';

    export default {
        name: "CreditLists",
        props: {
        },
        data () {
            return {
                color: 'green accent-4',

            }
        },
        created() {
            this.getUsers()
            // eslint-disable-next-line no-console
            console.log(this.users)
        },
        methods: {
            ...mapActions({
                addAmount: 'barUsers/addAmount',
                getUsers: 'barUsers/getUsers'
            }),
            getColor(type) {
                return type === 'credit' ? 'title green--text' : 'title red--text'
            }

        },
        computed: {
            ...mapGetters({users: 'barUsers/users'})
        }
    }
</script>

<style scoped>
    .creditBtn {
        margin: 2px;
    }
</style>