Feat: Select poste on clicking

src/components/box.vue

@@ -1,13 +1,17 @@
 <template>
-  <b-card :bg-variant="poste.variant"
+  <b-card v-if="poste"
+          :bg-variant="poste.variant"
           text-variant="white"
           class="text-center">
-    <p class="card-text">
-      <font-awesome-icon :icon="poste.icon" />
-      {{ poste.name }}
-      </br>
-      {{ total() }}€
-    </p>
+    <div class="card-text">
+        <div class="icon">
+          <font-awesome-icon :icon="poste.icon" class="fa-3x"/>
+        </div>
+        <div class="amount">
+          <h3>{{ total() }}€</h3>
+          {{ poste.name }}
+        </div>
+    </div>
   </b-card>
 </template>
 
@@ -21,11 +25,6 @@ export default {
   ],
   data () {
     return {
-      empty_poste: {
-        variant: '',
-        icon: '',
-        name: ''
-      }
     }
   },
   computed: {
@@ -33,11 +32,7 @@ export default {
       'postes'
     ]),
     poste () {
-      if (this.postes) {
-        return this.postes[this.postename]
-      } else {
-        return this.empty_poste
-      }
+      return this.postes[this.postename]
     }
   },
   methods: {
@@ -75,4 +70,18 @@ export default {
 </script>
 
 <style scoped>
+.card-body {
+  padding: 10px;
+}
+.card-text {
+  display: flex;
+}
+.icon {
+  flex: 40%;
+}
+.amount {
+  flex: 50%;
+  text-align: right;
+  margin-left: 10px;
+}
 </style>

src/store/modules/config.js

@@ -6,6 +6,7 @@ export default {
   namespaced: true,
   state: {
     data_dir: '/home/lafrite/scripts/comptes/data/',
+    config_dir: '/home/lafrite/scripts/comptes/config/',
     postes_filename: 'postes.yml',
     postes: {}
   },
@@ -13,6 +14,9 @@ export default {
     data_dir: (state) => {
       return state.data_dir
     },
+    config_dir: (state) => {
+      return state.config_dir
+    },
     postes_filename: (state) => {
       return state.postes_filename
     },
@@ -27,7 +31,7 @@ export default {
   },
   actions: {
     async load_postes (context) {
-      readFile(path.join(context.getters.data_dir, context.getters.postes_filename), 'utf8', (err, content) => {
+      readFile(path.join(context.getters.config_dir, context.getters.postes_filename), 'utf8', (err, content) => {
         if (err) {
           console.log(err)
         } else {

src/store/modules/datas.js

@@ -26,6 +26,7 @@ export default {
       state.csv_files = csvs
     },
     SET_DATA: (state, { data }) => {
+      data.data = data.data.filter(x => x.Libellé != undefined)
       state.rows = data
     },
     APPEND_DATA: (state, { content }) => {

src/views/home.vue

@@ -13,10 +13,10 @@
     </b-container>
 
      <b-card-group deck class="mb-3">
-       <box postename="total" :rows="filter_rows"></box>
-       <box postename="cash" :rows="filter_rows"></box>
-       <box postename="CB" :rows="filter_rows"></box>
-       <box postename="other" :rows="filter_rows"></box>
+       <box @click.native="set_poste('total')" postename="total" :rows="date_rows"></box>
+       <box @click.native="set_poste('cash')" postename="cash" :rows="date_rows"></box>
+       <box @click.native="set_poste('CB')" postename="CB" :rows="date_rows"></box>
+       <box @click.native="set_poste('other')" postename="other" :rows="date_rows"></box>
      </b-card-group>
 
     <b-table striped hover :items="filter_rows" :fields='fields'></b-table>
@@ -54,6 +54,7 @@ export default {
         }
       ],
       spending: true,
+      poste: {},
       start: monthAgo.toISOString().split('T')[0],
       end: today.toISOString().split('T')[0]
     }
@@ -68,20 +69,19 @@ export default {
       'rows': 'datas/rows',
       'postes': 'config/postes'
     }),
-    filter_rows () {
+    date_rows () {
       return this.filter_date(this.filter_spending(this.rows))
-    }
+    },
+    filter_rows () {
+      return this.filter_poste(this.date_rows)
+    },
   },
   methods: {
     table_date_format (date) {
       return date
     },
     filter_spending (rows) {
-      if (this.spending) {
-        return rows.filter(x => x.Montant < 0)
-      } else {
-        return rows
-      }
+      return rows.filter(x => x.Montant < 0)
     },
     filter_date (rows) {
       var start = new Date(this.start)
@@ -89,6 +89,28 @@ export default {
       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]
     }
   }
 }