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>