comptes/src/views/home.vue

<template>
  <div class="import">
    <h1>Analyse</h1>
    <div class="analysis" v-if="datas_present">
      <b-container fluid>
        <b-row class="date-selector">
            <b-button @click="prev_month" variant="link">
                <font-awesome-icon icon="angle-left" class="fa" />
            </b-button>
            <span class="text-muted btn" disabled="true">
            {{ month.format('MMMM YYYY') }}
            </span>
            <b-button @click="next_month" variant="link">
                <font-awesome-icon icon="angle-right" class="fa" />
            </b-button>
        </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" :key="tag.name">
            <div v-if="tag.name !== 'Tout'">
              <font-awesome-icon :icon="tag.icon" class="fa"/>
            </div>
          </div>
        </template>
      </b-table>
    </div>
    <div v-else>
      <div class="nodata">
        <h1>
        <font-awesome-icon icon="dizzy" class="fa"/>
          Pas de données
          <font-awesome-icon icon="dizzy" class="fa"/>
        </h1>
        <p>
          Penser à en importer!
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import box from '../components/box'
import tagsComparison from '../components/tags_comparison'
import moment from 'moment'

moment.locale('fr')

export default {
  name: 'home',
  components: {
    box: box,
    tagsComparison: tagsComparison
  },
  data () {
    return {
      fields: [
        {
          key: 'Date',
          sortable: true,
          formatter: d => d.format('DD/MM/YYYY')
        },
        {
          key: 'Montant',
          sortable: true
        },
        {
          key: 'Libellé',
          sortable: true
        },
        {
          key: 'tags'
        }
      ],
      default_tag: {
        name: 'Tout',
        variant: 'info',
        icon: 'file-invoice-dollar'
      },
      tags_filter: []
    }
  },
  computed: {
    ...mapGetters({
      'csvs': 'datas/csvs',
      'tag_filter_rows': 'datas/tag_filter_rows',
      'datas_present': 'datas/present',
      'month': 'datas/month',
      'tags': 'config/tags'
    }),
    filtered_rows () {
      return this.tag_filter_rows(this.tags_filter)
    },
  },
  methods: {
    ...mapActions('datas', [
      'next_month',
      'prev_month',
    ]),
    set_tags_filter (tagnames) {
      this.tags_filter = tagnames
    },
  }
}
</script>

<style scoped>
.date-selector {
  padding: 1rem;
}
.nodata{
  text-align: center;
}

</style>