Start working on csv

jsconfig.json

@@ -1,5 +0,0 @@
-"eslint.validate": [
-  "javascript",
-  "javascriptreact",
-  "vue"
-]

package.json

@@ -13,7 +13,6 @@
   },
   "main": "background.js",
   "dependencies": {
-    "chart.js": "2.9.4",
     "core-js": "^3.6.5",
     "date-fns": "^2.23.0",
     "papaparse": "^5.3.1",

public/user-cog-solid.svg

@@ -1 +0,0 @@
-<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path></svg>

src/App.vue

@@ -1,8 +1,6 @@
 <template>
   <Nav></Nav>
-  <div class="content">
+  <router-view></router-view>
-        <router-view></router-view>
-  </div>
 </template>
 
 <script>
@@ -16,5 +14,4 @@ export default {
 }
 </script>
 
-<style>
+<style></style>
-</style>

src/background.js

@@ -7,78 +7,77 @@ const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
-    { scheme: 'app', privileges: { secure: true, standard: true } }
+  { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
 async function createWindow() {
-    // Create the browser window.
+  // Create the browser window.
-    const win = new BrowserWindow({
+  const win = new BrowserWindow({
-        width: 800,
+    width: 800,
-        height: 600,
+    height: 600,
-        autoHideMenuBar: true,
+    webPreferences: {
-        webPreferences: {
+      
-
+      // Use pluginOptions.nodeIntegration, leave this alone
-            // Use pluginOptions.nodeIntegration, leave this alone
+      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-            // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
-            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
-            contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
-        }
-    })
-
-    if (process.env.WEBPACK_DEV_SERVER_URL) {
-        // Load the url of the dev server if in development mode
-        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-        if (!process.env.IS_TEST) win.webContents.openDevTools()
-    } else {
-        createProtocol('app')
-        // Load the index.html when not in development
-        win.loadURL('app://./index.html')
     }
+  })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
 }
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
-    // On macOS it is common for applications and their menu bar
+  // On macOS it is common for applications and their menu bar
-    // to stay active until the user quits explicitly with Cmd + Q
+  // to stay active until the user quits explicitly with Cmd + Q
-    if (process.platform !== 'darwin') {
+  if (process.platform !== 'darwin') {
-        app.quit()
+    app.quit()
-    }
+  }
 })
 
 app.on('activate', () => {
-    // On macOS it's common to re-create a window in the app when the
+  // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
+  // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  if (BrowserWindow.getAllWindows().length === 0) createWindow()
 })
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', async () => {
-    if (isDevelopment && !process.env.IS_TEST) {
+  if (isDevelopment && !process.env.IS_TEST) {
-        // Install Vue Devtools
+    // Install Vue Devtools
-        try {
+    try {
-            //await installExtension(VUEJS_DEVTOOLS)
+      //await installExtension(VUEJS_DEVTOOLS)
-            // vuedev tools for vue3
+        // vuedev tools for vue3
-            await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
+        await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
-        } catch (e) {
+    } catch (e) {
-            console.error('Vue Devtools failed to install:', e.toString())
+      console.error('Vue Devtools failed to install:', e.toString())
-        }
     }
-    createWindow()
+  }
+  createWindow()
 })
 
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
-    if (process.platform === 'win32') {
+  if (process.platform === 'win32') {
-        process.on('message', (data) => {
+    process.on('message', (data) => {
-            if (data === 'graceful-exit') {
+      if (data === 'graceful-exit') {
-                app.quit()
+        app.quit()
-            }
+      }
-        })
+    })
-    } else {
+  } else {
-        process.on('SIGTERM', () => {
+    process.on('SIGTERM', () => {
-            app.quit()
+      app.quit()
-        })
+    })
-    }
+  }
 }

src/components/CreateMonth.vue

@@ -1,36 +1,54 @@
 <template>
-<div class="toolbar">
+<div id="create-month" >
-    <button  v-show='!addingMonth' @click='toggleAdding'>
+    <div class="month-presentation" id="new-month">
-        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>
-            <button class="cancel" @click="cancel"> Annuler </button>
-        </div>
       </div>
       <div class="datas">
-        <li v-for="cara in description" :key='cara.name'> 
+        <ul>
-            <label :for='cara.name'>{{ cara.label }}</label>
+            <li> 
-            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
+                <label for="ca-theo">CA théorique</label>
-        </li>
+                <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 class="actions">
+        <button class="validate" @click="save"> Valider </button>
+        <button class="cancel" @click="cancel"> Annuler </button>
       </div>
     </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,62 +58,29 @@ 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', {
-        'description': 'descEditable',
-    }),
-        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', {
         'createMonth': 'createMonth',
     }),
-    ...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
-        this.monthCopy = this.theEmptyMonth
     },
   },
 }
@@ -104,8 +89,13 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     .month-presentation {
-        display: grid;
+        display: inline-flex;
-        grid-template-columns: 140px 1fr;
+        flex-direction: row;
+        background-color: palegreen;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 10px;
+        width: 100%;
         }
     .month-presentation > * {
         margin: 20px;
@@ -129,17 +119,12 @@ export default {
     }
     li {
         margin: 3px;
+        width: 30%;
         display: flex;
         flex-direction: column-reverse;
     }
-    label{
-        text-align: right;
-        font-size: 0.8em;
-    }
     .value {
+        font-size: 1.5em;
         font-weight: bold;
     }
-    .toolbar {
-        text-align: center;
-    }
 </style>

src/components/MonthPresentation.vue

@@ -1,37 +1,52 @@
 <template>
 <div class="month-presentation">
-    <div id="date">
+  <div class="date">
-        <div class="month">
+    {{ TheDate }}
-           {{ theMonth }} 
+  </div>
-        </div> 
+  <div id="display">
-        <div class="year">
+    <ul>
-           {{ theYear }} 
+        <li> 
-        </div> 
+            <label for="ca-theo">CA "Séances effectuées"</label>
-        <div>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
-            <button class="edit" @click="toggleEdit" v-show="!editing"> Mettre à jour </button>
+            <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
-            <button class="validate" @click="save" v-show="editing"> Valider </button>
+        </li>
-            <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
+        <li> 
-        </div>
+            <label for="ca-retro">CA "Séances facturées"</label>
-    </div>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
-    <div id="display" v-show="!editing">
+            <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
-        <div class="hightlight" v-for="cara in descHightlights" :key='cara.name'> 
+        </li>
-            <label :for='cara.name'>{{ cara.label }}</label>
+        <li> 
-            <span class="value" >{{ cara.output(TheMonth) ?? "∅"}} {{cara.unit}}</span>
+            <label for="ca-react">CA "Séances facturées" réactualisé</label>
-        </div>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
-    </div>
+            <input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
-    <div id="edit" v-show="editing">
+        </li>
-        <div v-for="cara in descEditable" :key='cara.name' class="cara"> 
+        <li> 
-            <label :for='cara.name'>{{ cara.label }}</label>
+            <label for="nbr-seances">Nombre de séances effectuées</label>
-            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name">
+            <span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
-        </div>
+            <input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
-    </div>
+        </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>
+  </div>
+  <div class="actions">
+    <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
+    <button class="validate" @click="save" v-show="editing"> Valider </button>
+    <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
+  </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: {
@@ -50,33 +65,19 @@ export default {
         this.monthCopy =  {...this.TheMonth}
       },
   computed: {
-    ...mapGetters('config', {
-        'descHightlights': 'monthHightlightDesc',
-        'descEditable': 'descEditable',
-    }),
-      rawDate: function () {
-            return parseISO(this.TheDate, "yyyy-MM", new Date())
-      },
-      theMonth: function () {
-          return format(this.rawDate, "MMM", {locale: frLocal})
-      },
-      theYear: function () {
-          return format(this.rawDate, "YYY", )
-      },
   },
   methods: {
     ...mapActions('travail', {
         'updateMonth': 'updateMonth',
     }),
     ...mapActions('config', {
-        'writeData': 'writeData',
+        'loadData': 'loadData',
     }),
       toggleEdit: function () {
           this.editing = !this.editing
           },
       save: function () {
           this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
-          this.writeData()
           this.toggleEdit()
           },
       cancel: function () {
@@ -90,57 +91,41 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
     .month-presentation {
-        display: grid;
+        display: inline-flex;
-        grid-template-columns: 140px 1fr;
+        flex-direction: row;
+        background-color: mintcream;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border-radius: 10px;
         }
     .month-presentation > * {
         margin: 20px;
     }
 
-    #date {
+    .date {
-        font-size: 1em;
+        font-size: 1.5em;
         font-weight: bold;
-        border-right: 1px solid black;
-    }
-    .month{
-        font-size: 2em;
     }
 
-    #display {
+    ul {
         list-style-type: none;
         padding: 0;
         display: flex;
         flex-flow: row wrap;
-        align-items: center;
-        justify-content: space-around;
     }
-    #display > * {
+    li {
         margin: 3px;
-        width: 80px;
+        width: 30%;
         display: flex;
         flex-direction: column-reverse;
     }
-    label{
-        text-align: right;
-        font-size: 0.8em;
-    }
     .value {
         font-size: 1.5em;
-        text-align: right;
         font-weight: bold;
     }
 
     .novisible {
         display: None;
     }
-    button {
-        margin-top: 5px;
-        padding: 4px;
-        font-size: 0.8em;
-        width: auto;
-    }
-    .cara {
-        display: flex;
-        flex-direction: column-reverse;
-    }
 </style>

src/components/caOnPeriod.vue

@@ -1,37 +0,0 @@
-<template>
-<div class="hightlights"> 
-    <hightlight-sum :months="months" attribute="ca"/>
-    <hightlight-sum :months="months" attribute="remuneration"/>
-    <hightlight-sum :months="months" attribute="caPersoUntouch"/>
-</div>
-<revenus-chart/>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import RevenusChart from '../components/graphs/RevenusChart.vue'
-import hightlightSum from './hightlightSum.vue'
-
-export default {
-    name: 'caOnPeriod',
-    components: {
-        RevenusChart: RevenusChart,
-        hightlightSum: hightlightSum,
-        },
-    data () {
-        return {}
-        },
-    computed: {
-        ...mapGetters('travail', {
-            months: "months",
-        }),
-      },
-      mounted () {
-      },
-      methods: {
-      },
-}
-</script>
-
-<style scoped>
-</style>

src/components/caRepartition.vue

@@ -1,41 +0,0 @@
-<template>
-<div class="hightlights"> 
-    <hightlight-sum :months="months" attribute="caTheo"/>
-    <hightlight-sum :months="months" attribute="retro"/>
-    <hightlight-sum :months="months" attribute="notInvoiced"/>
-</div>
-<repartition-chart/>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import RepartitionChart from './graphs/RepartitionChart.vue'
-import hightlightSum from './hightlightSum.vue'
-
-export default {
-    name: 'caRepartition',
-    components: {
-        RepartitionChart: RepartitionChart,
-        hightlightSum: hightlightSum,
-        },
-    data () {
-        return {}
-        },
-    computed: {
-        ...mapGetters('travail', {
-            months: "months",
-        }),
-      },
-      mounted () {
-      },
-      methods: {
-      },
-}
-</script>
-
-<style scoped>
-.hightlights{
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-</style>

src/components/graphs/RepartitionChart.vue

@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <canvas id="repartition-chart"></canvas>
-  </div>
-</template>
-
-<script>
-import Chart from 'chart.js'
-import { mapGetters } from 'vuex'
-import { 
-    notInvoiced,
-    caPro, 
-    caPersoUntouch,
-    sum,
-    } from '../../lib/months'
-
-export default {
-    name: 'RepartitionChart',
-    data() {
-        return {
-        }
-    },
-    watch: {
-        months: function () {
-            const ctx = document.getElementById('repartition-chart');
-            new Chart(ctx, this.graphDatas);
-        },
-    },
-    computed: {
-        ...mapGetters('config', {
-            caProPercentage: 'caProPercentage',
-        }),
-        ...mapGetters('travail', {
-            months: "months",
-        }),
-        graphDatas: function () {
-            var datas = {
-                type: "pie",
-                data: {
-                    labels: ['Partie pro', 'Non facturé', 'Retrocession', 'Salaire',  '13e mois'],
-                    datasets: [ 
-                        {
-                            label: "Difference CA perso et remuneration",
-                            data: [
-                                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))),
-                            ],
-                        },
-                    ],
-                },
-                options: {
-                    legend: {position: 'right'},
-                }
-            }
-            return datas
-        },
-    },
-    methods: {
-    },
-    mounted() {
-        const ctx = document.getElementById('repartition-chart');
-        new Chart(ctx, this.graphDatas);
-    }
-}
-</script>

src/components/graphs/RevenusChart.vue

@@ -1,94 +0,0 @@
-<template>
-  <div>
-    <canvas id="revenus-chart"></canvas>
-  </div>
-</template>
-
-<script>
-import Chart from 'chart.js'
-import { mapGetters } from 'vuex'
-import { ca, caPersoUntouch, sum } from '../../lib/months'
-
-export default {
-    name: 'RevenusChart',
-    data() {
-        return {
-        }
-    },
-    watch: {
-        months: function () {
-            const ctx = document.getElementById('revenus-chart');
-            new Chart(ctx, this.graphDatas);
-        },
-    },
-    computed: {
-        ...mapGetters('config', {
-            caProPercentage: 'caProPercentage',
-        }),
-        ...mapGetters('travail', {
-            months: "months",
-        }),
-        graphDatas: function () {
-            var datas = {
-                type: "bar",
-                data: {
-                    labels: Object.keys(this.months),
-                    datasets: [ 
-                        {
-                            type: "bar",
-                            label: "Difference CA perso et remuneration",
-                            data: Object.values(this.months).map(a => caPersoUntouch(a)),
-                            backgroundColor: "red",
-                            borderColor: "light-red",
-                            borderWidth: 3
-                        },
-                        {
-                            type: "bar",
-                            label: "CA",
-                            data: Object.values(this.months).map(a => ca(a)),
-                            backgroundColor: "rgba(54,73,93,.5)",
-                            borderColor: "#36495d",
-                            borderWidth: 3
-                        },
-                        {
-                            type: "line",
-                            label: "Banque",
-                            data: this.untouchEvo,
-                            backgroundColor: "rgba(71, 183,132,.5)",
-                            borderColor: "#47b784",
-                            borderWidth: 3
-                        },
-                    ],
-                },
-                options: {
-                    responsive: true,
-                    lineTension: 1,
-                    scales: {
-                      yAxes: [
-                        {
-                          ticks: {
-                            beginAtZero: true,
-                            padding: 25
-                          }
-                        }
-                      ]
-                    }
-                }
-            }
-            return datas
-        },
-        untouchEvo: function () {
-            const cumulativeArray = (arr => value => {arr.push(value); return [...arr];})([]);
-            return Object.values(this.months)
-                .map(cumulativeArray)
-                .map(a => sum(a.map(m => caPersoUntouch(m))))
-        },
-    },
-    methods: {
-    },
-    mounted() {
-        const ctx = document.getElementById('revenus-chart');
-        new Chart(ctx, this.graphDatas);
-    }
-}
-</script>

src/components/hightlightSum.vue

@@ -1,52 +0,0 @@
-<template>
-    <div class="hightlight boxed">
-        <ul>
-            <li>{{ sumValue }} {{ unit }}</li>
-            <li>{{ label }} </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { 
-    sum,
-} from '../lib/months'
-
-export default {
-    name: 'hightlightSum',
-    components: {
-    },
-    props: {
-        months: Object,
-        attribute: String,
-    },
-    data () {
-        return {}
-    },
-    computed: {
-        ...mapGetters('config', {
-            descOf: "descOf",
-        }),
-        theDesc: function () {
-            return this.descOf(this.attribute)
-        },
-        sumValue: function () {
-            return sum(Object.values(this.months).map(m => this.theDesc.output(m))).toLocaleString()
-        },
-        label: function () {
-            return this.theDesc.label
-        },
-        unit: function () {
-            return this.theDesc.unit
-        },
-    },
-    mounted () {
-    },
-    methods: {
-    },
-}
-</script>
-
-<style scoped>
-</style>

src/components/hightlights.vue

@@ -1,92 +1,58 @@
 <template>
-<div class="hightlights"> 
+<div id="hightlights"> 
-    <div class="hightlight boxed">
+    <div class="hightlight">
         <ul>
-            <li>{{ ca }} €</li>
+            <li>{{ ca }}</li>
             <li>CA</li>
         </ul>
     </div>
-    <div class="hightlight boxed">
+    <div class="hightlight">
         <ul>
-            <li>{{ caMean }} €</li>
+            <li>{{ caMean }}</li>
             <li>CA moyen</li>
         </ul>
     </div>
-    <!--
+    <div class="hightlight">
-    <div class="hightlight boxed">
         <ul>
             <li>{{ caTheo }}</li>
             <li>CA des séances effectuées</li>
         </ul>
     </div>
-    -->
+    <div class="hightlight">
-    <div class="hightlight boxed">
         <ul>
-            <li>{{ caUnFactured }} €</li>
+            <li>{{ caTheo - ca }}</li>
             <li>Non facturé</li>
         </ul>
     </div>
-    <div class="hightlight boxed">
+    <div class="hightlight">
         <ul>
-            <li>{{ remuneration }} €</li>
+            <li>{{ remuneration }}</li>
             <li>Rémunération</li>
         </ul>
     </div>
-    <div class="hightlight boxed">
+    <div class="hightlight">
         <ul>
-            <li>{{ remunerationMean }} €</li>
+            <li>{{ remunerationMean }}</li>
             <li>Rémunération moyenne</li>
         </ul>
     </div>
-    <!--
+    <div class="hightlight">
-    <div class="hightlight boxed">
         <ul>
             <li>{{ retrocession }}</li>
             <li>Rétrocession</li>
         </ul>
     </div>
-    <div class="hightlight boxed">
+    <div class="hightlight">
         <ul>
             <li>{{ retrocessionMean }}</li>
             <li>Rétrocession moyenne</li>
         </ul>
     </div>
-    <div class="hightlight boxed">
-        <ul>
-            <li>{{ caPro }}</li>
-            <li> CA pour la partie pro ({{ caProPercentage*100}}% du CA)</li>
-        </ul>
-    </div>
-    <div class="hightlight boxed">
-        <ul>
-            <li>{{ caPerso }}</li>
-            <li> CA pour la partie perso</li>
-        </ul>
-    </div>
-    -->
-    <div class="hightlight boxed">
-        <ul>
-            <li>{{ caPersoUntouch }} €</li>
-            <li> CA perso non utilisé pour se rémunérer</li>
-        </ul>
-    </div>
 </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { caTotal,
-    caMean,
-    caTheo,
-    remuneration,
-    remunerationMean,
-    retrocession,
-    retrocessionMean,
-    caPro,
-    caPerso,
-    caPersoUntouch 
-} from '../lib/months'
-
 export default {
     name: 'Hightlights',
     components: {
@@ -95,26 +61,15 @@ export default {
         return {}
         },
     computed: {
-        ...mapGetters('config', {
-            caProPercentage: 'caProPercentage',
-        }),
         ...mapGetters('travail', {
-            months: "months",
+            ca: "ca",
-        }),
+            caMean: "caMean",
-        ca: function () {return caTotal(this.months).toLocaleString()},
+            caTheo: "caTheo",
-        caMean: function () {return caMean(this.months).toLocaleString()},
+            remuneration: "remuneration",
-        caTheo: function () {return caTheo(this.months).toLocaleString()},
+            remunerationMean: "remunerationMean",
-        caUnFactured: function () {return (caTheo(this.months) - caTotal(this.months)).toLocaleString()},
+            retrocession: "retrocession",
-        remuneration: function () {return remuneration(this.months).toLocaleString()},
+            retrocessionMean: "retrocessionMean",
-        remunerationMean: function () {return remunerationMean(this.months).toLocaleString()},
+        })
-        retrocession: function () {return retrocession(this.months).toLocaleString()},
-        retrocessionMean: function () {return retrocessionMean(this.months).toLocaleString()},
-        caPro: function () {return caPro(this.months, this.caProPercentage).toLocaleString()},
-        caPerso: function () {return caPerso(this.months, this.caProPercentage).toLocaleString()},
-        caPersoUntouch: function () {return caPersoUntouch(this.months, this.caProPercentage).toLocaleString()},
-
-      },
-      mounted () {
       },
       methods: {
       },
@@ -122,27 +77,4 @@ export default {
 </script>
 
 <style scoped>
-.hightlights {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-}
-.hightlight > ul{
-    list-style-type: none;
-    display: flex;
-    flex-flow: column wrap;
-    padding-inline-start: 0;
-}
-.hightlight > ul > li {
-    margin: 5px;
-    flex-direction: column-reverse;
-}
-.hightlight > ul  :first-child{
-    font-size: 3rem;
-    font-weight: bold;
-    text-align: center;
-}
-.hightlight > ul  :last-child{
-    text-align: end;
-}
 </style>

src/components/nav.vue

@@ -1,87 +1,21 @@
 <template>
-    <nav>
+  <nav>
-        <h1><router-link to="/"> Sous Margot </router-link></h1>
+  <router-link to="/"> Home </router-link>
-        <h2>
+  <router-link to="/config"> Config </router-link>
-        <ul id="years">
+  </nav>
-            <li v-for="year in years" :key="year">
-                <span @click="selectYear(year)" :class="{selected_year:year==selected_year}">{{ year }}</span>
-            </li>
-        </ul>
-        </h2>
-        <div class="nav-link">
-        <router-link to="/edit"> 
-        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-edit" class="svg-inline--fa fa-user-edit fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
-            <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h274.9c-2.4-6.8-3.4-14-2.6-21.3l6.8-60.9 1.2-11.1 7.9-7.9 77.3-77.3c-24.5-27.7-60-45.5-99.9-45.5zm45.3 145.3l-6.8 61c-1.1 10.2 7.5 18.8 17.6 17.6l60.9-6.8 137.9-137.9-71.7-71.7-137.9 137.8zM633 268.9L595.1 231c-9.3-9.3-24.5-9.3-33.8 0l-37.8 37.8-4.1 4.1 71.8 71.7 41.8-41.8c9.3-9.4 9.3-24.5 0-33.9z"></path>
-        </svg>
-        </router-link>
-        <router-link to="/config"> 
-        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
-            <path fill="black" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path>
-        </svg>
-        </router-link>
-
-        </div>
-    </nav>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { mapActions } from 'vuex'
-import { getYear } from 'date-fns'
-const today = new Date()
 export default {
   name: 'Nav',
-  data () {
+  props: {
-    return {
-      current_year: getYear(today),
-      selected_year: getYear(today),
-    }
-  },
-  computed: {
-    ...mapGetters({
-        available_years: "travail/years",
-    }),
-    years: function () {
-      return [...this.available_years, this.current_year].filter((v, i, a) => a.indexOf(v) === i)
-    }
-  },
-  methods: {
-    ...mapActions('travail', {
-        'setRange': 'setRange',
-    }),
-    selectYear: function (year) {
-      this.selected_year=year
-      this.setRange({
-          start: `${this.current_year}-01`,
-          end: `${this.current_year}-12`
-      })
-    }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
+nav {
-#years {
+    background-color: green;
-    list-style-type: none;
-    padding: 0;
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    justify-content: space-around;
 }
-#years > * {
-    margin: 3px;
-    width: 80px;
-    display: flex;
-    flex-direction: column-reverse;
-}
-
-.selected_year {
-    font-size: 1.5em;
-    font-weight: bold;
-}
-
-
 </style>

src/lib/months.js

@@ -1,44 +0,0 @@
-// Function on a month
-export function ca(month) {
-    // Extract the CA of the month
-    if (month.caReact) {
-        return month.caReact
-    } else {
-        return month.caRetro
-    }
-}
-
-export function notInvoiced (month) {
-    // Compute how much has not been invoiced
-    return month.caTheo - ca(month)
-}
-
-export function caPro (month) {
-    // Compute the part of the CA to go pro usage
-    return ca(month) * month.proPercentage / 100
-}
-
-export function caPerso (month) {
-    // Compute the part of the CA to go personnal usage
-    return ca(month) * (1 - month.proPercentage / 100)
-}
-
-export function caPersoUntouch (month) {
-    // Compute the part of the CA to go personnal usage
-    return caPerso(month) - month.remuneration
-}
-
-
-// Function on an array of month
-
-
-export function sum (array) {
-    // sum the array
-    return array.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)
-}
-

src/router.js

@@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import Home from "@/views/home.vue"
 import Config from "@/views/config.vue"
-import Edit from "@/views/edit.vue"
 
 const routes = [
     {
@@ -10,11 +9,6 @@ const routes = [
         name: 'home',
         component: Home
     },
-    {
-        path: '/edit',
-        name: 'edit',
-        component: Edit
-    },
     {
         path: '/config',
         name: 'config',

src/store/config/index.js

@@ -1,13 +1,5 @@
 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,
@@ -15,139 +7,12 @@ const config = {
         return {
             //userDir: '~/.config/sousmargot/',
             userDir: './userDir/',
-            dataFile: 'datas.csv',
+            dataFile: 'datas.csv'
-            caProPercentage: 0.5,
-            descAll : [ 
-                {
-                    name: 'caTheo',
-                    color: '',
-                    label: 'CA "scéances effectuées"',
-                    type: 'editable',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => month.caTheo,
-                },
-                {
-                    name: 'caRetro',
-                    color: '',
-                    label: 'CA "Séances facturées"',
-                    type: 'editable',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => month.caRetro,
-                },
-                {
-                    name: 'caReact', 
-                    color: '',
-                    label: 'CA "Séances facturées" réactualisé',
-                    type: 'editable',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => month.caReact,
-                },
-                {
-                    name: 'sessionQty', 
-                    color: '',
-                    label: 'Nombre de séances effectuées',
-                    unit: '',
-                    hightlight: false,
-                    output: month => month.sessionQty,
-                },
-                {
-                    name: 'retro',
-                    color: '',
-                    label: 'Montant de la rétrocession',
-                    type: 'editable',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => month.retro,
-                },
-                {
-                    name: 'remuneration', 
-                    color: '',
-                    label: 'Rémuneration',
-                    type: 'editable',
-                    unit: '€',
-                    hightlight: true,
-                    output: month => month.remuneration,
-                },
-                {
-                    name: 'proPercentage', 
-                    color: '',
-                    label: 'Pourcentage du CA pour la partie pro',
-                    type: 'editable',
-                    unit: '%',
-                    hightlight: false,
-                    output: month => month.proPercentage,
-                },
-                {
-                    name: 'ca', 
-                    color: '',
-                    label: 'CA',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: true,
-                    output: month => ca(month),
-                },
-                {
-                    name: 'notInvoiced', 
-                    color: '',
-                    label: 'Non facturé',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: true,
-                    output: month => notInvoiced(month),
-                },
-                {
-                    name: 'caPro', 
-                    color: '',
-                    label: 'CA pour le partie pro',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => caPro(month),
-                },
-                {
-                    name: 'caPerso', 
-                    color: '',
-                    label: 'CA destiné à la rémuneration',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => caPerso(month),
-                },
-                {
-                    name: 'caPersoUntouch', 
-                    color: '',
-                    label: 'Banque 13e mois',
-                    type: 'compute',
-                    unit: '€',
-                    hightlight: false,
-                    output: month => caPersoUntouch(month),
-                },
-            ],
         }
     },
     getters: {
         userDir (state) { return state.userDir },
         dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
-        descAll (state) { 
-            // All description of attributes for months
-            return state.descAll 
-        },
-        descEditable (state) { 
-            // All description of attributes for months that are editable
-            return state.descAll.filter(d => d.type == 'editable')
-        },
-        descComputed (state) { 
-            // All description of attributes for months that are computed
-            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: {
     },
@@ -156,20 +21,22 @@ const config = {
             // load config file at  ~/.config/sousmargot/config.json
             return context.state.userDir
         },
+        loadData (context) {
+            // load data in userDir on dataFile
+            console.log("Loading data")
+            console.log(context.getters.dataFilePath)
+        },
         writeData (context) {
             // overwrite the dataFile with months datas
+            console.log("Writing data")
+            console.log(context.getters.dataFilePath)
             const months = context.rootGetters['travail/monthsAll']
-            const unpackMonths = Object.keys(months).map(k => {return { ...months[k], date: k}})
+            console.log(Object.keys(months).map(k => {return { ...months[k], date: k}}))
-            const csv = Papa.unparse(unpackMonths)
+            const csv = Papa.unparse(context.rootGetters['travail/monthsAll'])
-            writeFile(context.getters.dataFilePath, csv, (err) => {
+            console.log(csv)
-                if (err)  {
-                    console.log(err) 
-                } else {
-                    console.log("Datas sauvegardées")
-                }
-            })
         },
     },
 }
 
 export default config
+

src/store/travail/index.js

@@ -1,27 +1,77 @@
-import { readFile } from 'fs'
-import Papa from 'papaparse'
-import { getYear } from 'date-fns'
 
-const today = new Date()
+function monthCA(month) {
+    if (month.ca_react) {
+        return month.ca_react
+    } else {
+        return month.ca_retro
+    }
+}
 
 const travail = {
     namespaced: true,
     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: `${getYear(today)}-01`,
+                start: "2021-01",
-                end: `${getYear(today)}-12`,
+                end: "2021-08",
             },
         }
     },
@@ -36,46 +86,83 @@ 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)
+            return Object.keys(state.months)
                 .filter(a => getters.MonthsDate.includes(a))
                 .reduce((acc, v) => {
                     acc[v] = state.months[v];
                     return acc;
                 }, {})
-            return a
         },
         monthsAll: (state) => {
             // Get in range months
             return state.months
         },
         getMonth: (state) => (date) => {
-            // Get a month by its date
             return state.months[date]
         },
         count: (state, getters) => { 
             // Amount of mounts
             return Object.keys(getters.months).length 
         },
-        years: (state) => {
+        ca: (state, getters) => {
-            // list of years with data
+            // Total CA (ca_react if sets, ca_retro otherwise)
-            return Object.keys(state.months).map(k => k.slice(0,4)).filter((v, i, a) => a.indexOf(v) === i)
+            return Object.values(getters.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, getters) => {
+            // Total theorical CA
+            return Object.values(getters.months).map(a => a.ca_theo).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remuneration: (state, getters) => {
+            // Total remuneration
+            return Object.values(getters.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remunerationMean: (state, getters) => {
+            // Mean of remuneration
+            return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            ) / getters.count)
+        },
+        retrocession: (state, getters) => {
+            // Total retrocession
+            return Object.values(getters.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                )
+        },
+        retrocessionMean: (state, getters) => {
+            // Mean of retrocession
+            return Math.floor(
+                Object.values(getters.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                ) / getters.count
+            )
+        },
     },
     mutations: {
-        cleanMonths (state) {
-            // erase months
-            state.months = []
-        },
-        importMonths(state, months) {
-            // overwrite months
-            state.months = months
-        },
         updateMonth(state, { date, month }) {
             state.months[date] = month
         },
@@ -87,23 +174,6 @@ const travail = {
         }, 
     },
     actions: {
-        cleanMonths (context) {
-            context.commit("cleanMonths")
-        },
-        loadMonths (context) {
-            // import all months from storage
-            readFile(context.rootGetters["config/dataFilePath"], (err, data) => {
-                if (err) throw err;
-                const months = Papa.parse(data.toString(), {header: true, dynamicTyping:true, skipEmptyLines:true})
-                    .data
-                    .reduce(
-                        (acc, el) => {
-                            acc[el.date] = el;
-                            return acc
-                        }, {})
-                context.commit("importMonths", months)
-            })
-        },
         updateMonth(context, { date, month }) {
             // update month's datas 
             if (date in context.state.months) {
@@ -115,7 +185,9 @@ const travail = {
         createMonth(context, { date, month }) {
             // Create a new month
             if (!(date in context.state.months)) {
+                console.log(date)
                 context.commit('createMonth', { date, month })
+                console.log(context.state.months)
             } else {
                 console.log("This month already exists")
             }

src/style.css

@@ -1,110 +1,27 @@
-body {
-  background-color: whitesmoke;
-  margin: 0;
-}
 
-nav {
+.actions {
-  display: flex;
+    display: inline-flex;
-  justify-content: space-between;
+    flex-direction: column;
-  align-items: center;
+    width: 120px;
-  margin-bottom: 20px;
-  padding: 0 20px;
-  color: black;
-}
-nav h1 {
-  font-size: 2em;
-  border-bottom: 1px solid #000;
-}
-nav a {
-  color: black;
-  text-decoration: none;
-}
-
-.content {
-  margin: 10px;
 }
 
 button {
-  color: black;
+    border: none;
-  padding: 4px;
+    color: white;
-  box-shadow: 1px 1px 2px gray;
+    padding: 15px 32px;
-  text-align: center;
+    text-align: center;
-  display: inline-block;
+    display: inline-block;
-  border-radius: 5px;
+    width: 100%;
-  background-color: white;
+    font-size: 16px;
-  margin-top: 5px;
+    border-radius: 5px;
-  font-size: 0.8em;
+    color: black;
-  width: auto;
+    }
-  transition: all 0.2s ease-out;
-}
-
-button:hover {
-  background-color: black;
-  color: white;
-  transition: all 0.2s ease-out;
-}
-
 .validate {
-  border: 2px solid green;
-  color: green;
-}
-.validate:hover {
   background-color: green;
-  color: white;
 }
 .cancel {
-  border: 2px solid red;
-  color: red;
-}
-.cancel:hover {
   background-color: red;
-  color: white;
 }
 .edit {
-  border: 2px solid orange;
-  color: orange;
-}
-.edit:hover {
   background-color: orange;
-  color: white;
-}
-
-.boxed {
-  box-shadow: 2px 2px 5px gray;
-  border-left: 1rem solid black;
-  border-radius: 10px;
-  background-color: white;
-}
-
-.boxed-green {
-  box-shadow: 2px 2px 5px gray;
-  border-left: 1rem solid green;
-  border-radius: 10px;
-  background-color: white;
-}
-
-.hightlights {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 20px;
-}
-.hightlight > ul {
-  list-style-type: none;
-  display: flex;
-  flex-flow: column wrap;
-  padding-inline-start: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
-}
-.hightlight > ul > li {
-  margin: 5px;
-  flex-direction: column-reverse;
-}
-.hightlight > ul :first-child {
-  font-size: 2rem;
-  font-weight: bold;
-  text-align: center;
-}
-.hightlight > ul :last-child {
-  text-align: end;
 }

src/views/config.vue

@@ -1,40 +1,3 @@
 <template>
 <h1>Config</h1>
-
-<h2> Données </h2>
-<h3>Données éditables</h3>
-<ul>
-    <li v-for="param in descEditable" :key='param.name'>
-        {{ param }}
-    </li>
-</ul>
-<h3>Données calculées</h3>
-<ul>
-    <li v-for="param in descComputed" :key='param.name'>
-        {{ param }}
-    </li>
-</ul>
-
 </template>
-
-<script>
-import { mapGetters } from 'vuex'
-export default {
-    name: 'config',
-
-    data () {
-        return {}
-    },
-    computed: {
-        ...mapGetters('config', {
-            'descEditable': 'descEditable',
-            'descComputed': 'descComputed',
-        }),
-    },
-    methods: {
-    },
-    mounted () {
-    }, 
-     
-}
-</script>

src/views/edit.vue

@@ -1,22 +0,0 @@
-<template>
-<h1>Edition</h1>
-
-
-</template>
-
-<script>
-export default {
-    name: 'edit',
-
-    data () {
-        return {}
-    },
-    computed: {
-    },
-    methods: {
-    },
-    mounted () {
-    }, 
-     
-}
-</script>

src/views/home.vue

@@ -1,29 +1,36 @@
 <template>
-  <div id="content">
+<h1>Home</h1>
+<button @click="writeData" ></button>
+<section id="selector">
+   <month-selector> 
+   </month-selector> 
+</section>
+<div id="content">
     <section id="months">
-      <create-month />
+        <h2> Mois </h2>
-      <months-list />
+        <create-month></create-month>
+        <months-list></months-list>
     </section>
     <section id="stats">
-      <ca-on-period />
+        <h2>Résumé</h2>
-      <ca-repartition />
+        <highlights></highlights> 
     </section>
-  </div>
+</div>
 </template>
 
 <script>
 import { mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
-import caOnPeriod from '../components/caOnPeriod.vue'
+import MonthSelector from '../components/monthSelector.vue'
-import caRepartition from '../components/caRepartition.vue'
+import Highlights from '../components/hightlights.vue'
 export default {
     name: 'home',
     components: {
         MonthsList: MonthsList,
         CreateMonth: CreateMonth,
-        caOnPeriod: caOnPeriod,
+        MonthSelector: MonthSelector,
-        caRepartition: caRepartition,
+        highlights: Highlights,
     },
     data () {
         return {}
@@ -31,27 +38,28 @@ export default {
     computed: {
     },
     methods: {
-        ...mapActions('travail', {
+        ...mapActions('config', {
-            'loadMonths': 'loadMonths',
+            'loadData': 'loadData',
+            'writeData': 'writeData',
         }),
     },
     mounted () {
-        this.loadMonths()
+        this.loadData()
     }, 
 }
 </script>
 
 <style scoped>
 #content {
-  display: grid;
+    display: inline-flex;
-  grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
+    flex-direction: row;
-  grid-template-areas: "stats months";
+    background-color: red;
-  gap: 1em;
+    margin: 0;
 }
-#stats {
+#content > * {
-  grid-area: stats;
+    margin: 10px;
 }
 #months {
-  grid-area: months;
+    flex-basis: 60%;
 }
 </style>

userDir/datas.csv

@@ -1,8 +1 @@
-caTheo,sessionQty,caRetro,caReact,retro,remuneration,date,proPercentage
+ca_theo, nbr_seances, ca_retro, ca_react, retro, remuneration,
-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

yarn.lock

@@ -2774,29 +2774,6 @@ chardet@^0.7.0:
   resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chart.js@2.9.4:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
-
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz"
@@ -3010,7 +2987,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -6746,11 +6723,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moment@^2.10.2:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"