Start working on csv

package.json

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

src/components/CreateMonth.vue

@@ -8,27 +8,27 @@
         <ul>
             <li> 
                 <label for="ca-theo">CA théorique</label>
-                <input type="number" v-model="monthCopy.ca_theo"  id="ca-theo" class="value" >
+                <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="monthCopy.ca_retro" id="ca-retro" class="value" >
+                <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="monthCopy.ca_react" id="ca-react" class="value" >
+                <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="monthCopy.nbr_seances" id="nbr-seances" class="value" >
+                <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="monthCopy.retro" id="retro" class="value" >
+                <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="monthCopy.remuneration" id="remuneration" class="value">
+                <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value">
             </li>
         </ul>
       </div>

src/components/MonthPresentation.vue

@@ -8,32 +8,32 @@
         <li> 
             <label for="ca-theo">CA "Séances effectuées"</label>
             <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
-            <input type="number" v-model="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
+            <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="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
+            <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="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
+            <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="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
+            <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="monthCopy.retro" id="retro" class="value" v-show="editing">
+            <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="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
+            <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
         </li>
     </ul>
   </div>
@@ -69,12 +69,15 @@ export default {
   methods: {
     ...mapActions('travail', {
         'updateMonth': 'updateMonth',
+    }),
+    ...mapActions('config', {
+        'loadData': 'loadData',
     }),
       toggleEdit: function () {
           this.editing = !this.editing
           },
       save: function () {
-          this.updateMonth({date: this.TheDate, month: this.monthCopy})
+          this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
           this.toggleEdit()
           },
       cancel: function () {

src/components/monthSelector.vue

@@ -4,12 +4,12 @@
     <h2>Période</h2>
     </li>
     <li>
-      <input type="month" v-model="range.start">
+      <input type="month" @input="updateStart" v-model="start">
-      <input type="month" v-model="range.end">
+      <input type="month" @input="updateEnd" v-model="end">
     </li>
     <li>
-        <button @click="setRange6months" :active='selected=="month"'>6 mois</button>
+        <button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
-        <button @click="setRange1year" :active='selected=="year"'>1 an</button>
+        <button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
         <button @click="setRangeAll" :active='selected=="all"'>Tout</button>
     </li>
 </ul>
@@ -19,7 +19,7 @@
 <script>
 
 import { mapGetters, mapActions } from 'vuex'
-import { addMonths, format, parseISO } from 'date-fns'
+import { setMonth, addMonths, format, parseISO } from 'date-fns'
 
 const today = new Date();
 
@@ -30,25 +30,46 @@ export default {
     data () {
         return {
             selected: "",
+            start: "", 
+            end: "",
             }
     },
     computed: {
         ...mapGetters('travail', {
-            range: "Range",
+            range: "range",
             monthsDate: "MonthsDate",
         })
     },
+    watch: {
+        range: function () {
+            this.start = this.range.start
+            this.end = this.range.end
+        },
+    },
+    mounted () {
+        this.setRangeFromJanuary()
+        this.start = this.range.start
+        this.end = this.range.end
+    },
     methods: {
         ...mapActions('travail', {
             setRange: "setRange",
         }),
-        setRange6months: function () {
+        updateStart: function () {
-            const start = addMonths(new Date(), -6)
+            this.selected = "custom"
+            this.setRange({start: this.start, end: this.end})
+        },
+        updateEnd: function () {
+            this.selected = "custom"
+            this.setRange({start: this.start, end: this.end})
+        },
+        setRangeFromJanuary: function () {
+            const start = setMonth(today, 0)
             const range = {
                 start: format(start, 'yyyy-MM'), 
                 end: format(today, 'yyyy-MM'), 
             }
-            this.selected = "month"
+            this.selected = "january"
             this.setRange(range)
         }, 
         setRange1year: function () {
@@ -76,40 +97,39 @@ export default {
 </script>
 
 <style scoped>
-ul {
+    ul {
-        list-style-type: none;
+            list-style-type: none;
-        padding: 0;
+            padding: 0;
-        display: flex;
+            display: flex;
-        flex-flow: column wrap;
+            flex-flow: column wrap;
-}
+    }
-ul > * {
+    ul > * {
-    margin-top: 10px;
+        margin-top: 10px;
-}
+    }
-li {
+    li {
-        list-style-type: none;
+            list-style-type: none;
-        display: flex;
+            display: flex;
-        flex-flow: row;
+            flex-flow: row;
-        justify-content: space-around;
+            justify-content: space-around;
 
-}
+    }
-h2 {
+    h2 {
-    margin: 0;
+        margin: 0;
-}
+    }
-input {
+    input {
-    border: none;
+        border: none;
-    color: white;
+        color: white;
-    padding: 15px 32px;
+        padding: 15px 32px;
-    text-align: center;
+        text-align: center;
-    display: inline-block;
+        display: inline-block;
-    font-size: 16px;
+        font-size: 16px;
-    border-radius: 5px;
+        border-radius: 5px;
-    color: black;
+        color: black;
-}
+    }
-button {
+    button {
-    flex-basis: 33%;
+        flex-basis: 33%;
-    height: 3rem;
+        height: 3rem;
-    background-color: white;
+        background-color: white;
-
-}
 
+    }
 </style>

src/store/config/index.js

@@ -0,0 +1,42 @@
+import path from 'path'
+import Papa from 'papaparse'
+
+const config = {
+    namespaced: true,
+    state() {
+        return {
+            //userDir: '~/.config/sousmargot/',
+            userDir: './userDir/',
+            dataFile: 'datas.csv'
+        }
+    },
+    getters: {
+        userDir (state) { return state.userDir },
+        dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
+    },
+    mutations: {
+    },
+    actions: {
+        loadConfig (context) {
+            // 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']
+            console.log(Object.keys(months).map(k => {return { ...months[k], date: k}}))
+            const csv = Papa.unparse(context.rootGetters['travail/monthsAll'])
+            console.log(csv)
+        },
+    },
+}
+
+export default config
+

src/store/index.js

@@ -1,10 +1,12 @@
 import { createStore } from 'vuex'
 import travailStore from "./travail"
+import configStore from "./config"
 
 // Create a new store instance.
 const store = createStore({
     modules:{
         travail: travailStore,
+        config: configStore,
     }
 })
 

src/store/travail/index.js

@@ -1,3 +1,4 @@
+
 function monthCA(month) {
     if (month.ca_react) {
         return month.ca_react
@@ -76,7 +77,7 @@ const travail = {
     },
     getters: {
         TheEmptyMonth(state) { return { ...state.empty } },
-        Range(state) { return state.range },
+        range(state) { return state.range },
         MonthsDate(state) {
             // Get months inside the range
             return Object.keys(state.months).filter(date => (date >= state.range.start) && (date <= state.range.end)).sort().reverse()
@@ -94,6 +95,10 @@ const travail = {
                     return acc;
                 }, {})
         },
+        monthsAll: (state) => {
+            // Get in range months
+            return state.months
+        },
         getMonth: (state) => (date) => {
             return state.months[date]
         },
@@ -101,9 +106,9 @@ const travail = {
             // Amount of mounts
             return Object.keys(getters.months).length 
         },
-        ca: (state) => {
+        ca: (state, getters) => {
             // Total CA (ca_react if sets, ca_retro otherwise)
-            return Object.values(state.months).map(a => monthCA(a)).reduce(
+            return Object.values(getters.months).map(a => monthCA(a)).reduce(
                 (acc, v) => acc + v,
                 0
             )
@@ -115,30 +120,30 @@ const travail = {
                 0
             ) / getters.count)
         },
-        caTheo: (state) => {
+        caTheo: (state, getters) => {
             // Total theorical CA
-            return Object.values(state.months).map(a => a.ca_theo).reduce(
+            return Object.values(getters.months).map(a => a.ca_theo).reduce(
                 (acc, v) => acc + v,
                 0
             )
         },
-        remuneration: (state) => {
+        remuneration: (state, getters) => {
             // Total remuneration
-            return Object.values(state.months).map(a => a.remuneration).reduce(
+            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(state.months).map(a => a.remuneration).reduce(
+            return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
                 (acc, v) => acc + v,
                 0
             ) / getters.count)
         },
-        retrocession: (state) => {
+        retrocession: (state, getters) => {
             // Total retrocession
-            return Object.values(state.months)
+            return Object.values(getters.months)
                 .map(a => a.retro)
                 .reduce(
                     (acc, v) => acc + v,
@@ -148,7 +153,7 @@ const travail = {
         retrocessionMean: (state, getters) => {
             // Mean of retrocession
             return Math.floor(
-                Object.values(state.months)
+                Object.values(getters.months)
                 .map(a => a.retro)
                 .reduce(
                     (acc, v) => acc + v,
@@ -161,38 +166,36 @@ const travail = {
         updateMonth(state, { date, month }) {
             state.months[date] = month
         },
-    createMonth (state, { date, month }) {
+        createMonth (state, { date, month }) {
-        state.months[date] = month
+            state.months[date] = month
+        },
+            setRange(state, range) {
+        state.range = range
+        }, 
     },
-        setRange(state, range) {
+    actions: {
-    state.range = range
+        updateMonth(context, { date, month }) {
-}, 
+            // update month's datas 
-
+            if (date in context.state.months) {
+                context.commit('updateMonth', { date, month })
+            } else {
+                console.log("This month does not exists")
+            }
+        },
+        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")
+            }
+        },
+        setRange(context, range) {
+            context.commit("setRange", range)
+        },
     },
-actions: {
-    updateMonth(context, { date, month }) {
-        // update month's datas 
-        if (date in context.state.months) {
-            context.commit('updateMonth', { date, month })
-        } else {
-            console.log("This month does not exists")
-        }
-    },
-    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")
-        }
-    },
-    setRange(context, range) {
-        context.commit("setRange", range)
-    },
-
-},
 }
 
 export default travail

src/views/home.vue

@@ -1,5 +1,6 @@
 <template>
 <h1>Home</h1>
+<button @click="writeData" ></button>
 <section id="selector">
    <month-selector> 
    </month-selector> 
@@ -18,7 +19,7 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
 import MonthSelector from '../components/monthSelector.vue'
@@ -30,19 +31,21 @@ export default {
         CreateMonth: CreateMonth,
         MonthSelector: MonthSelector,
         highlights: Highlights,
-        },
+    },
     data () {
         return {}
-        },
+    },
     computed: {
-        ...mapGetters({
+    },
-            count: "datas/count",
+    methods: {
-        })
+        ...mapActions('config', {
-      },
+            'loadData': 'loadData',
-      methods: {
+            'writeData': 'writeData',
-        ...mapActions({
+        }),
-        })
+    },
-      },
+    mounted () {
+        this.loadData()
+    }, 
 }
 </script>
 

userDir/datas.csv

@@ -0,0 +1 @@
+ca_theo, nbr_seances, ca_retro, ca_react, retro, remuneration,

vue.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true
+    }
+  }
+}