Feat: Date and spending filter

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>