Feat: create hightlightSum component

src/components/caOnPeriod.vue

@@ -1,41 +1,22 @@
 <template>
 <div class="hightlights"> 
-    <div class="hightlight boxed">
+    <hightlight-sum :months="months" attribute="ca"/>
-        <ul>
+    <hightlight-sum :months="months" attribute="remuneration"/>
-            <li>{{ ca }} €</li>
+    <hightlight-sum :months="months" attribute="caPersoUntouch"/>
-            <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>
 </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 () {
       },

src/components/caRepartition.vue

@@ -1,39 +1,22 @@
 <template>
 <div class="hightlights"> 
-    <div class="hightlight boxed">
+    <hightlight-sum :months="months" attribute="caTheo"/>
-        <ul>
+    <hightlight-sum :months="months" attribute="retro"/>
-            <li>{{ caTheo }} €</li>
+    <hightlight-sum :months="months" attribute="notInvoiced"/>
-            <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>
 </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 () {
       },

src/components/hightlightSum.vue

@@ -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>

src/store/config/index.js

@@ -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,