comptes/src/components/box.vue

<template>
  <b-card v-if="tag"
          :bg-variant="tag.variant"
          text-variant="white"
          class="text-center">
    <div class="card-text">
        <div class="icon">
          <font-awesome-icon :icon="tag.icon" class="fa-3x"/>
        </div>
        <div class="amount">
          <h3>{{ total() }}€</h3>
          {{ tag.name }}
        </div>
    </div>
  </b-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { total } from '../libs/data_processing'
export default {
  name: 'box',
  props: [
    'tagname',
    'rows'
  ],
  data () {
    return {
      default_tag: {
        name: 'Tout',
        variant: 'info',
        icon: 'file-invoice-dollar'
      }
    }
  },
  computed: {
    ...mapGetters('config', [
      'tags'
    ]),
    ...mapGetters('datas', [
      'tag_filter_rows'
    ]),
    tag () {
      if (this.tagname) {
        return this.tags[this.tagname]
      } else {
        return this.default_tag
      }
    }
  },
  methods: {
    filter_rows () {
      if (this.tag === this.default_tag) {
        return this.tag_filter_rows([])
      } else {
        return this.tag_filter_rows([this.tag.name])
      }
    },
    total () {
      return total(this.filter_rows())
    },
    count () {
    }
  }
}

</script>

<style scoped>
.card-body {
  padding: 10px;
}
.card-text {
  display: flex;
}
.icon {
  flex: 40%;
  align-self: center;
}
.amount {
  flex: 50%;
  text-align: right;
  margin-left: 10px;
}
</style>