Refact: Move date filtering into component

src/store/modules/datas.js

@@ -3,16 +3,16 @@ import { readdir, readFile } from 'fs'
 import path from 'path'
 import Papa from 'papaparse'
 
-var today = new Date()
-var monthAgo = new Date()
-monthAgo.setMonth(monthAgo.getMonth() - 1)
-
 export default {
   namespaced: true,
   state: {
     csv_files: [],
-    rows: {},
-    dates_boundaries: [monthAgo, today]
+    rows: {
+      data: [],
+      meta: {
+        fields: []
+      }
+    },
   },
   getters: {
     csvs: (state) => {
@@ -20,20 +20,7 @@ export default {
     },
     rows: (state) => {
       return state.rows.data
-    },
-    dates_boundaries: (state) => {
-      return state.dates_boundaries.map(x => x.toISOString().split('T')[0])
-    },
-    filter_rows: (state, getters) => {
-      if (state.rows.data) {
-        return state.rows.data.filter(x => {
-          return (new Date(x.Date) >= state.dates_boundaries[0]) & (new Date(x.Date) < state.dates_boundaries[1])
-        })
-      } else {
-        return []
-      }
     }
-    
   },
   mutations: {
     SET_CSV_FILES: (state, { csvs }) => {
@@ -44,12 +31,6 @@ export default {
     },
     APPEND_DATA: (state, { content }) => {
       state.rows.push(content)
-    },
-    SET_START_DATE: (state, { start }) => {
-      Vue.set(state.dates_boundaries, 0, new Date(start))
-    },
-    SET_END_DATE: (state, { end }) => {
-      Vue.set(state.dates_boundaries, 1, new Date(end))
     }
   },
   actions: {
@@ -84,12 +65,6 @@ export default {
           context.commit('SET_DATA', { data: parsed })
         }
       })
-    },
-    set_start_date (context, start) {
-      context.commit('SET_START_DATE', { start })
-    },
-    set_end_date (context, end) {
-      context.commit('SET_END_DATE', { end })
     }
   }
 }

src/views/home.vue

@@ -4,9 +4,9 @@
     <b-container fluid>
       <b-row class="date-selector">
         <b-col sm="1"><label for="start"> Entre </label> </b-col>
-        <b-col sm="3"><b-form-input id="start" type="date" :value="date_start" @input="update_date_start"></b-form-input></b-col>
+        <b-col sm="3"><b-form-input id="start" type="date" v-model="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="date_end" @input="update_date_end"></b-form-input></b-col>
+        <b-col sm="3"><b-form-input id="end" type="date" v-model="end"></b-form-input></b-col>
         <b-col sm="3"><label for="spending"> Uniquement les dépenses </label></b-col>
         <b-col sm="1"><b-form-checkbox id="spending" v-model="spending"></b-form-checkbox></b-col>
       </b-row>
@@ -19,6 +19,10 @@
 <script>
 import { mapGetters } from 'vuex'
 
+var today = new Date()
+var monthAgo = new Date()
+monthAgo.setMonth(monthAgo.getMonth() - 1)
+
 export default {
   name: 'home',
   components: {
@@ -28,7 +32,8 @@ export default {
       fields: [
         {
           key: 'Date',
-          sortable: true
+          sortable: true,
+          formatter: this.table_date_format
         },
         {
           key: 'Montant',
@@ -39,7 +44,9 @@ export default {
           sortable: true
         }
       ],
-      spending: true
+      spending: true,
+      start: monthAgo.toISOString().split('T')[0],
+      end: today.toISOString().split('T')[0]
     }
   },
   mounted: function () {
@@ -48,30 +55,30 @@ export default {
   computed: {
     ...mapGetters({
       'csvs': 'datas/csvs',
-      'rows': 'datas/filter_rows',
-      'date': 'datas/dates_boundaries'
+      'rows': 'datas/rows'
     }),
-    date_start () {
-      return this.date[0]
-    },
-    date_end () {
-      return this.date[1]
-    },
     filter_rows () {
-      if (this.spending) {
-        return this.rows.filter(x => x.Montant < 0)
-      } else {
-        return this.rows
-      }
+      return this.filter_date(this.filter_spending(this.rows))
     }
   },
   methods: {
-    update_date_start (e) {
-      this.$store.dispatch('datas/set_start_date', e)
+    table_date_format (date) {
+      return date
     },
-    update_date_end (e) {
-      this.$store.dispatch('datas/set_end_date', e)
+    filter_spending (rows) {
+      if (this.spending) {
+        return rows.filter(x => x.Montant < 0)
+      } else {
+        return rows
+      }
     },
+    filter_date (rows) {
+      var start = new Date(this.start)
+      var end = new Date(this.end)
+      return rows.filter(x => {
+        return (new Date(x.Date) >= start) & (new Date(x.Date) < end)
+      })
+    }
   }
 }
 </script>