Refact: Move date filtering into component

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>