src/components/CreateMonth.vue

@@ -19,8 +19,8 @@
         </div>
       </div>
       <div class="datas">
-        <li v-for="cara in description" :key='cara.name'> 
+        <li v-for="cara in monthDesc" :key='cara.name'> 
-            <label :for='cara.name'>{{ cara.label }}</label>
+            <label :for='cara.name'>{{ cara.desc }}</label>
             <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
         </li>
       </div>
@@ -64,7 +64,7 @@ export default {
         'lastMonthDate': 'lastMonthDate',
     }),
     ...mapGetters('config', {
-        'description': 'descEditable',
+        'monthDesc': 'monthDesc',
     }),
         formatedDate: function () {
           return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
@@ -132,10 +132,6 @@ export default {
         display: flex;
         flex-direction: column-reverse;
     }
-    label{
-        text-align: right;
-        font-size: 0.8em;
-    }
     .value {
         font-weight: bold;
     }

src/components/MonthPresentation.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="month-presentation">
-    <div id="date">
+  <div class="date">
     <div class="month">
        {{ theMonth }} 
     </div> 
@@ -13,17 +13,19 @@
         <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
       </div>
   </div>
-    <div id="display" v-show="!editing">
+  <div id="display">
-        <div class="hightlight" v-for="cara in descHightlights" :key='cara.name'> 
+    <ul v-show="!editing">
-            <label :for='cara.name'>{{ cara.label }}</label>
+        <li v-for="cara in monthDesc" :key='cara.name'> 
+            <label :for='cara.name'>{{ cara.desc }}</label>
             <span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
-        </div>
+        </li>
-    </div>
+    </ul>
-    <div id="edit" v-show="editing">
+    <ul v-show="editing">
-        <div v-for="cara in descEditable" :key='cara.name' class="cara"> 
+        <li v-for="cara in monthDesc" :key='cara.name'> 
-            <label :for='cara.name'>{{ cara.label }}</label>
+            <label :for='cara.name'>{{ cara.desc }}</label>
-            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name">
+            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
-        </div>
+        </li>
+    </ul>
   </div>
 </div>
 </template>
@@ -51,8 +53,7 @@ export default {
       },
   computed: {
     ...mapGetters('config', {
-        'descHightlights': 'monthHightlightDesc',
+        'monthDesc': 'monthHightlightDesc',
-        'descEditable': 'descEditable',
     }),
       rawDate: function () {
             return parseISO(this.TheDate, "yyyy-MM", new Date())
@@ -97,7 +98,7 @@ export default {
         margin: 20px;
     }
 
-    #date {
+    .date {
         font-size: 1em;
         font-weight: bold;
         border-right: 1px solid black;
@@ -106,27 +107,20 @@ export default {
         font-size: 2em;
     }
 
-    #display {
+    ul {
         list-style-type: none;
         padding: 0;
         display: flex;
         flex-flow: row wrap;
-        align-items: center;
-        justify-content: space-around;
     }
-    #display > * {
+    li {
         margin: 3px;
-        width: 80px;
+        width: 30%;
         display: flex;
         flex-direction: column-reverse;
     }
-    label{
-        text-align: right;
-        font-size: 0.8em;
-    }
     .value {
         font-size: 1.5em;
-        text-align: right;
         font-weight: bold;
     }
 
@@ -139,8 +133,4 @@ export default {
         font-size: 0.8em;
         width: auto;
     }
-    .cara {
-        display: flex;
-        flex-direction: column-reverse;
-    }
 </style>

src/components/caOnPeriod.vue

@@ -1,22 +1,41 @@
 <template>
 <div class="hightlights"> 
-    <hightlight-sum :months="months" attribute="ca"/>
+    <div class="hightlight boxed">
-    <hightlight-sum :months="months" attribute="remuneration"/>
+        <ul>
-    <hightlight-sum :months="months" attribute="caPersoUntouch"/>
+            <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>
 </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 {}
@@ -25,6 +44,11 @@ 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,22 +1,39 @@
 <template>
 <div class="hightlights"> 
-    <hightlight-sum :months="months" attribute="caTheo"/>
+    <div class="hightlight boxed">
-    <hightlight-sum :months="months" attribute="retro"/>
+        <ul>
-    <hightlight-sum :months="months" attribute="notInvoiced"/>
+            <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>
 </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 {}
@@ -25,6 +42,9 @@ 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

@@ -1,52 +0,0 @@
-<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

@@ -1,13 +1,6 @@
 import path from 'path'
 import Papa from 'papaparse'
 import { writeFile } from 'fs'
-import {
-    ca,
-    notInvoiced,
-    caPro,
-    caPerso,
-    caPersoUntouch,
-} from '../../lib/months.js'
 
 const config = {
     namespaced: true,
@@ -17,132 +10,78 @@ const config = {
             userDir: './userDir/',
             dataFile: 'datas.csv',
             caProPercentage: 0.5,
-            descAll : [ 
+            monthDesc : [ 
                 {
-                    name: 'caTheo',
                     color: '',
-                    label: 'CA "scéances effectuées"',
+                    desc: 'CA "scéances effectuées"',
-                    type: 'editable',
+                    type: 'base',
+                    name: 'caTheo',
                     unit: '€',
-                    hightlight: false,
+                    hightlight: true,
                     output: month => month.caTheo,
                 },
                 {
-                    name: 'caRetro',
                     color: '',
-                    label: 'CA "Séances facturées"',
+                    desc: 'CA "Séances facturées"',
-                    type: 'editable',
+                    type: 'base',
+                    name: 'caRetro',
                     unit: '€',
                     hightlight: false,
                     output: month => month.caRetro,
                 },
                 {
-                    name: 'caReact', 
                     color: '',
-                    label: 'CA "Séances facturées" réactualisé',
+                    desc: 'CA "Séances facturées" réactualisé',
-                    type: 'editable',
+                    type: 'base',
+                    name: 'caReact', 
                     unit: '€',
-                    hightlight: false,
+                    hightlight: true,
                     output: month => month.caReact,
                 },
                 {
-                    name: 'sessionQty', 
                     color: '',
-                    label: 'Nombre de séances effectuées',
+                    desc: 'Nombre de séances effectuées',
+                    type: 'base',
+                    name: 'sessionQty', 
                     unit: '',
                     hightlight: false,
                     output: month => month.sessionQty,
                 },
                 {
-                    name: 'retro',
                     color: '',
-                    label: 'Montant de la rétrocession',
+                    desc: 'Montant de la rétrocession',
-                    type: 'editable',
+                    type: 'base',
+                    name: 'retro',
                     unit: '€',
                     hightlight: false,
                     output: month => month.retro,
                 },
                 {
-                    name: 'remuneration', 
                     color: '',
-                    label: 'Rémuneration',
+                    desc: 'Rémuneration',
-                    type: 'editable',
+                    type: 'base',
+                    name: 'remuneration', 
                     unit: '€',
                     hightlight: true,
                     output: month => month.remuneration,
                 },
                 {
-                    name: 'proPercentage', 
                     color: '',
-                    label: 'Pourcentage du CA pour la partie pro',
+                    desc: 'Pourcentage du CA pour la partie pro',
-                    type: 'editable',
+                    type: 'base',
+                    name: 'proPercentage', 
                     unit: '%',
                     hightlight: false,
                     output: month => month.proPercentage,
                 },
-                {
-                    name: 'ca', 
-                    color: '',
-                    label: 'CA',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: true,
-                    output: month => ca(month),
-                },
-                {
-                    name: 'notInvoiced', 
-                    color: '',
-                    label: 'Non facturé',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: true,
-                    output: month => notInvoiced(month),
-                },
-                {
-                    name: 'caPro', 
-                    color: '',
-                    label: 'CA pour le partie pro',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => caPro(month),
-                },
-                {
-                    name: 'caPerso', 
-                    color: '',
-                    label: 'CA destiné à la rémuneration',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => caPerso(month),
-                },
-                {
-                    name: 'caPersoUntouch', 
-                    color: '',
-                    label: 'Banque 13e mois',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => caPersoUntouch(month),
-                },
             ],
         }
     },
     getters: {
         userDir (state) { return state.userDir },
         dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
-        descAll (state) { 
+        monthDesc (state) { return state.monthDesc },
-            // All description of attributes for months
+        monthHightlightDesc (state) { return state.monthDesc.filter(a => a.hightlight) },
-            return state.descAll 
-        },
-        descEditable (state) { 
-            // All description of attributes for months
-            return state.descAll.filter(d => d.type == 'editable')
-        },
-        descOf: (state) => (desc) => {
-            return state.descAll.filter(d => d.name == desc)[0]
-        },
-        monthHightlightDesc (state) { return state.descAll.filter(a => a.hightlight) },
         caProPercentage (state) { return state.caProPercentage },
     },
     mutations: {