Feat: month selector

src/components/monthSelector.vue

@@ -0,0 +1,74 @@
+<template>
+<ul>
+    <li>
+    Période
+      <input type="month" v-model="range.start">
+      <input type="month" v-model="range.end">
+    </li>
+    <li @click="setRange6months">6 mois</li>
+    <li @click="setRange1year">1 an</li>
+    <li @click="setRangeAll">Tout</li>
+</ul>
+
+</template>
+
+<script>
+
+import { mapGetters, mapActions } from 'vuex'
+import { addMonths, format, parseISO } from 'date-fns'
+
+const today = new Date();
+
+
+export default {
+    name: 'MonthSelector',
+    components: {
+    },
+    data () {
+        return {}
+    },
+    computed: {
+        ...mapGetters('travail', {
+            range: "Range",
+            monthsDate: "MonthsDate",
+        })
+    },
+    methods: {
+        ...mapActions('travail', {
+            setRange: "setRange",
+        }),
+        setRange6months: function () {
+            const start = addMonths(new Date(), -6)
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(today, 'yyyy-MM'), 
+            }
+            this.setRange(range)
+        }, 
+        setRange1year: function () {
+            const start = addMonths(new Date(), -12)
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(today, 'yyyy-MM'), 
+            }
+            this.setRange(range)
+        }, 
+        setRangeAll: function () {
+            const dates = this.monthsDate.map(a => parseISO(a, "yyyy-MM", new Date()))
+            const start = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? a: b))
+            const end = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? b: a))
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(end, 'yyyy-MM'),
+            }
+            this.setRange(range)
+        }, 
+    },
+}
+</script>
+
+<style scoped>
+ul {
+}
+
+</style>