Feat: improve month selector

package.json

@@ -14,6 +14,7 @@
   "main": "background.js",
   "dependencies": {
     "core-js": "^3.6.5",
+    "date-fns": "^2.23.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.8",
     "vuex": "^4.0.2"

src/components/monthSelector.vue

@@ -0,0 +1,115 @@
+<template>
+<ul>
+    <li>
+    <h2>Période</h2>
+    </li>
+    <li>
+      <input type="month" v-model="range.start">
+      <input type="month" v-model="range.end">
+    </li>
+    <li>
+        <button @click="setRange6months" :active='selected=="month"'>6 mois</button>
+        <button @click="setRange1year" :active='selected=="year"'>1 an</button>
+        <button @click="setRangeAll" :active='selected=="all"'>Tout</button>
+    </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 {
+            selected: "",
+            }
+    },
+    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.selected = "month"
+            this.setRange(range)
+        }, 
+        setRange1year: function () {
+            const start = addMonths(new Date(), -12)
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(today, 'yyyy-MM'), 
+            }
+            this.selected = "year"
+            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.selected = "all"
+            this.setRange(range)
+        }, 
+    },
+}
+</script>
+
+<style scoped>
+ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: column wrap;
+}
+ul > * {
+    margin-top: 10px;
+}
+li {
+        list-style-type: none;
+        display: flex;
+        flex-flow: row;
+        justify-content: space-around;
+
+}
+h2 {
+    margin: 0;
+}
+input {
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    display: inline-block;
+    font-size: 16px;
+    border-radius: 5px;
+    color: black;
+}
+button {
+    flex-basis: 33%;
+    height: 3rem;
+    background-color: white;
+
+}
+
+</style>

src/store/travail/index.js

@@ -60,14 +60,23 @@ const travail = {
                     remumeration: 2800, // rémunération décidée
                 },
             },
+            range: {
+                start: "2021-01",
+                end: "2021-08",
+            },
         }
     },
     getters: {
         Count (state) {return state.months.length},
         TheEmptyMonth (state) {return {...state.empty}},
+        Range (state) {return state.range}, 
         MonthsDate (state) {
-            return Object.keys(state.months).sort()
+            // Get months inside the range
-            //return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
+            return Object.keys(state.months).filter(date => (date >= state.range.start)&&(date <= state.range.end) ).sort().reverse()
+        },
+        MonthsAllDate (state) {
+            // Get all the months
+            return Object.keys(state.months).sort().reverse()
         },
         getMonth: (state) => (date) => {
             return state.months[date]
@@ -80,9 +89,14 @@ const travail = {
         createMonth (state, {date, month}) {
             state.months[date] = month
         },
+        setRange (state, range) {
+            state.range = range
+        }, 
+
     },
     actions: {
         updateMonth (context, {date, month}) {
+            // update month's datas 
             if (date in context.state.months) {
                 context.commit('updateMonth', {date, month})
             } else {
@@ -90,6 +104,7 @@ const travail = {
             }
         },
         createMonth (context, {date, month}) {
+            // Create a new month
             if (!(date in context.state.months)) {
                 console.log(date)
                 context.commit('createMonth', {date, month})
@@ -98,6 +113,10 @@ const travail = {
                 console.log("This month already exists")
             }
         },
+        setRange (context, range) {
+            context.commit("setRange", range)
+        }, 
+
     },
 }
 

src/style.css

@@ -6,14 +6,15 @@
 }
 
 button {
-  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;
-  width: 100%;
+    width: 100%;
-  font-size: 16px;
+    font-size: 16px;
-  border-radius: 5px;
+    border-radius: 5px;
+    color: black;
     }
 .validate {
   background-color: green;

src/views/home.vue

@@ -1,28 +1,41 @@
 <template>
 <h1>Home</h1>
-<section id="months">
+<section id="selector">
-    <h2> Mois </h2>
+   <month-selector> 
-    <create-month></create-month>
+   </month-selector> 
-    <months-list></months-list>
 </section>
+<div id="content">
+    <section id="months">
+        <h2> Mois </h2>
+        <create-month></create-month>
+        <months-list></months-list>
+    </section>
+    <section id="stats">
+        <h2>Résumé</h2>
+            
+        
+    </section>
+</div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import MonthsList from '../components/MonthsUl.vue'
 import CreateMonth from '../components/CreateMonth.vue'
+import MonthSelector from '../components/monthSelector.vue'
 export default {
     name: 'home',
     components: {
         MonthsList: MonthsList,
         CreateMonth: CreateMonth,
+        MonthSelector: MonthSelector,
         },
     data () {
         return {}
         },
     computed: {
         ...mapGetters({
-            state: "datas/count",
+            count: "datas/count",
         })
       },
       methods: {
@@ -33,7 +46,16 @@ export default {
 </script>
 
 <style scoped>
+#content {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: red;
+    margin: 0;
+}
+#content > * {
+    margin: 10px;
+}
 #months {
-    width: 70%;
+    flex-basis: 60%;
 }
 </style>

yarn.lock

@@ -3450,6 +3450,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.23.0:
+  version "2.23.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
+  integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"