Feat: create hightlightSum component

This commit is contained in:
Bertrand Benjamin 2021-08-13 10:54:47 +02:00
parent 2d0c2c4df9
commit 9e123a9542
4 changed files with 63 additions and 55 deletions

View File

@ -1,41 +1,22 @@
<template>
<div class="hightlights">
<div class="hightlight boxed">
<ul>
<li>{{ ca }} </li>
<li>CA</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ remuneration }} </li>
<li>Rémunération</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ caPersoUntouch }} </li>
<li>13e mois</li>
</ul>
</div>
<hightlight-sum :months="months" attribute="ca"/>
<hightlight-sum :months="months" attribute="remuneration"/>
<hightlight-sum :months="months" attribute="caPersoUntouch"/>
</div>
<revenus-chart/>
</template>
<script>
import { mapGetters } from 'vuex'
import {
ca,
caPersoUntouch,
sum,
mean,
} from '../lib/months'
import RevenusChart from '../components/graphs/RevenusChart.vue'
import hightlightSum from './hightlightSum.vue'
export default {
name: 'caOnPeriod',
components: {
RevenusChart: RevenusChart,
hightlightSum: hightlightSum,
},
data () {
return {}
@ -44,11 +25,6 @@ export default {
...mapGetters('travail', {
months: "months",
}),
ca: function () {return sum(Object.values(this.months).map(a => ca(a))).toLocaleString()},
caMean: function () {return mean(Object.values(this.months).map(a => ca(a))).toLocaleString()},
remuneration: function () {return sum(Object.values(this.months).map(a => a.remuneration)).toLocaleString()},
caPersoUntouch: function () {return sum(Object.values(this.months).map(a => caPersoUntouch(a))).toLocaleString()},
},
mounted () {
},

View File

@ -1,39 +1,22 @@
<template>
<div class="hightlights">
<div class="hightlight boxed">
<ul>
<li>{{ caTheo }} </li>
<li>CA "séances effectuées"</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ retrocession }} </li>
<li>Rétrocession</li>
</ul>
</div>
<div class="hightlight boxed">
<ul>
<li>{{ notInvoiced }} </li>
<li>Non facturé</li>
</ul>
</div>
<hightlight-sum :months="months" attribute="caTheo"/>
<hightlight-sum :months="months" attribute="retro"/>
<hightlight-sum :months="months" attribute="notInvoiced"/>
</div>
<repartition-chart/>
</template>
<script>
import { mapGetters } from 'vuex'
import {
sum,
notInvoiced,
} from '../lib/months'
import RepartitionChart from './graphs/RepartitionChart.vue'
import hightlightSum from './hightlightSum.vue'
export default {
name: 'caRepartition',
components: {
RepartitionChart: RepartitionChart,
hightlightSum: hightlightSum,
},
data () {
return {}
@ -42,9 +25,6 @@ export default {
...mapGetters('travail', {
months: "months",
}),
caTheo: function () {return sum(Object.values(this.months).map(a => a.caTheo)).toLocaleString()},
retrocession: function () {return sum(Object.values(this.months).map(a => a.retro)).toLocaleString()},
notInvoiced: function () {return sum(Object.values(this.months).map(a => notInvoiced(a))).toLocaleString()},
},
mounted () {
},

View File

@ -0,0 +1,52 @@
<template>
<div class="hightlight boxed">
<ul>
<li>{{ sumValue }} {{ unit }}</li>
<li>{{ label }} </li>
</ul>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
sum,
} from '../lib/months'
export default {
name: 'hightlightSum',
components: {
},
props: {
months: Object,
attribute: String,
},
data () {
return {}
},
computed: {
...mapGetters('config', {
descOf: "descOf",
}),
theDesc: function () {
return this.descOf(this.attribute)
},
sumValue: function () {
return sum(Object.values(this.months).map(m => this.theDesc.output(m))).toLocaleString()
},
label: function () {
return this.theDesc.label
},
unit: function () {
return this.theDesc.unit
},
},
mounted () {
},
methods: {
},
}
</script>
<style scoped>
</style>

View File

@ -119,7 +119,7 @@ const config = {
{
name: 'caPersoUntouch',
color: '',
label: 'CA destiné à la rémuneration non reversé',
label: 'Banque 13e mois',
type: 'compute',
unit: '€',
hightlight: false,