comptes/src/views/home.vue

<template>
  <div class="import">
    <h1>Analyse</h1>
    <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="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" :value="end" @input="set_end"></b-form-input>
        </b-col>
      </b-row>
    </b-container>

     <b-card-group deck class="mb-3">
       <box @click.native="set_poste('total')" postename="total"></box>
       <box @click.native="set_poste('cash')" postename="cash"></box>
       <box @click.native="set_poste('CB')" postename="CB"></box>
       <box @click.native="set_poste('other')" postename="other"></box>
     </b-card-group>

     <postes-comparison></postes-comparison>

    <b-table striped hover :items="filtered_rows(poste.words, poste.invert)" :fields='fields'>
      <template slot="tags" slot-scope="data">
        <div v-for="tag in data.item.tags">
          <div v-if="tag.name !== 'Tout'">
            <font-awesome-icon :icon="tag.icon" class="fa"/>
          </div>
        </div>
      </template>
    </b-table>

  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import box from '../components/box'
import postesComparison from '../components/postes_comparison'

export default {
  name: 'home',
  components: {
    box: box,
    postesComparison: postesComparison
  },
  data () {
    return {
      fields: [
        {
          key: 'Date',
          sortable: true,
          formatter: this.table_date_format
        },
        {
          key: 'Montant',
          sortable: true
        },
        {
          key: 'Libellé',
          sortable: true
        },
        {
          key: 'tags',
          sortable: true
        }
      ],
      poste: {}
    }
  },
  mounted: function () {
    this.$store.dispatch('config/load')
    this.$store.dispatch('datas/find_csv')
  },
  computed: {
    ...mapGetters({
      'csvs': 'datas/csvs',
      'filtered_rows': 'datas/libelle_filter_rows',
      'start': 'datas/start',
      'end': 'datas/end',
      'postes': 'config/postes'
    })
  },
  methods: {
    ...mapActions('datas', [
      'set_start',
      'set_end'
    ]),
    update_start (e) {
    },
    table_date_format (date) {
      return date
    },
    set_poste (postename) {
      this.poste = this.postes[postename]
    }
  }
}
</script>

<style scoped>
.date-selector {
    padding: 1rem;
}

</style>