Feat: add current year to nav

src/components/nav.vue

@@ -1,6 +1,13 @@
 <template>
     <nav>
         <h1><router-link to="/"> Sous Margot </router-link></h1>
+        <h2>
+        <ul id="years">
+            <li v-for="year in years" :key="year">
+                <span @click="selectYear(year)" :class="{selected_year:year==selected_year}">{{ year }}</span>
+            </li>
+        </ul>
+        </h2>
         <div class="nav-link">
         <router-link to="/edit"> 
         <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-edit" class="svg-inline--fa fa-user-edit fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
@@ -18,13 +25,63 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import { mapActions } from 'vuex'
+import { getYear } from 'date-fns'
+const today = new Date()
 export default {
   name: 'Nav',
-  props: {
+  data () {
+    return {
+      current_year: getYear(today),
+      selected_year: getYear(today),
+    }
+  },
+  computed: {
+    ...mapGetters({
+        available_years: "travail/years",
+    }),
+    years: function () {
+      return [...this.available_years, this.current_year].filter((v, i, a) => a.indexOf(v) === i)
+    }
+  },
+  methods: {
+    ...mapActions('travail', {
+        'setRange': 'setRange',
+    }),
+    selectYear: function (year) {
+      this.selected_year=year
+      this.setRange({
+          start: `${this.current_year}-01`,
+          end: `${this.current_year}-12`
+      })
+    }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+
+#years {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-around;
+}
+#years > * {
+    margin: 3px;
+    width: 80px;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.selected_year {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+
 </style>

src/store/travail/index.js

@@ -55,12 +55,17 @@ const travail = {
             return state.months
         },
         getMonth: (state) => (date) => {
+            // Get a month by its date
             return state.months[date]
         },
         count: (state, getters) => { 
             // Amount of mounts
             return Object.keys(getters.months).length 
         },
+        years: (state) => {
+            // list of years with data
+            return Object.keys(state.months).map(k => k.slice(0,4)).filter((v, i, a) => a.indexOf(v) === i)
+        }
     },
     mutations: {
         cleanMonths (state) {