Feat: create hightlightSum component

editable

src/components/CreateMonth.vue

@@ -19,8 +19,8 @@
         </div>
       </div>
       <div class="datas">
-        <li v-for="cara in monthDesc" :key='cara.name'> 
+        <li v-for="cara in description" :key='cara.name'> 
-            <label :for='cara.name'>{{ cara.desc }}</label>
+            <label :for='cara.name'>{{ cara.label }}</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', {
-        'monthDesc': 'monthDesc',
+        'description': 'descEditable',
     }),
         formatedDate: function () {
           return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
@@ -132,6 +132,10 @@ 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,32 +1,30 @@
 <template>
 <div class="month-presentation">
-  <div class="date">
+    <div id="date">
-    <div class="month">
+        <div class="month">
-       {{ theMonth }} 
+           {{ theMonth }} 
+        </div> 
+        <div class="year">
+           {{ theYear }} 
+        </div> 
+        <div>
+            <button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
+            <button class="validate" @click="save" v-show="editing"> Valider </button>
+            <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
+        </div>
     </div>
-    <div class="year">
+    <div id="display" v-show="!editing">
-       {{ theYear }} 
+        <div class="hightlight" v-for="cara in descHightlights" :key='cara.name'> 
-    </div> 
+            <label :for='cara.name'>{{ cara.label }}</label>
-      <div>
-        <button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
-        <button class="validate" @click="save" v-show="editing"> Valider </button>
-        <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
-      </div>
-  </div>
-  <div id="display">
-    <ul v-show="!editing">
-        <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>
-        </li>
+        </div>
-    </ul>
+    </div>
-    <ul v-show="editing">
+    <div id="edit" v-show="editing">
-        <li v-for="cara in monthDesc" :key='cara.name'> 
+        <div v-for="cara in descEditable" :key='cara.name' class="cara"> 
-            <label :for='cara.name'>{{ cara.desc }}</label>
+            <label :for='cara.name'>{{ cara.label }}</label>
-            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
+            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name">
-        </li>
+        </div>
-    </ul>
+    </div>
-  </div>
 </div>
 </template>
 
@@ -53,7 +51,8 @@ export default {
       },
   computed: {
     ...mapGetters('config', {
-        'monthDesc': 'monthHightlightDesc',
+        'descHightlights': 'monthHightlightDesc',
+        'descEditable': 'descEditable',
     }),
       rawDate: function () {
             return parseISO(this.TheDate, "yyyy-MM", new Date())
@@ -98,7 +97,7 @@ export default {
         margin: 20px;
     }
 
-    .date {
+    #date {
         font-size: 1em;
         font-weight: bold;
         border-right: 1px solid black;
@@ -107,20 +106,27 @@ export default {
         font-size: 2em;
     }
 
-    ul {
+    #display {
         list-style-type: none;
         padding: 0;
         display: flex;
         flex-flow: row wrap;
+        align-items: center;
+        justify-content: space-around;
     }
-    li {
+    #display > * {
         margin: 3px;
-        width: 30%;
+        width: 80px;
         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;
     }
 
@@ -133,4 +139,8 @@ export default {
         font-size: 0.8em;
         width: auto;
     }
+    .cara {
+        display: flex;
+        flex-direction: column-reverse;
+    }
 </style>

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

@@ -1,6 +1,13 @@
 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,
@@ -10,78 +17,132 @@ const config = {
             userDir: './userDir/',
             dataFile: 'datas.csv',
             caProPercentage: 0.5,
-            monthDesc : [ 
+            descAll : [ 
                 {
-                    color: '',
-                    desc: 'CA "scéances effectuées"',
-                    type: 'base',
                     name: 'caTheo',
+                    color: '',
+                    label: 'CA "scéances effectuées"',
+                    type: 'editable',
                     unit: '€',
-                    hightlight: true,
+                    hightlight: false,
                     output: month => month.caTheo,
                 },
                 {
-                    color: '',
-                    desc: 'CA "Séances facturées"',
-                    type: 'base',
                     name: 'caRetro',
+                    color: '',
+                    label: 'CA "Séances facturées"',
+                    type: 'editable',
                     unit: '€',
                     hightlight: false,
                     output: month => month.caRetro,
                 },
                 {
-                    color: '',
-                    desc: 'CA "Séances facturées" réactualisé',
-                    type: 'base',
                     name: 'caReact', 
+                    color: '',
+                    label: 'CA "Séances facturées" réactualisé',
+                    type: 'editable',
                     unit: '€',
-                    hightlight: true,
+                    hightlight: false,
                     output: month => month.caReact,
                 },
                 {
-                    color: '',
-                    desc: 'Nombre de séances effectuées',
-                    type: 'base',
                     name: 'sessionQty', 
+                    color: '',
+                    label: 'Nombre de séances effectuées',
                     unit: '',
                     hightlight: false,
                     output: month => month.sessionQty,
                 },
                 {
-                    color: '',
-                    desc: 'Montant de la rétrocession',
-                    type: 'base',
                     name: 'retro',
+                    color: '',
+                    label: 'Montant de la rétrocession',
+                    type: 'editable',
                     unit: '€',
                     hightlight: false,
                     output: month => month.retro,
                 },
                 {
-                    color: '',
-                    desc: 'Rémuneration',
-                    type: 'base',
                     name: 'remuneration', 
+                    color: '',
+                    label: 'Rémuneration',
+                    type: 'editable',
                     unit: '€',
                     hightlight: true,
                     output: month => month.remuneration,
                 },
                 {
-                    color: '',
-                    desc: 'Pourcentage du CA pour la partie pro',
-                    type: 'base',
                     name: 'proPercentage', 
+                    color: '',
+                    label: 'Pourcentage du CA pour la partie pro',
+                    type: 'editable',
                     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) },
-        monthDesc (state) { return state.monthDesc },
+        descAll (state) { 
-        monthHightlightDesc (state) { return state.monthDesc.filter(a => a.hightlight) },
+            // All description of attributes for months
+            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: {