Feat: list years

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="select_year(year)" :class="{selected_year:year==current_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,35 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import { getYear } from 'date-fns'
+const today = new Date()
 export default {
   name: 'Nav',
-  props: {
+  data () {
+    return {
+      current_year: getYear(today),
+    }
+  },
+  computed: {
+    ...mapGetters({
+        years: "travail/years",
+    })
+  },
+  methods: {
+    select_year: function (year) {
+        this.current_year=year
+    }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+
+.selected_year {
+  color: red;
+}
+
+
 </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) {