Feat: hightlight for month presentation

src/components/CreateMonth.vue

@@ -1,53 +1,36 @@
 <template>
-    <div class="boxed-green month-presentation" id="new-month">
+<div class="toolbar">
+    <button  v-show='!addingMonth' @click='toggleAdding'>
+        Ajouter  {{ formatedDate }}
+    </button>
+</div>
+    <div class="boxed-green month-presentation" id="new-month" v-show='addingMonth'>
       <div class="date">
-          <input type="month" v-model="monthDate">
+        <div class="month">
+            {{ theMonth }} 
+        </div> 
+        <div class="year">
+            {{ theYear }} 
+        </div> 
 
-          <div class="actions">
-              <button class="validate" @click="save"> Valider </button>
-              <button class="cancel" @click="cancel"> Annuler </button>
-          </div>
+        <div class="actions">
+            <button class="validate" @click="save"> Valider </button>
+            <button class="cancel" @click="cancel"> Annuler </button>
+        </div>
       </div>
       <div class="datas">
-        <ul>
-            <li> 
-                <label for="ca-theo">CA théorique</label>
-                <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" >
-            </li>
-            <li> 
-                <label for="ca-retro">CA rétrocession</label>
-                <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" >
-            </li>
-            <li> 
-                <label for="ca-react">CA réactualisé</label>
-                <input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" >
-            </li>
-            <li> 
-                <label for="nbr-seances">Nombre de séances effectuées</label>
-                <input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" >
-            </li>
-            <li> 
-                <label for="retro">Montant de la rétrocession</label>
-                <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" >
-            </li>
-            <li> 
-                <label for="remuneration">Rémunération effectuée</label>
-                <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value">
-            </li>
-        </ul>
+        <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>
       </div>
     </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-const today = new Date();
-function formatDate(date) {
-    var y = ''+date.getFullYear()
-    var m = ''+(date.getMonth()+1)
-    if (m.length < 2) { m = '0'+m}
-    return [y, m].join('-')
-}
+import {  parseISO, addMonths, format } from 'date-fns'
+import frLocal from 'date-fns/locale/fr'
 
 export default {
   name: 'NewMonth',
@@ -57,17 +40,41 @@ export default {
   },
   data () {
       return {
-            monthDate: formatDate(today),
+            monthDate: new Date(),
             monthCopy: Object,
+            addingMonth: false,
           }
   },
   mounted () {
       this.monthCopy = this.theEmptyMonth
   },
+  watch: {
+    lastMonthDate: function () {
+        if (this.lastMonthDate) {
+            this.monthDate = addMonths(parseISO(this.lastMonthDate, "yyyy-MM", new Date()), 1)
+        } else {
+            this.monthDate = new Date()
+        }
+         
+    },
+  },
   computed: {
     ...mapGetters('travail', {
         'theEmptyMonth': 'TheEmptyMonth',
+        'lastMonthDate': 'lastMonthDate',
     }),
+    ...mapGetters('config', {
+        'monthDesc': 'monthDesc',
+    }),
+        formatedDate: function () {
+          return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
+        },
+      theMonth: function () {
+          return format(this.monthDate, "MMM", {locale: frLocal})
+      },
+      theYear: function () {
+          return format(this.monthDate, "YYY", {locale: frLocal})
+      },
   },
   methods: {
     ...mapActions('travail', {
@@ -76,14 +83,19 @@ export default {
     ...mapActions('config', {
         'writeData': 'writeData',
     }),
+    toggleAdding: function () {
+        this.addingMonth = !this.addingMonth
+    },
     save: function () {
         console.log("save")
         console.log(this.monthCopy)
-        this.createMonth({date: this.monthDate, month: this.monthCopy})
+        this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
+        this.toggleAdding()
         this.writeData()
     },
     cancel: function () {
-      this.monthCopy = this.theEmptyMonth
+        this.toggleAdding()
+        this.monthCopy = this.theEmptyMonth
     },
   },
 }
@@ -117,12 +129,13 @@ export default {
     }
     li {
         margin: 3px;
-        width: 30%;
         display: flex;
         flex-direction: column-reverse;
     }
     .value {
-        font-size: 1.5em;
         font-weight: bold;
     }
+    .toolbar {
+        text-align: center;
+    }
 </style>

src/components/MonthPresentation.vue

@@ -14,45 +14,27 @@
       </div>
   </div>
   <div id="display">
-    <ul>
-        <li> 
-            <label for="ca-theo">CA "Séances effectuées"</label>
-            <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.ca_theo"  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.ca_retro ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.ca_retro" 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.ca_react ?? "∅"}}€</span>
-            <input type="number" v-model.number="monthCopy.ca_react" 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.nbr_seances ?? "∅"}}</span>
-            <input type="number" v-model.number="monthCopy.nbr_seances" 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]  ?? "∅"}} {{cara.unit}}</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'
+import frLocal from 'date-fns/locale/fr'
 export default {
   name: 'MonthPresentation',
   props: {
@@ -71,11 +53,14 @@ export default {
         this.monthCopy =  {...this.TheMonth}
       },
   computed: {
+    ...mapGetters('config', {
+        'monthDesc': 'monthHightlightDesc',
+    }),
       rawDate: function () {
             return parseISO(this.TheDate, "yyyy-MM", new Date())
       },
       theMonth: function () {
-          return format(this.rawDate, "MMM", )
+          return format(this.rawDate, "MMM", {locale: frLocal})
       },
       theYear: function () {
           return format(this.rawDate, "YYY", )
@@ -148,6 +133,5 @@ export default {
         padding: 4px;
         font-size: 0.8em;
         width: auto;
-
     }
 </style>

src/components/caOnPeriod.vue

@@ -24,10 +24,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { caTotal,
-    caMean,
-    remuneration,
-    caPersoUntouch 
+import { 
+    ca,
+    caPersoUntouch,
+    sum,
+    mean,
 } from '../lib/months'
 import RevenusChart from '../components/graphs/RevenusChart.vue'
 
@@ -40,16 +41,13 @@ export default {
         return {}
         },
     computed: {
-        ...mapGetters('config', {
-            caProPercentage: 'caProPercentage',
-        }),
         ...mapGetters('travail', {
             months: "months",
         }),
-        ca: function () {return caTotal(this.months).toLocaleString()},
-        caMean: function () {return caMean(this.months).toLocaleString()},
-        remuneration: function () {return remuneration(this.months).toLocaleString()},
-        caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
+        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

@@ -25,9 +25,8 @@
 <script>
 import { mapGetters } from 'vuex'
 import { 
-    caTheo,
+    sum,
     notInvoiced,
-    retrocession,
 } from '../lib/months'
 import RepartitionChart from './graphs/RepartitionChart.vue'
 
@@ -40,16 +39,12 @@ export default {
         return {}
         },
     computed: {
-        ...mapGetters('config', {
-            caProPercentage: 'caProPercentage',
-        }),
         ...mapGetters('travail', {
             months: "months",
         }),
-        caTheo: function () {return caTheo(this.months).toLocaleString()},
-        notInvoiced: function () {return notInvoiced(this.months).toLocaleString()},
-        retrocession: function () {return retrocession(this.months).toLocaleString()},
-
+        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/graphs/RepartitionChart.vue

@@ -10,9 +10,8 @@ import { mapGetters } from 'vuex'
 import { 
     notInvoiced,
     caPro, 
-    remuneration,
-    retrocession,
     caPersoUntouch,
+    sum,
     } from '../../lib/months'
 
 export default {
@@ -43,11 +42,11 @@ export default {
                         {
                             label: "Difference CA perso et remuneration",
                             data: [
-                                caPro(this.months, this.caProPercentage),
-                                notInvoiced(this.months),
-                                retrocession(this.months),
-                                remuneration(this.months),
-                                caPersoUntouch(this.months, this.caProPercentage),
+                                sum(Object.values(this.months).map(a => caPro(a))),
+                                sum(Object.values(this.months).map(a => notInvoiced(a))),
+                                sum(Object.values(this.months).map(a => a.retro)),
+                                sum(Object.values(this.months).map(a => a.remuneration)),
+                                sum(Object.values(this.months).map(a => caPersoUntouch(a))),
                             ],
                         },
                     ],

src/components/graphs/RevenusChart.vue

@@ -7,7 +7,7 @@
 <script>
 import Chart from 'chart.js'
 import { mapGetters } from 'vuex'
-import { monthCA, caPersoUntouch, caPerso, remuneration } from '../../lib/months'
+import { ca, caPersoUntouch, sum } from '../../lib/months'
 
 export default {
     name: 'RevenusChart',
@@ -37,7 +37,7 @@ export default {
                         {
                             type: "bar",
                             label: "Difference CA perso et remuneration",
-                            data: Object.values(this.months).map(a => caPerso({bar: a}, this.caProPercentage) - remuneration({bar:a})),
+                            data: Object.values(this.months).map(a => caPersoUntouch(a)),
                             backgroundColor: "red",
                             borderColor: "light-red",
                             borderWidth: 3
@@ -45,7 +45,7 @@ export default {
                         {
                             type: "bar",
                             label: "CA",
-                            data: Object.values(this.months).map(a => monthCA(a)),
+                            data: Object.values(this.months).map(a => ca(a)),
                             backgroundColor: "rgba(54,73,93,.5)",
                             borderColor: "#36495d",
                             borderWidth: 3
@@ -79,7 +79,9 @@ export default {
         },
         untouchEvo: function () {
             const cumulativeArray = (arr => value => {arr.push(value); return [...arr];})([]);
-            return Object.values(this.months).map(cumulativeArray).map(a => caPersoUntouch(a, this.caProPercentage))
+            return Object.values(this.months)
+                .map(cumulativeArray)
+                .map(a => sum(a.map(m => caPersoUntouch(m))))
         },
     },
     methods: {

src/lib/months.js

@@ -1,83 +1,44 @@
-
-export function monthCA(month) {
+// Function on a month
+export function ca(month) {
     // Extract the CA of the month
-    if (month.ca_react) {
-        return month.ca_react
+    if (month.caReact) {
+        return month.caReact
     } else {
-        return month.ca_retro
+        return month.caRetro
     }
 }
 
-export function count (months) {
-    // Count how many months there are
-    return Object.keys(months).length
+export function notInvoiced (month) {
+    // Compute how much has not been invoiced
+    return month.caTheo - ca(month)
 }
 
-export function caTotal (months) {
-    // Total CA (ca_react if sets, ca_retro otherwise)
-    return Object.values(months).map(a => monthCA(a)).reduce(
-        (acc, v) => acc + v
-        ,0
-    )
+export function caPro (month) {
+    // Compute the part of the CA to go pro usage
+    return ca(month) * month.proPercentage / 100
 }
 
-export function caMean (months) {
-    // Mean of CA
-    return Math.floor(caTotal(months) / count(months))
+export function caPerso (month) {
+    // Compute the part of the CA to go personnal usage
+    return ca(month) * (1 - month.proPercentage / 100)
 }
 
-export function caTheo (months) {
-    // Total theorical CA
-    return Object.values(months).map(a => a.ca_theo).reduce(
-        (acc, v) => acc + v,
-        0
-    )
+export function caPersoUntouch (month) {
+    // Compute the part of the CA to go personnal usage
+    return caPerso(month) - month.remuneration
 }
 
-export function notInvoiced (months) {
-    // Total of not invoiced sessions 
-    return caTheo(months) - caTotal(months)
+
+// Function on an array of month
+
+
+export function sum (array) {
+    // sum the array
+    return array.reduce((acc, v)=> acc + v, 0)
 }
 
-export function remuneration (months) {
-    // Total remuneration
-    return Object.values(months).map(a => a.remuneration).reduce(
-        (acc, v) => acc + v,
-        0
-    )
+export function mean(array) {
+    console.log(array)
+    return Math.floor(array.reduce((acc, v)=> acc + v, 0) / array.length)
 }
 
-export function remunerationMean (months) {
-    // Mean of remuneration
-    return Math.floor(remuneration(months) / count(months))
-}
-
-export function retrocession (months) {
-    // Total retrocession
-    return Object.values(months)
-        .map(a => a.retro)
-        .reduce(
-            (acc, v) => acc + v,
-            0
-        )
-}
-
-export function retrocessionMean (months) {
-    // Mean of retrocession
-    return Math.floor(retrocession(months) / count(months))
-}
-
-export function caPro (months, keepPercent) {
-    // Part of the CA to keep for professional use
-    return caTotal(months) * keepPercent
-}
-
-export function caPerso (months, keepPercent) {
-    // Part of the CA to keep for personal use
-    return caTotal(months) - caPro(months, keepPercent)
-}
-
-export function caPersoUntouch (months, keepPercent) {
-    // Part of the personnal use CA that haven't been use
-    return caPerso(months, keepPercent) - remuneration(months)
-}

src/store/config/index.js

@@ -10,11 +10,71 @@ const config = {
             userDir: './userDir/',
             dataFile: 'datas.csv',
             caProPercentage: 0.5,
+            monthDesc : [ 
+                {
+                    color: '',
+                    desc: 'CA "scéances effectuées"',
+                    type: 'base',
+                    name: 'caTheo',
+                    unit: '€',
+                    hightlight: true,
+                },
+                {
+                    color: '',
+                    desc: 'CA "Séances facturées"',
+                    type: 'base',
+                    name: 'caRetro',
+                    unit: '€',
+                    hightlight: false,
+                },
+                {
+                    color: '',
+                    desc: 'CA "Séances facturées" réactualisé',
+                    type: 'base',
+                    name: 'caReact', 
+                    unit: '€',
+                    hightlight: true,
+                },
+                {
+                    color: '',
+                    desc: 'Nombre de séances effectuées',
+                    type: 'base',
+                    name: 'sessionQty', 
+                    unit: '',
+                    hightlight: false,
+                },
+                {
+                    color: '',
+                    desc: 'Montant de la rétrocession',
+                    type: 'base',
+                    name: 'retro',
+                    unit: '€',
+                    hightlight: false,
+                },
+                {
+                    color: '',
+                    desc: 'Rémuneration',
+                    type: 'base',
+                    name: 'remuneration', 
+                    unit: '€',
+                    hightlight: true,
+                },
+                {
+                    color: '',
+                    desc: 'Pourcentage du CA pour la partie pro',
+                    type: 'base',
+                    name: 'proPercentage', 
+                    unit: '%',
+                    hightlight: false,
+                },
+            ],
         }
     },
     getters: {
         userDir (state) { return state.userDir },
         dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
+        monthDesc (state) { return state.monthDesc },
+        monthHightlightDesc (state) { return state.monthDesc.filter(a => a.hightlight) },
         caProPercentage (state) { return state.caProPercentage },
     },
     mutations: {

src/store/travail/index.js

@@ -7,62 +7,15 @@ const travail = {
     state() {
         return {
             empty: {
-                ca_theo: null, // ca théorique basé sur les séances effectuées
-                nbr_seances: null, // Nombre de séances effectuées sur le mois
-                ca_retro: null, // ca au moment de la rétrocession
-                ca_react: null, // ca réactualisé
+                caTheo: null, // ca théorique basé sur les séances effectuées
+                sessionQty: null, // Nombre de séances effectuées sur le mois
+                caRetro: null, // ca au moment de la rétrocession
+                caReact: null, // ca réactualisé
                 retro: 0, // montant de la rétrocession
                 remuneration: 0, // rémunération décidée
+                proPercentage: 50, // Pourcentage du CA pour la partie pro
             },
             months: {
-                // "2021-01": {
-                //     ca_theo: null, // ca théorique basé sur les séances effectuées
-                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
-                //     ca_retro: 6747, // ca au moment de la rétrocession
-                //     ca_react: null, // ca réactualisé
-                //     retro: 893, // montant de la rétrocession
-                //     remuneration: 2000, // rémunération décidée
-                // },
-                // "2021-02": {
-                //     ca_theo: null, // ca théorique basé sur les séances effectuées
-                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
-                //     ca_retro: 5183, // ca au moment de la rétrocession
-                //     ca_react: null, // ca réactualisé
-                //     retro: 665, // montant de la rétrocession
-                //     remuneration: 1500, // rémunération décidée
-                // },
-                // "2021-03": {
-                //     ca_theo: null, // ca théorique basé sur les séances effectuées
-                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
-                //     ca_retro: 7088, // ca au moment de la rétrocession
-                //     ca_react: null, // ca réactualisé
-                //     retro: 855, // montant de la rétrocession
-                //     remuneration: 2000, // rémunération décidée
-                // },
-                // "2021-04": {
-                //     ca_theo: null, // ca théorique basé sur les séances effectuées
-                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
-                //     ca_retro: 4194, // ca au moment de la rétrocession
-                //     ca_react: 5630, // ca réactualisé
-                //     retro: 627, // montant de la rétrocession
-                //     remuneration: 2000, // rémunération décidée
-                // },
-                // "2021-05": {
-                //     ca_theo: null, // ca théorique basé sur les séances effectuées
-                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
-                //     ca_retro: 5564, // ca au moment de la rétrocession
-                //     ca_react: 6335, // ca réactualisé
-                //     retro: 699, // montant de la rétrocession
-                //     remuneration: 2800, // rémunération décidée
-                // },
-                // "2021-06": {
-                //     ca_theo: null, // ca théorique basé sur les séances effectuées
-                //     nbr_seances: null, // Nombre de séances effectuées sur le mois
-                //     ca_retro: 5442, // ca au moment de la rétrocession
-                //     ca_react: 6335, // ca réactualisé
-                //     retro: 638, // montant de la rétrocession
-                //     remuneration: 2800, // rémunération décidée
-                // },
             },
             range: {
                 start: "2021-01",
@@ -81,6 +34,10 @@ const travail = {
             // Get all the months
             return Object.keys(state.months).sort().reverse()
         },
+        lastMonthDate(state) {
+            // Return the date of the last registered month
+            return Object.keys(state.months).sort().reverse()[0]
+        },
         months: (state, getters) => {
             // Get in range months
             const a = Object.keys(state.months)

src/style.css

@@ -3,7 +3,7 @@ body {
 }
 
 button {
-    color: white;
+    color: black;
     padding: 4px;
     box-shadow: 1px 1px 2px gray;
     text-align: center;
@@ -17,6 +17,8 @@ button {
 }
 
 button:hover {
+    background-color: black;
+    color: white;
     transition: all 0.2s ease-out;
 }
 

userDir/datas.csv

@@ -1,8 +1,8 @@
-ca_theo,nbr_seances,ca_retro,ca_react,retro,remuneration,date
-7000,,6747,,893,2000,2021-01
-5200,,5183,,665,1500,2021-02
-7100,,7088,,855,2000,2021-03
-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
+caTheo,sessionQty,caRetro,caReact,retro,remuneration,date,proPercentage
+7000,,6747,,893,2000,2021-01,50
+5200,,5183,,665,1500,2021-02,50
+7100,,7088,,855,2000,2021-03,50
+5700,,4194,5630,627,2000,2021-04,50
+6500,,5564,6335,699,2800,2021-05,50
+6725,235,5442,6376,638,2800,2021-06,50
+2176,81,1274,,172,2000,2021-07,50