Feat: computed attributes for months

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 monthDesc" :key='cara.name'> 
-    </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 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 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>
+        </div>
-    </ul>
+    </div>
-  </div>
 </div>
 </template>
 
@@ -98,7 +96,7 @@ export default {
         margin: 20px;
     }
 
-    .date {
+    #date {
         font-size: 1em;
         font-weight: bold;
         border-right: 1px solid black;
@@ -107,18 +105,24 @@ 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;
         font-weight: bold;
@@ -133,4 +137,5 @@ export default {
         font-size: 0.8em;
         width: auto;
     }
+
 </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,
@@ -12,68 +19,112 @@ const config = {
             caProPercentage: 0.5,
             monthDesc : [ 
                 {
+                    name: 'caTheo',
                     color: '',
                     desc: 'CA "scéances effectuées"',
                     type: 'base',
-                    name: 'caTheo',
                     unit: '€',
-                    hightlight: true,
+                    hightlight: false,
                     output: month => month.caTheo,
                 },
                 {
+                    name: 'caRetro',
                     color: '',
                     desc: 'CA "Séances facturées"',
                     type: 'base',
-                    name: 'caRetro',
                     unit: '€',
                     hightlight: false,
                     output: month => month.caRetro,
                 },
                 {
+                    name: 'caReact', 
                     color: '',
                     desc: 'CA "Séances facturées" réactualisé',
                     type: 'base',
-                    name: 'caReact', 
                     unit: '€',
-                    hightlight: true,
+                    hightlight: false,
                     output: month => month.caReact,
                 },
                 {
+                    name: 'sessionQty', 
                     color: '',
                     desc: 'Nombre de séances effectuées',
-                    type: 'base',
-                    name: 'sessionQty', 
                     unit: '',
                     hightlight: false,
                     output: month => month.sessionQty,
                 },
                 {
+                    name: 'retro',
                     color: '',
                     desc: 'Montant de la rétrocession',
                     type: 'base',
-                    name: 'retro',
                     unit: '€',
                     hightlight: false,
                     output: month => month.retro,
                 },
                 {
+                    name: 'remuneration', 
                     color: '',
                     desc: 'Rémuneration',
                     type: 'base',
-                    name: 'remuneration', 
                     unit: '€',
                     hightlight: true,
                     output: month => month.remuneration,
                 },
                 {
+                    name: 'proPercentage', 
                     color: '',
                     desc: 'Pourcentage du CA pour la partie pro',
                     type: 'base',
-                    name: 'proPercentage', 
                     unit: '%',
                     hightlight: false,
                     output: month => month.proPercentage,
                 },
+                {
+                    name: 'ca', 
+                    color: '',
+                    desc: 'ca',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: true,
+                    output: month => ca(month),
+                },
+                {
+                    name: 'notInvoiced', 
+                    color: '',
+                    desc: 'Non facturé',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: true,
+                    output: month => notInvoiced(month),
+                },
+                {
+                    name: 'caPro', 
+                    color: '',
+                    desc: 'CA pour le partie pro',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => caPro(month),
+                },
+                {
+                    name: 'caPerso', 
+                    color: '',
+                    desc: 'CA destiné à la rémuneration',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => caPerso(month),
+                },
+                {
+                    name: 'caPersoUntouch', 
+                    color: '',
+                    desc: 'CA destiné à la rémuneration non reversé',
+                    type: 'compute',
+                    unit: '€',
+                    hightlight: false,
+                    output: month => caPersoUntouch(month),
+                },
             ],
         }
     },