src/components/monthSelector.vue

@@ -4,12 +4,12 @@
     <h2>Période</h2>
     </li>
     <li>
-      <input type="month" @input="updateStart" v-model="start">
+      <input type="month" v-model="range.start">
-      <input type="month" @input="updateEnd" v-model="end">
+      <input type="month" v-model="range.end">
     </li>
     <li>
-        <button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
+        <button @click="setRange6months" :active='selected=="month"'>6 mois</button>
-        <button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
+        <button @click="setRange1year" :active='selected=="year"'>1 an</button>
         <button @click="setRangeAll" :active='selected=="all"'>Tout</button>
     </li>
 </ul>
@@ -19,7 +19,7 @@
 <script>
 
 import { mapGetters, mapActions } from 'vuex'
-import { setMonth, addMonths, format, parseISO } from 'date-fns'
+import { addMonths, format, parseISO } from 'date-fns'
 
 const today = new Date();
 
@@ -30,46 +30,25 @@ export default {
     data () {
         return {
             selected: "",
-            start: "", 
-            end: "",
             }
     },
     computed: {
         ...mapGetters('travail', {
-            range: "range",
+            range: "Range",
             monthsDate: "MonthsDate",
         })
     },
-    watch: {
-        range: function (newRange, oldRange) {
-            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",
         }),
-        updateStart: function () {
+        setRange6months: function () {
-            this.selected = "custom"
+            const start = addMonths(new Date(), -6)
-            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 = "january"
+            this.selected = "month"
             this.setRange(range)
         }, 
         setRange1year: function () {
@@ -97,39 +76,40 @@ 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/travail/index.js

@@ -76,7 +76,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()
@@ -101,9 +101,9 @@ const travail = {
             // Amount of mounts
             return Object.keys(getters.months).length 
         },
-        ca: (state, getters) => {
+        ca: (state) => {
             // Total CA (ca_react if sets, ca_retro otherwise)
-            return Object.values(getters.months).map(a => monthCA(a)).reduce(
+            return Object.values(state.months).map(a => monthCA(a)).reduce(
                 (acc, v) => acc + v,
                 0
             )
@@ -115,30 +115,30 @@ const travail = {
                 0
             ) / getters.count)
         },
-        caTheo: (state, getters) => {
+        caTheo: (state) => {
             // Total theorical CA
-            return Object.values(getters.months).map(a => a.ca_theo).reduce(
+            return Object.values(state.months).map(a => a.ca_theo).reduce(
                 (acc, v) => acc + v,
                 0
             )
         },
-        remuneration: (state, getters) => {
+        remuneration: (state) => {
             // Total remuneration
-            return Object.values(getters.months).map(a => a.remuneration).reduce(
+            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(getters.months).map(a => a.remuneration).reduce(
+            return Math.floor(Object.values(state.months).map(a => a.remuneration).reduce(
                 (acc, v) => acc + v,
                 0
             ) / getters.count)
         },
-        retrocession: (state, getters) => {
+        retrocession: (state) => {
             // Total retrocession
-            return Object.values(getters.months)
+            return Object.values(state.months)
                 .map(a => a.retro)
                 .reduce(
                     (acc, v) => acc + v,
@@ -148,7 +148,7 @@ const travail = {
         retrocessionMean: (state, getters) => {
             // Mean of retrocession
             return Math.floor(
-                Object.values(getters.months)
+                Object.values(state.months)
                 .map(a => a.retro)
                 .reduce(
                     (acc, v) => acc + v,