comptes/src/components/box.vue

76 lines
1.3 KiB
Vue

<template>
<b-card v-if="poste"
:bg-variant="poste.variant"
text-variant="white"
class="text-center">
<div class="card-text">
<div class="icon">
<font-awesome-icon :icon="poste.icon" class="fa-3x"/>
</div>
<div class="amount">
<h3>{{ total() }}</h3>
{{ poste.name }}
</div>
</div>
</b-card>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'box',
props: [
'postename',
'rows'
],
data () {
return {
}
},
computed: {
...mapGetters('config', [
'postes'
]),
...mapGetters('datas', [
'libelle_filter_rows'
]),
poste () {
return this.postes[this.postename]
}
},
methods: {
filter_rows () {
return this.libelle_filter_rows(this.poste.words, this.poste.invert)
},
total () {
return Math.round(
-this.filter_rows()
.map(x => parseFloat(x.Montant))
.reduce((sum, x) => sum + x, 0)
)
},
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>