From 9e123a95428804aa6871ff77e79bfb6f2627a890 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Fri, 13 Aug 2021 10:54:47 +0200
Subject: [PATCH] Feat: create hightlightSum component

---
 src/components/caOnPeriod.vue    | 34 +++------------------
 src/components/caRepartition.vue | 30 +++---------------
 src/components/hightlightSum.vue | 52 ++++++++++++++++++++++++++++++++
 src/store/config/index.js        |  2 +-
 4 files changed, 63 insertions(+), 55 deletions(-)
 create mode 100644 src/components/hightlightSum.vue

diff --git a/src/components/caOnPeriod.vue b/src/components/caOnPeriod.vue
index 813e9b2..8fa2053 100644
--- a/src/components/caOnPeriod.vue
+++ b/src/components/caOnPeriod.vue
@@ -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 () {
       },
diff --git a/src/components/caRepartition.vue b/src/components/caRepartition.vue
index c205bbe..b1ab80a 100644
--- a/src/components/caRepartition.vue
+++ b/src/components/caRepartition.vue
@@ -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 () {
       },
diff --git a/src/components/hightlightSum.vue b/src/components/hightlightSum.vue
new file mode 100644
index 0000000..5634459
--- /dev/null
+++ b/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>
diff --git a/src/store/config/index.js b/src/store/config/index.js
index 78bc78f..c0110db 100644
--- a/src/store/config/index.js
+++ b/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,