128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
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>
|