Feat: locale for date and button for adding next month

src/components/CreateMonth.vue

@@ -1,7 +1,17 @@
 <template>
-    <div class="boxed-green month-presentation" id="new-month">
+<div class="toolbar">
+    <button  v-show='!addingMonth' @click='toggleAdding'>
+        Ajouter  {{ formatedDate }}
+    </button>
+</div>
+    <div class="boxed-green month-presentation" id="new-month" v-show='addingMonth'>
       <div class="date">
-          <input type="month" v-model="monthDate">
+        <div class="month">
+            {{ theMonth }} 
+        </div> 
+        <div class="year">
+            {{ theYear }} 
+        </div> 
 
         <div class="actions">
             <button class="validate" @click="save"> Valider </button>
@@ -19,13 +29,8 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-const today = new Date();
-function formatDate(date) {
-    var y = ''+date.getFullYear()
-    var m = ''+(date.getMonth()+1)
-    if (m.length < 2) { m = '0'+m}
-    return [y, m].join('-')
-}
+import {  parseISO, addMonths, format } from 'date-fns'
+import frLocal from 'date-fns/locale/fr'
 
 export default {
   name: 'NewMonth',
@@ -35,20 +40,41 @@ export default {
   },
   data () {
       return {
-            monthDate: formatDate(today),
+            monthDate: new Date(),
             monthCopy: Object,
+            addingMonth: false,
           }
   },
   mounted () {
       this.monthCopy = this.theEmptyMonth
   },
+  watch: {
+    lastMonthDate: function () {
+        if (this.lastMonthDate) {
+            this.monthDate = addMonths(parseISO(this.lastMonthDate, "yyyy-MM", new Date()), 1)
+        } else {
+            this.monthDate = new Date()
+        }
+         
+    },
+  },
   computed: {
     ...mapGetters('travail', {
         'theEmptyMonth': 'TheEmptyMonth',
+        'lastMonthDate': 'lastMonthDate',
     }),
     ...mapGetters('config', {
         'monthDesc': 'monthDesc',
     }),
+        formatedDate: function () {
+          return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
+        },
+      theMonth: function () {
+          return format(this.monthDate, "MMM", {locale: frLocal})
+      },
+      theYear: function () {
+          return format(this.monthDate, "YYY", {locale: frLocal})
+      },
   },
   methods: {
     ...mapActions('travail', {
@@ -57,13 +83,18 @@ export default {
     ...mapActions('config', {
         'writeData': 'writeData',
     }),
+    toggleAdding: function () {
+        this.addingMonth = !this.addingMonth
+    },
     save: function () {
         console.log("save")
         console.log(this.monthCopy)
-        this.createMonth({date: this.monthDate, month: this.monthCopy})
+        this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
+        this.toggleAdding()
         this.writeData()
     },
     cancel: function () {
+        this.toggleAdding()
         this.monthCopy = this.theEmptyMonth
     },
   },
@@ -104,4 +135,7 @@ export default {
     .value {
         font-weight: bold;
     }
+    .toolbar {
+        text-align: center;
+    }
 </style>

src/components/MonthPresentation.vue

@@ -34,6 +34,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import {  parseISO, format } from 'date-fns'
+import frLocal from 'date-fns/locale/fr'
 export default {
   name: 'MonthPresentation',
   props: {
@@ -59,7 +60,7 @@ export default {
             return parseISO(this.TheDate, "yyyy-MM", new Date())
       },
       theMonth: function () {
-          return format(this.rawDate, "MMM", )
+          return format(this.rawDate, "MMM", {locale: frLocal})
       },
       theYear: function () {
           return format(this.rawDate, "YYY", )

src/store/travail/index.js

@@ -34,6 +34,10 @@ const travail = {
             // Get all the months
             return Object.keys(state.months).sort().reverse()
         },
+        lastMonthDate(state) {
+            // Return the date of the last registered month
+            return Object.keys(state.months).sort().reverse()[0]
+        },
         months: (state, getters) => {
             // Get in range months
             const a = Object.keys(state.months)

src/style.css

@@ -3,7 +3,7 @@ body {
 }
 
 button {
-    color: white;
+    color: black;
     padding: 4px;
     box-shadow: 1px 1px 2px gray;
     text-align: center;
@@ -17,6 +17,8 @@ button {
 }
 
 button:hover {
+    background-color: black;
+    color: white;
     transition: all 0.2s ease-out;
 }