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

<template>
  <div>
    <v-progress-linear v-if="loading && users.length !== 0" indeterminate />
    <v-container>
      <AddAmountSkeleton v-if="loading && users.length === 0" />
    </v-container>
    <div v-for="user in users" :key="users.indexOf(user)">
      <div v-if="isFiltered(user)">
        <v-container>
          <v-card :loading="user.loading">
            <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>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'

export default {
  name: 'CreditLists',
  components: { AddAmountSkeleton },
  props: {},
  data() {
    return {
      color: 'green accent-4'
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    ...mapActions({
      addAmount: 'barUsers/addAmount',
      getUsers: 'barUsers/getUsers'
    }),
    getColor(type) {
      return type === 'credit' ? 'title green--text' : 'title red--text'
    },
    isFiltered(user) {
      try {
        return (
          user.firstname.toLowerCase().includes(this.filter.toLowerCase()) ||
          user.lastname.toLowerCase().includes(this.filter.toLowerCase())
        )
      } catch (e) {
        return true
      }
    }
  },
  computed: {
    ...mapGetters({
      users: 'barUsers/users',
      filter: 'barUsers/filter',
      loading: 'barUsers/usersLoading'
    })
  }
}
</script>

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