Feat: change type base to editable and add getters for hightlights and

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

@@ -14,15 +14,15 @@
         </div>
     </div>
     <div id="display" v-show="!editing">
-        <div class="hightlight" v-for="cara in monthDesc" :key='cara.name'> 
+        <div class="hightlight" v-for="cara in descHightlights" :key='cara.name'> 
-            <label :for='cara.name'>{{ cara.desc }}</label>
+            <label :for='cara.name'>{{ cara.label }}</label>
             <span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
         </div>
     </div>
     <div id="edit" v-show="editing">
-        <div 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">
         </div>
     </div>
 </div>
@@ -51,7 +51,8 @@ export default {
       },
   computed: {
     ...mapGetters('config', {
-        'monthDesc': 'monthHightlightDesc',
+        'descHightlights': 'monthHightlightDesc',
+        'descEditable': 'descEditable',
     }),
       rawDate: function () {
             return parseISO(this.TheDate, "yyyy-MM", new Date())
@@ -125,6 +126,7 @@ export default {
     }
     .value {
         font-size: 1.5em;
+        text-align: right;
         font-weight: bold;
     }
 
@@ -137,5 +139,8 @@ export default {
         font-size: 0.8em;
         width: auto;
     }
-
+    .cara {
+        display: flex;
+        flex-direction: column-reverse;
+    }
 </style>

src/store/config/index.js

@@ -17,12 +17,12 @@ const config = {
             userDir: './userDir/',
             dataFile: 'datas.csv',
             caProPercentage: 0.5,
-            monthDesc : [ 
+            descAll : [ 
                 {
                     name: 'caTheo',
                     color: '',
-                    desc: 'CA "scéances effectuées"',
+                    label: 'CA "scéances effectuées"',
-                    type: 'base',
+                    type: 'editable',
                     unit: '€',
                     hightlight: false,
                     output: month => month.caTheo,
@@ -30,8 +30,8 @@ const config = {
                 {
                     name: 'caRetro',
                     color: '',
-                    desc: 'CA "Séances facturées"',
+                    label: 'CA "Séances facturées"',
-                    type: 'base',
+                    type: 'editable',
                     unit: '€',
                     hightlight: false,
                     output: month => month.caRetro,
@@ -39,8 +39,8 @@ const config = {
                 {
                     name: 'caReact', 
                     color: '',
-                    desc: 'CA "Séances facturées" réactualisé',
+                    label: 'CA "Séances facturées" réactualisé',
-                    type: 'base',
+                    type: 'editable',
                     unit: '€',
                     hightlight: false,
                     output: month => month.caReact,
@@ -48,7 +48,7 @@ const config = {
                 {
                     name: 'sessionQty', 
                     color: '',
-                    desc: 'Nombre de séances effectuées',
+                    label: 'Nombre de séances effectuées',
                     unit: '',
                     hightlight: false,
                     output: month => month.sessionQty,
@@ -56,8 +56,8 @@ const config = {
                 {
                     name: 'retro',
                     color: '',
-                    desc: 'Montant de la rétrocession',
+                    label: 'Montant de la rétrocession',
-                    type: 'base',
+                    type: 'editable',
                     unit: '€',
                     hightlight: false,
                     output: month => month.retro,
@@ -65,8 +65,8 @@ const config = {
                 {
                     name: 'remuneration', 
                     color: '',
-                    desc: 'Rémuneration',
+                    label: 'Rémuneration',
-                    type: 'base',
+                    type: 'editable',
                     unit: '€',
                     hightlight: true,
                     output: month => month.remuneration,
@@ -74,8 +74,8 @@ const config = {
                 {
                     name: 'proPercentage', 
                     color: '',
-                    desc: 'Pourcentage du CA pour la partie pro',
+                    label: 'Pourcentage du CA pour la partie pro',
-                    type: 'base',
+                    type: 'editable',
                     unit: '%',
                     hightlight: false,
                     output: month => month.proPercentage,
@@ -83,7 +83,7 @@ const config = {
                 {
                     name: 'ca', 
                     color: '',
-                    desc: 'ca',
+                    label: 'ca',
                     type: 'compute',
                     unit: '€',
                     hightlight: true,
@@ -92,7 +92,7 @@ const config = {
                 {
                     name: 'notInvoiced', 
                     color: '',
-                    desc: 'Non facturé',
+                    label: 'Non facturé',
                     type: 'compute',
                     unit: '€',
                     hightlight: true,
@@ -101,7 +101,7 @@ const config = {
                 {
                     name: 'caPro', 
                     color: '',
-                    desc: 'CA pour le partie pro',
+                    label: 'CA pour le partie pro',
                     type: 'compute',
                     unit: '€',
                     hightlight: false,
@@ -110,7 +110,7 @@ const config = {
                 {
                     name: 'caPerso', 
                     color: '',
-                    desc: 'CA destiné à la rémuneration',
+                    label: 'CA destiné à la rémuneration',
                     type: 'compute',
                     unit: '€',
                     hightlight: false,
@@ -119,7 +119,7 @@ const config = {
                 {
                     name: 'caPersoUntouch', 
                     color: '',
-                    desc: 'CA destiné à la rémuneration non reversé',
+                    label: 'CA destiné à la rémuneration non reversé',
                     type: 'compute',
                     unit: '€',
                     hightlight: false,
@@ -131,8 +131,18 @@ const config = {
     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: {