Dev: installation de vls

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "date-fns": "^2.23.0",
+    "vls": "^0.7.4",
     "vue": "^3.0.0",
     "vue-router": "^4.0.8",
     "vuex": "^4.0.2"

src/components/CreateMonth.vue

@@ -27,8 +27,8 @@
                 <input type="number" v-model="monthCopy.retro" id="retro" class="value" >
             </li>
             <li> 
-                <label for="remumeration">Rémunération effectuée</label>
+                <label for="remuneration">Rémunération effectuée</label>
-                <input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value">
+                <input type="number" v-model="monthCopy.remuneration" id="remuneration" class="value">
             </li>
         </ul>
       </div>

src/components/MonthPresentation.vue

@@ -6,17 +6,17 @@
   <div id="display">
     <ul>
         <li> 
-            <label for="ca-theo">CA théorique</label>
+            <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="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
         </li>
         <li> 
-            <label for="ca-retro">CA rétrocession</label>
+            <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="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
         </li>
         <li> 
-            <label for="ca-react">CA réactualisé</label>
+            <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="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
         </li>
@@ -31,9 +31,9 @@
             <input type="number" v-model="monthCopy.retro" id="retro" class="value" v-show="editing">
         </li>
         <li> 
-            <label for="remumeration">Rémunération effectuée</label>
+            <label for="remuneration">Rémunération </label>
-            <span class="value" v-show="!editing">{{ TheMonth.remumeration ?? "∅"}}€</span>
+            <span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
-            <input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value" v-show="editing">
+            <input type="number" v-model="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
         </li>
     </ul>
   </div>

src/components/hightlights.vue

@@ -0,0 +1,80 @@
+<template>
+<div id="hightlights"> 
+    <div class="hightlight">
+        <ul>
+            <li>{{ ca }}</li>
+            <li>CA</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caMean }}</li>
+            <li>CA moyen</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caTheo }}</li>
+            <li>CA des séances effectuées</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caTheo - ca }}</li>
+            <li>Non facturé</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remuneration }}</li>
+            <li>Rémunération</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remunerationMean }}</li>
+            <li>Rémunération moyenne</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocession }}</li>
+            <li>Rétrocession</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocessionMean }}</li>
+            <li>Rétrocession moyenne</li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'Hightlights',
+    components: {
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('travail', {
+            ca: "ca",
+            caMean: "caMean",
+            caTheo: "caTheo",
+            remuneration: "remuneration",
+            remunerationMean: "remunerationMean",
+            retrocession: "retrocession",
+            retrocessionMean: "retrocessionMean",
+        })
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+</style>

src/store/travail/index.js

@@ -1,3 +1,11 @@
+function monthCA(month) {
+    if (month.ca_react) {
+        return month.ca_react
+    } else {
+        return month.ca_retro
+    }
+}
+
 const travail = {
     namespaced: true,
     state() {
@@ -8,7 +16,7 @@ const travail = {
                 ca_retro: null, // ca au moment de la rétrocession
                 ca_react: null, // ca réactualisé
                 retro: 0, // montant de la rétrocession
-                remumeration: 0, // rémunération décidée
+                remuneration: 0, // rémunération décidée
             },
             months: {
                 "2021-01": {
@@ -17,7 +25,7 @@ const travail = {
                     ca_retro: 6747, // ca au moment de la rétrocession
                     ca_react: null, // ca réactualisé
                     retro: 893, // montant de la rétrocession
-                    remumeration: 2000, // rémunération décidée
+                    remuneration: 2000, // rémunération décidée
                 },
                 "2021-02": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
@@ -25,7 +33,7 @@ const travail = {
                     ca_retro: 5183, // ca au moment de la rétrocession
                     ca_react: null, // ca réactualisé
                     retro: 665, // montant de la rétrocession
-                    remumeration: 1500, // rémunération décidée
+                    remuneration: 1500, // rémunération décidée
                 },
                 "2021-03": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
@@ -33,7 +41,7 @@ const travail = {
                     ca_retro: 7088, // ca au moment de la rétrocession
                     ca_react: null, // ca réactualisé
                     retro: 855, // montant de la rétrocession
-                    remumeration: 2000, // rémunération décidée
+                    remuneration: 2000, // rémunération décidée
                 },
                 "2021-04": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
@@ -41,7 +49,7 @@ const travail = {
                     ca_retro: 4194, // ca au moment de la rétrocession
                     ca_react: 5630, // ca réactualisé
                     retro: 627, // montant de la rétrocession
-                    remumeration: 2000, // rémunération décidée
+                    remuneration: 2000, // rémunération décidée
                 },
                 "2021-05": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
@@ -49,7 +57,7 @@ const travail = {
                     ca_retro: 5564, // ca au moment de la rétrocession
                     ca_react: 6335, // ca réactualisé
                     retro: 699, // montant de la rétrocession
-                    remumeration: 2800, // rémunération décidée
+                    remuneration: 2800, // rémunération décidée
                 },
                 "2021-06": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
@@ -57,7 +65,7 @@ const travail = {
                     ca_retro: 5442, // ca au moment de la rétrocession
                     ca_react: 6335, // ca réactualisé
                     retro: 638, // montant de la rétrocession
-                    remumeration: 2800, // rémunération décidée
+                    remuneration: 2800, // rémunération décidée
                 },
             },
             range: {
@@ -67,7 +75,6 @@ const travail = {
         }
     },
     getters: {
-        Count (state) {return state.months.length},
         TheEmptyMonth(state) { return { ...state.empty } },
         Range(state) { return state.range },
         MonthsDate(state) {
@@ -78,9 +85,77 @@ const travail = {
             // Get all the months
             return Object.keys(state.months).sort().reverse()
         },
+        months: (state, getters) => {
+            // Get in range months
+            return Object.keys(state.months)
+                .filter(a => getters.MonthsDate.includes(a))
+                .reduce((acc, v) => {
+                    acc[v] = state.months[v];
+                    return acc;
+                }, {})
+        },
         getMonth: (state) => (date) => {
             return state.months[date]
         },
+        count: (state, getters) => { 
+            // Amount of mounts
+            return Object.keys(getters.months).length 
+        },
+        ca: (state) => {
+            // Total CA (ca_react if sets, ca_retro otherwise)
+            return Object.values(state.months).map(a => monthCA(a)).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        caMean: (state, getters) => {
+            // Mean of CA
+            return Math.floor(Object.values(state.months).map(a => monthCA(a)).reduce(
+                (acc, v) => acc + v,
+                0
+            ) / getters.count)
+        },
+        caTheo: (state) => {
+            // Total theorical CA
+            return Object.values(state.months).map(a => a.ca_theo).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remuneration: (state) => {
+            // Total remuneration
+            return Object.values(state.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remunerationMean: (state, getters) => {
+            // Mean of remuneration
+            return Math.floor(Object.values(state.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            ) / getters.count)
+        },
+        retrocession: (state) => {
+            // Total retrocession
+            return Object.values(state.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                )
+        },
+        retrocessionMean: (state, getters) => {
+            // Mean of retrocession
+            return Math.floor(
+                Object.values(state.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                ) / getters.count
+            )
+        },
     },
     mutations: {
         updateMonth(state, { date, month }) {

src/views/home.vue

@@ -12,8 +12,7 @@
     </section>
     <section id="stats">
         <h2>Résumé</h2>
-            
+        <highlights></highlights> 
-        
     </section>
 </div>
 </template>
@@ -23,12 +22,14 @@ import { mapGetters, mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
 import MonthSelector from '../components/monthSelector.vue'
+import Highlights from '../components/hightlights.vue'
 export default {
     name: 'home',
     components: {
         MonthsList: MonthsList,
         CreateMonth: CreateMonth,
         MonthSelector: MonthSelector,
+        highlights: Highlights,
         },
     data () {
         return {}