comptes/src/views/home.vue

<template>
  <div class="import">
    <h1>Analyse</h1>
    <div class="analysis" v-if="datas_present">
        <h2> Sur le temps </h2>
        <graph-time></graph-time>

        <h2> Par mois</h2>
        <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">
            <div v-for="categorie in categories">
                <card-categorie @click.native="set_categories_filter([categorie.name])" :categoriename="categorie.name"></card-categorie>
            </div>
        </b-card-group>

        <tags-comparison></tags-comparison>

        <b-table striped hover :items="filtered_rows" :fields='fields'>
            <template slot="tags" slot-scope="data">
                <div v-if="data.item.tags.length > 0">
                    <div v-for="tag in data.item.tags" :key="tag.name">
                        <font-awesome-icon :icon="tag.icon" class="fa"/>
                    </div>
                </div>
                <div v-else>
                    <b-btn v-b-modal="data.item.Libellé">
                        <font-awesome-icon icon="plus" class="fa"/>
                    </b-btn>

                    <!-- Modal Component -->
                    <b-modal :id="data.item.Libellé" 
                      title="Tag pour le mot clé"
                      hide-footer
                      >
                      <associate-tag-keyword
                        :libelle="data.item.Libellé">
                      </associate-tag-keyword>
                    </b-modal>
                </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 cardCategorie from '../components/card_categorie'
import tagsComparison from '../components/graph_tags_comparison'
import graphTime from '../components/graph_time'
import associateTagKeyword from '../components/associate_tag_keyword'
import moment from 'moment'

moment.locale('fr')

export default {
  name: 'home',
  components: {
    cardCategorie: cardCategorie,
    tagsComparison: tagsComparison,
    graphTime: graphTime,
    associateTagKeyword: associateTagKeyword
  },
  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'
      },
      categories_filter: [],
      keyword: ''
    }
  },
  computed: {
    ...mapGetters({
      'csvs': 'datas/csvs',
      'categorie_filter_rows': 'datas/categorie_filter_rows',
      'datas_present': 'datas/present',
      'month': 'datas/month',
      'months': 'datas/months',
      'tags': 'config/tags',
      'categories': 'config/categories'
    }),
    filtered_rows () {
      return this.categorie_filter_rows(this.categories_filter)
    }
  },
  methods: {
    ...mapActions('datas', [
      'next_month',
      'prev_month'
    ]),
    set_categories_filter (categorienames) {
      this.categories_filter = categorienames
    },
    showModal (name) {
        console.log(name)
    }
  }
}
</script>

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

</style>