Fix: Update month input when clicking on preselected ranges

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 (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",
         }),
-        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/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()