Feat: use store/config to display attributs of months

src/components/MonthPresentation.vue

@@ -14,44 +14,25 @@
       </div>
   </div>
   <div id="display">
-    <ul>
-        <li> 
-            <label for="ca-theo">CA "Séances effectuées"</label>
-            <span class="value" v-show="!editing">{{ TheMonth.caTheo ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.caTheo"  id="ca-theo" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="ca-retro">CA "Séances facturées"</label>
-            <span class="value" v-show="!editing">{{ TheMonth.caRetro ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.caRetro" id="ca-retro" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="ca-react">CA "Séances facturées" réactualisé</label>
-            <span class="value" v-show="!editing">{{ TheMonth.caReact ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.caReact" id="ca-react" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="nbr-seances">Nombre de séances effectuées</label>
-            <span class="value" v-show="!editing">{{ TheMonth.sessionQty ?? "∅"}}</span>
-            <input type="number" v-model.number="monthCopy.sessionQty" id="nbr-seances" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="retro">Montant de la rétrocession</label>
-            <span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" v-show="editing">
-        </li>
-        <li> 
-            <label for="remuneration">Rémunération </label>
-            <span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
+    <ul v-show="!editing">
+        <li v-for="cara in monthDesc" :key='cara.name'> 
+            <label :for='cara.name'>{{ cara.desc }}</label>
+            <span class="value" >{{ TheMonth.[cara.name] ?? "∅"}}€</span>
         </li>
     </ul>
+    <ul v-show="editing">
+        <li v-for="cara in monthDesc" :key='cara.name'> 
+            <label :for='cara.name'>{{ cara.desc }}</label>
+            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
+        </li>
+    </ul>
+
   </div>
 </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import {  parseISO, format } from 'date-fns'
 export default {
   name: 'MonthPresentation',
@@ -71,6 +52,9 @@ export default {
         this.monthCopy =  {...this.TheMonth}
       },
   computed: {
+    ...mapGetters('config', {
+        'monthDesc': 'monthDesc',
+    }),
       rawDate: function () {
             return parseISO(this.TheDate, "yyyy-MM", new Date())
       },

src/store/config/index.js

@@ -10,43 +10,50 @@ const config = {
             userDir: './userDir/',
             dataFile: 'datas.csv',
             caProPercentage: 0.5,
-            monthDesc : {
-                caTheo: {
+            monthDesc : [ 
+                {
                     color: '',
                     desc: 'CA "scéances effectuées"',
                     type: 'base',
+                    name: 'caTheo',
                 },
-                caRetro: {
+                {
                     color: '',
                     desc: 'CA "Séances facturées"',
                     type: 'base',
+                    name: 'caRetro',
                 },
-                caReact: {
+                {
                     color: '',
                     desc: 'CA "Séances facturées" réactualisé',
                     type: 'base',
+                    name: 'caReact', 
                 },
-                sessionQty: {
+                {
                     color: '',
                     desc: 'Nombre de séances effectuées',
                     type: 'base',
+                    name: 'sessionQty', 
                 },
-                retro: {
+                {
                     color: '',
                     desc: 'Montant de la rétrocession',
                     type: 'base',
+                    name: 'retro',
                 },
-                remu: {
+                {
                     color: '',
                     desc: 'Rémuneration',
                     type: 'base',
+                    name: 'remu', 
                 },
-            },
+            ],
         }
     },
     getters: {
         userDir (state) { return state.userDir },
         dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
+        monthDesc (state) { return state.monthDesc },
         caProPercentage (state) { return state.caProPercentage },
     },
     mutations: {

userDir/datas.csv

@@ -5,4 +5,4 @@ caTheo,sessionQty,caRetro,caReact,retro,remuneration,date
 5700,,4194,5630,627,2000,2021-04
 6500,,5564,6335,699,2800,2021-05
 6725,235,5442,6376,638,2800,2021-06
-2176,81,1274,,172,2000,2021-07
+2176,81,1274,,172,2000,2021-07