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_tags_filter([])"></box>
       <box @click.native="set_tags_filter(['cash'])" tagname="cash"></box>
       <box @click.native="set_tags_filter(['CB'])" tagname="CB"></box>
       <box @click.native="set_tags_filter(['virements'])" tagname="virements"></box>
     </b-card-group>

     <tags-comparison></tags-comparison>

    <b-table striped hover :items="filtered_rows" :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 tagsComparison from '../components/tags_comparison'

export default {
  name: 'home',
  components: {
    box: box,
    tagsComparison: tagsComparison
  },
  data () {
    return {
      fields: [
        {
          key: 'Date',
          sortable: true,
          formatter: this.table_date_format
        },
        {
          key: 'Montant',
          sortable: true
        },
        {
          key: 'Libellé',
          sortable: true
        },
        {
          key: 'tags',
        }
      ],
      default_tag: {
        name: 'Tout',
        variant: 'info',
        icon: 'file-invoice-dollar'
      },
      tags_filter: []
    }
  },
  mounted: function () {
    this.$store.dispatch('config/load')
    this.$store.dispatch('datas/find_csv')
  },
  computed: {
    ...mapGetters({
      'csvs': 'datas/csvs',
      'tag_filter_rows': 'datas/tag_filter_rows',
      'start': 'datas/start',
      'end': 'datas/end',
      'tags': 'config/tags'
    }),
    filtered_rows () {
      return this.tag_filter_rows(this.tags_filter)
    }

  },
  methods: {
    ...mapActions('datas', [
      'set_start',
      'set_end'
    ]),
    update_start (e) {
    },
    table_date_format (date) {
      return date
    },
    set_tags_filter (tagnames) {
      this.tags_filter = tagnames
    }
  }
}
</script>

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

</style>