Feat: add current year to nav

public/user-cog-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path></svg>

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

@@ -1,6 +1,8 @@
 import { readFile } from 'fs'
 import Papa from 'papaparse'
+import { getYear } from 'date-fns'
 
+const today = new Date()
 
 const travail = {
     namespaced: true,
@@ -18,8 +20,8 @@ const travail = {
             months: {
             },
             range: {
-                start: "2021-01",
-                end: "2021-08",
+                start: `${getYear(today)}-01`,
+                end: `${getYear(today)}-12`,
             },
         }
     },
@@ -53,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) {