Feat(home): month selector

src/store/modules/datas.js

@@ -9,20 +9,21 @@ export default {
   namespaced: true,
   state: {
     csv: {},
-    start: moment().subtract(1, 'months'),
-    end: moment()
+    month: moment(),
   },
   getters: {
     csvs: (state) => {
       // return array of csv filename
       return Object.values(state.csv).sort((a, b) => {
-        var filenameA=a.filename.toLowerCase(), filenameB=b.filename.toLowerCase();
-        if (filenameA < filenameB) //sort string ascending
-          return -1;
-        if (filenameA > filenameB)
-          return 1;
-        return 0; //default return value (no sorting)
-      });
+        var filenameA=a.filename.toLowerCase(), filenameB=b.filename.toLowerCase()
+        if (filenameA < filenameB) {
+          return -1
+        }
+        if (filenameA > filenameB) {
+          return 1
+        }
+        return 0 
+      })
     },
     rows: (state) => {
       // return all data stored in csv deleting duplicates rows
@@ -46,18 +47,14 @@ export default {
       // return data with negatives 'Montant'
       return getters.rows.filter(x => x.Montant < 0)
     },
-    start: (state) => {
-      // Start date
-      return state.start.format(moment.HTML5_FMT.DATE)
-    },
-    end: (state) => {
-      // End date
-      return state.end.format(moment.HTML5_FMT.DATE)
+    month: (state) => {
+      // month date
+      return state.month
     },
     date_filter_rows: (state, getters) => {
       // return rows filtered by date
       return getters.spending_rows.filter(x => {
-        return (x.Date >= state.start) & (x.Date < state.end)
+        return moment(x.Date).isSame(state.month, 'month')
       })
     },
     tag_filter_rows: (state, getters) => (tags, invert) => {
@@ -111,11 +108,8 @@ export default {
     SET_DATA: (state, { filename, data }) => {
       Vue.set(state.csv, filename, data)
     },
-    SET_START: (state, { start }) => {
-      state.start = start
-    },
-    SET_END: (state, { end }) => {
-      state.end = end
+    SET_MONTH: (state, { month }) => {
+      state.month = month
     }
   },
   actions: {
@@ -171,11 +165,13 @@ export default {
         { filename: filename, data: parsed }
       )
     },
-    set_start (context, start) {
-      context.commit('SET_START', { start: moment(start) })
+    next_month (context) {
+      var next = moment(context.getters.month).add(1, 'months')
+      context.commit('SET_MONTH', { month: next })
+    },
+    prev_month (context) {
+      var prev = moment(context.getters.month).subtract(1, 'months')
+      context.commit('SET_MONTH', { month: prev })
     },
-    set_end (context, end) {
-      context.commit('SET_END', { end: moment(end) })
-    }
   }
 }

src/views/home.vue

@@ -4,17 +4,15 @@
     <div class="analysis" v-if="datas_present">
       <b-container fluid>
         <b-row class="date-selector">
-          <b-form-input type="month" value="2018-12" @input="set_month"></b-form-input>
-          <!--
-          <b-col sm="1"><label for="start"> Entre </label> </b-col>
-          <b-col sm="3">
-            <b-form-input id="start" type="date" :value="start" @input="set_start"></b-form-input>
-          </b-col>
-          <b-col sm="1"><label for="end"> et </label></b-col>
-          <b-col sm="3">
-            <b-form-input id="end" type="date" :value="end" @input="set_end"></b-form-input>
-          </b-col>
-          -->
+            <b-button @click="prev_month" variant="link">
+                <font-awesome-icon icon="angle-left" class="fa" />
+            </b-button>
+            <span class="text-muted btn" disabled="true">
+            {{ month.format('MMMM YYYY') }}
+            </span>
+            <b-button @click="next_month" variant="link">
+                <font-awesome-icon icon="angle-right" class="fa" />
+            </b-button>
         </b-row>
       </b-container>
 
@@ -58,6 +56,8 @@ import box from '../components/box'
 import tagsComparison from '../components/tags_comparison'
 import moment from 'moment'
 
+moment.locale('fr')
+
 export default {
   name: 'home',
   components: {
@@ -97,27 +97,21 @@ export default {
       'csvs': 'datas/csvs',
       'tag_filter_rows': 'datas/tag_filter_rows',
       'datas_present': 'datas/present',
-      'start': 'datas/start',
-      'end': 'datas/end',
+      'month': 'datas/month',
       'tags': 'config/tags'
     }),
     filtered_rows () {
       return this.tag_filter_rows(this.tags_filter)
-    }
-
+    },
   },
   methods: {
     ...mapActions('datas', [
-      'set_start',
-      'set_end'
+      'next_month',
+      'prev_month',
     ]),
     set_tags_filter (tagnames) {
       this.tags_filter = tagnames
     },
-    set_month (month) {
-      this.set_start(moment(month).startOf("month").toDate())
-      this.set_end(moment(month).endOf("month").toDate())
-    }
   }
 }
 </script>