Feat: create hightlightSum component
This commit is contained in:
parent
2d0c2c4df9
commit
9e123a9542
@ -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 () {
|
||||
},
|
||||
|
@ -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 () {
|
||||
},
|
||||
|
52
src/components/hightlightSum.vue
Normal file
52
src/components/hightlightSum.vue
Normal 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>
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user