Refact: Move back filtering in store

src/components/box.vue

@@ -31,29 +31,16 @@ export default {
     ...mapGetters('config', [
       'postes'
     ]),
+    ...mapGetters('datas', [
+      'libelle_filter_rows'
+    ]),
     poste () {
       return this.postes[this.postename]
     }
   },
   methods: {
     filter_rows () {
-      if (this.poste.words) {
+      return this.libelle_filter_rows(this.poste.words, this.poste.invert)
-        if (this.poste.invert) {
-          return this.rows.filter(x => {
-            return this.poste.words.every(v => {
-              return x.Libellé.indexOf(v) < 0
-            })
-          })
-        } else {
-          return this.rows.filter(x => {
-            return this.poste.words.some(v => {
-              return x.Libellé.indexOf(v) >= 0
-            })
-          })
-        }
-      } else {
-        return this.rows
-      }
     },
     total () {
       return Math.round(
@@ -78,6 +65,7 @@ export default {
 }
 .icon {
   flex: 40%;
+  align-self: center;
 }
 .amount {
   flex: 50%;

src/store/modules/datas.js

@@ -2,6 +2,10 @@ 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: {
@@ -12,6 +16,8 @@ export default {
         fields: []
       }
     },
+    start: monthAgo.toISOString().split('T')[0],
+    end: today.toISOString().split('T')[0]
   },
   getters: {
     csvs: (state) => {
@@ -19,6 +25,40 @@ export default {
     },
     rows: (state) => {
       return state.rows.data
+    },
+    spending_rows: (state, getters) => {
+      return getters.rows.filter(x => x.Montant < 0)
+    },
+    start: (state) => {
+      return state.start
+    },
+    end: (state) => {
+      return state.end
+    },
+    date_filter_rows: (state, getters) => {
+      var start = new Date(state.start)
+      var end = new Date(state.end)
+      return getters.spending_rows.filter(x => {
+        return (new Date(x.Date) >= start) & (new Date(x.Date) < end)
+      })
+    },
+    libelle_filter_rows: (state, getters) => (words, invert) => {
+      if (!words) {
+        return getters.date_filter_rows
+      }
+      if (invert) {
+        return getters.date_filter_rows.filter(x => {
+          return words.every(v => {
+            return x.Libellé.indexOf(v) < 0
+          })
+        })
+      } else {
+        return getters.date_filter_rows.filter(x => {
+          return words.some(v => {
+            return x.Libellé.indexOf(v) >= 0
+          })
+        })
+      }
     }
   },
   mutations: {
@@ -31,6 +71,12 @@ export default {
     },
     APPEND_DATA: (state, { content }) => {
       state.rows.push(content)
+    },
+    SET_START: (state, { start }) => {
+      state.start = start
+    },
+    SET_END: (state, { end }) => {
+      state.end = end
     }
   },
   actions: {
@@ -65,6 +111,12 @@ export default {
           context.commit('SET_DATA', { data: parsed })
         }
       })
-    }
+    },
+    set_start (context, start) {
+      context.commit('SET_START', { start })
+    },
+    set_end (context, end) {
+      context.commit('SET_END', { end })
+    },
   }
 }

src/views/home.vue

@@ -4,33 +4,31 @@
     <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" v-model="start"></b-form-input></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" v-model="end"></b-form-input></b-col>
+        <b-col sm="3">
-        <b-col sm="3"><label for="spending"> Uniquement les dépenses </label></b-col>
+          <b-form-input id="end" type="date" :value="end" @input="set_end"></b-form-input>
-        <b-col sm="1"><b-form-checkbox id="spending" v-model="spending"></b-form-checkbox></b-col>
+        </b-col>
       </b-row>
     </b-container>
 
      <b-card-group deck class="mb-3">
-       <box @click.native="set_poste('total')" postename="total" :rows="date_rows"></box>
+       <box @click.native="set_poste('total')" postename="total"></box>
-       <box @click.native="set_poste('cash')" postename="cash" :rows="date_rows"></box>
+       <box @click.native="set_poste('cash')" postename="cash"></box>
-       <box @click.native="set_poste('CB')" postename="CB" :rows="date_rows"></box>
+       <box @click.native="set_poste('CB')" postename="CB"></box>
-       <box @click.native="set_poste('other')" postename="other" :rows="date_rows"></box>
+       <box @click.native="set_poste('other')" postename="other"></box>
      </b-card-group>
 
-    <b-table striped hover :items="filter_rows" :fields='fields'></b-table>
+    <b-table striped hover :items="filtered_rows(poste.words, poste.invert)" :fields='fields'></b-table>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import box from '../components/box'
 
-var today = new Date()
-var monthAgo = new Date()
-monthAgo.setMonth(monthAgo.getMonth() - 1)
-
 export default {
   name: 'home',
   components: {
@@ -53,10 +51,7 @@ export default {
           sortable: true
         }
       ],
-      spending: true,
       poste: {},
-      start: monthAgo.toISOString().split('T')[0],
-      end: today.toISOString().split('T')[0]
     }
   },
   mounted: function () {
@@ -66,49 +61,22 @@ export default {
   computed: {
     ...mapGetters({
       'csvs': 'datas/csvs',
-      'rows': 'datas/rows',
+      'filtered_rows': 'datas/libelle_filter_rows',
+      'start': 'datas/start',
+      'end': 'datas/end',
       'postes': 'config/postes'
     }),
-    date_rows () {
-      return this.filter_date(this.filter_spending(this.rows))
-    },
-    filter_rows () {
-      return this.filter_poste(this.date_rows)
-    },
   },
   methods: {
+    ...mapActions('datas', [
+      'set_start',
+      'set_end'
+    ]),
+    update_start (e) {
+    },
     table_date_format (date) {
       return date
     },
-    filter_spending (rows) {
-      return rows.filter(x => x.Montant < 0)
-    },
-    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)
-      })
-    },
-    filter_poste (rows) {
-      if (this.poste.words) {
-        if (this.poste.invert) {
-          return rows.filter(x => {
-            return this.poste.words.every(v => {
-              return x.Libellé.indexOf(v) < 0
-            })
-          })
-        } else {
-          return rows.filter(x => {
-            return this.poste.words.some(v => {
-              return x.Libellé.indexOf(v) >= 0
-            })
-          })
-        }
-      } else {
-        return rows
-      }
-    },
     set_poste (postename) {
       this.poste = this.postes[postename]
     }