src/components/CreateMonth.vue

@@ -1,17 +1,7 @@
 <template>
-<div class="toolbar">
+    <div class="boxed-green month-presentation" id="new-month">
-    <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">
-        <div class="month">
+          <input type="month" v-model="monthDate">
-            {{ theMonth }} 
-        </div> 
-        <div class="year">
-            {{ theYear }} 
-        </div> 
 
           <div class="actions">
               <button class="validate" @click="save"> Valider </button>
@@ -19,18 +9,45 @@
           </div>
       </div>
       <div class="datas">
-        <li v-for="cara in monthDesc" :key='cara.name'> 
+        <ul>
-            <label :for='cara.name'>{{ cara.desc }}</label>
+            <li> 
-            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
+                <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>
       </div>
     </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import {  parseISO, addMonths, format } from 'date-fns'
+const today = new Date();
-import frLocal from 'date-fns/locale/fr'
+function formatDate(date) {
+    var y = ''+date.getFullYear()
+    var m = ''+(date.getMonth()+1)
+    if (m.length < 2) { m = '0'+m}
+    return [y, m].join('-')
+}
 
 export default {
   name: 'NewMonth',
@@ -40,41 +57,17 @@ export default {
   },
   data () {
       return {
-            monthDate: new Date(),
+            monthDate: formatDate(today),
             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', {
@@ -83,18 +76,13 @@ export default {
     ...mapActions('config', {
         'writeData': 'writeData',
     }),
-    toggleAdding: function () {
-        this.addingMonth = !this.addingMonth
-    },
     save: function () {
         console.log("save")
         console.log(this.monthCopy)
-        this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
+        this.createMonth({date: this.monthDate, month: this.monthCopy})
-        this.toggleAdding()
         this.writeData()
     },
     cancel: function () {
-        this.toggleAdding()
       this.monthCopy = this.theEmptyMonth
     },
   },
@@ -129,13 +117,12 @@ 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,27 +14,45 @@
       </div>
   </div>
   <div id="display">
-    <ul v-show="!editing">
+    <ul>
-        <li v-for="cara in monthDesc" :key='cara.name'> 
+        <li> 
-            <label :for='cara.name'>{{ cara.desc }}</label>
+            <label for="ca-theo">CA "Séances effectuées"</label>
-            <span class="value" >{{ TheMonth.[cara.name]  ?? "∅"}} {{cara.unit}}</span>
+            <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">
         </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, mapGetters } from 'vuex'
+import { mapActions } from 'vuex'
 import {  parseISO, format } from 'date-fns'
-import frLocal from 'date-fns/locale/fr'
 export default {
   name: 'MonthPresentation',
   props: {
@@ -53,14 +71,11 @@ 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", {locale: frLocal})
+          return format(this.rawDate, "MMM", )
       },
       theYear: function () {
           return format(this.rawDate, "YYY", )
@@ -133,5 +148,6 @@ export default {
         padding: 4px;
         font-size: 0.8em;
         width: auto;
+
     }
 </style>

src/components/caOnPeriod.vue

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

src/components/caRepartition.vue

@@ -25,8 +25,9 @@
 <script>
 import { mapGetters } from 'vuex'
 import { 
-    sum,
+    caTheo,
     notInvoiced,
+    retrocession,
 } from '../lib/months'
 import RepartitionChart from './graphs/RepartitionChart.vue'
 
@@ -39,12 +40,16 @@ export default {
         return {}
         },
     computed: {
+        ...mapGetters('config', {
+            caProPercentage: 'caProPercentage',
+        }),
         ...mapGetters('travail', {
             months: "months",
         }),
-        caTheo: function () {return sum(Object.values(this.months).map(a => a.caTheo)).toLocaleString()},
+        caTheo: function () {return caTheo(this.months).toLocaleString()},
-        retrocession: function () {return sum(Object.values(this.months).map(a => a.retro)).toLocaleString()},
+        notInvoiced: function () {return notInvoiced(this.months).toLocaleString()},
-        notInvoiced: function () {return sum(Object.values(this.months).map(a => notInvoiced(a))).toLocaleString()},
+        retrocession: function () {return retrocession(this.months).toLocaleString()},
+
       },
       mounted () {
       },

src/components/graphs/RepartitionChart.vue

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

src/components/graphs/RevenusChart.vue

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

src/lib/months.js

@@ -1,44 +1,83 @@
-// Function on a month
+
-export function ca(month) {
+export function monthCA(month) {
     // Extract the CA of the month
-    if (month.caReact) {
+    if (month.ca_react) {
-        return month.caReact
+        return month.ca_react
     } else {
-        return month.caRetro
+        return month.ca_retro
     }
 }
 
-export function notInvoiced (month) {
+export function count (months) {
-    // Compute how much has not been invoiced
+    // Count how many months there are
-    return month.caTheo - ca(month)
+    return Object.keys(months).length
 }
 
-export function caPro (month) {
+export function caTotal (months) {
-    // Compute the part of the CA to go pro usage
+    // Total CA (ca_react if sets, ca_retro otherwise)
-    return ca(month) * month.proPercentage / 100
+    return Object.values(months).map(a => monthCA(a)).reduce(
+        (acc, v) => acc + v
+        ,0
+    )
 }
 
-export function caPerso (month) {
+export function caMean (months) {
-    // Compute the part of the CA to go personnal usage
+    // Mean of CA
-    return ca(month) * (1 - month.proPercentage / 100)
+    return Math.floor(caTotal(months) / count(months))
 }
 
-export function caPersoUntouch (month) {
+export function caTheo (months) {
-    // Compute the part of the CA to go personnal usage
+    // Total theorical CA
-    return caPerso(month) - month.remuneration
+    return Object.values(months).map(a => a.ca_theo).reduce(
+        (acc, v) => acc + v,
+        0
+    )
 }
 
-
+export function notInvoiced (months) {
-// Function on an array of month
+    // Total of not invoiced sessions 
-
+    return caTheo(months) - caTotal(months)
-
-export function sum (array) {
-    // sum the array
-    return array.reduce((acc, v)=> acc + v, 0)
 }
 
-export function mean(array) {
+export function remuneration (months) {
-    console.log(array)
+    // Total remuneration
-    return Math.floor(array.reduce((acc, v)=> acc + v, 0) / array.length)
+    return Object.values(months).map(a => a.remuneration).reduce(
+        (acc, v) => acc + v,
+        0
+    )
 }
 
+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,71 +10,11 @@ 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,15 +7,62 @@ const travail = {
     state() {
         return {
             empty: {
-                caTheo: null, // ca théorique basé sur les séances effectuées
+                ca_theo: null, // ca théorique basé sur les séances effectuées
-                sessionQty: null, // Nombre de séances effectuées sur le mois
+                nbr_seances: null, // Nombre de séances effectuées sur le mois
-                caRetro: null, // ca au moment de la rétrocession
+                ca_retro: null, // ca au moment de la rétrocession
-                caReact: null, // ca réactualisé
+                ca_react: 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",
@@ -34,10 +81,6 @@ 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: black;
+    color: white;
     padding: 4px;
     box-shadow: 1px 1px 2px gray;
     text-align: center;
@@ -17,8 +17,6 @@ button {
 }
 
 button:hover {
-    background-color: black;
-    color: white;
     transition: all 0.2s ease-out;
 }
 

userDir/datas.csv

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