156 lines
4.2 KiB
Vue
156 lines
4.2 KiB
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>
|