Feat: Date and spending filter

src/store/modules/config.js

@@ -1,13 +1,19 @@
+import Vue from 'vue'
 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: {
     data_dir: '/home/lafrite/scripts/comptes/data/',
     csv_files: [],
-    datas: {}
+    rows: {},
+    dates_boundaries: [monthAgo, today]
   },
   getters: {
     data_dir: (state) => {
@@ -16,19 +22,38 @@ export default {
     csvs: (state) => {
       return state.csv_files
     },
-    datas: (state) => {
+    rows: (state) => {
-      return state.datas
+      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 }) => {
       state.csv_files = csvs
     },
     SET_DATA: (state, { data }) => {
-      state.datas = data
+      state.rows = data
     },
     APPEND_DATA: (state, { content }) => {
-      state.datas.push(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: {
@@ -56,13 +81,19 @@ export default {
         if (err) {
           console.log(err)
         } else {
-          var parse_config = {
+          var parseConfig = {
             header: true
           }
-          var parsed = Papa.parse(content, parse_config)
+          var parsed = Papa.parse(content, parseConfig)
           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/analysis.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="import">
     <h1>Analyse</h1>
-    <b-table striped hover :items="datas.data"></b-table>
+    <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="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"><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>
+    </b-container>
+
+    <b-table striped hover :items="filter_rows" :fields='fields'></b-table>
   </div>
 </template>
 
@@ -14,6 +25,21 @@ export default {
   },
   data () {
     return {
+      fields: [
+        {
+          key: 'Date',
+          sortable: true
+        },
+        {
+          key: 'Montant',
+          sortable: true
+        },
+        {
+          key: 'Libellé',
+          sortable: true
+        }
+    ],
+      spending: true
     }
   },
   mounted: function () {
@@ -23,10 +49,37 @@ export default {
     ...mapGetters({
       'csvs': 'config/csvs',
       'data_dir': 'config/data_dir',
-      'datas': 'config/datas'
+      'rows': 'config/filter_rows',
-    })
+      'date': 'config/dates_boundaries'
+    }),
+    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
+      }
+    }
   },
   methods: {
+    update_date_start (e) {
+      this.$store.dispatch('config/set_start_date', e)
+    },
+    update_date_end (e) {
+      this.$store.dispatch('config/set_end_date', e)
+    },
   }
 }
 </script>
+
+<style scoped>
+.date-selector {
+    padding: 1rem;
+}
+
+</style>