125 lines
3.2 KiB
Vue
125 lines
3.2 KiB
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" v-model="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" v-model="end"></b-form-input></b-col>
|
|
<b-col sm="3"><label for="spending"> Uniquement les dépenses </label></b-col>
|
|
<b-col sm="1"><b-form-checkbox id="spending" v-model="spending"></b-form-checkbox></b-col>
|
|
</b-row>
|
|
</b-container>
|
|
|
|
<b-card-group deck class="mb-3">
|
|
<box @click.native="set_poste('total')" postename="total" :rows="date_rows"></box>
|
|
<box @click.native="set_poste('cash')" postename="cash" :rows="date_rows"></box>
|
|
<box @click.native="set_poste('CB')" postename="CB" :rows="date_rows"></box>
|
|
<box @click.native="set_poste('other')" postename="other" :rows="date_rows"></box>
|
|
</b-card-group>
|
|
|
|
<b-table striped hover :items="filter_rows" :fields='fields'></b-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import box from '../components/box'
|
|
|
|
var today = new Date()
|
|
var monthAgo = new Date()
|
|
monthAgo.setMonth(monthAgo.getMonth() - 1)
|
|
|
|
export default {
|
|
name: 'home',
|
|
components: {
|
|
box: box
|
|
},
|
|
data () {
|
|
return {
|
|
fields: [
|
|
{
|
|
key: 'Date',
|
|
sortable: true,
|
|
formatter: this.table_date_format
|
|
},
|
|
{
|
|
key: 'Montant',
|
|
sortable: true
|
|
},
|
|
{
|
|
key: 'Libellé',
|
|
sortable: true
|
|
}
|
|
],
|
|
spending: true,
|
|
poste: {},
|
|
start: monthAgo.toISOString().split('T')[0],
|
|
end: today.toISOString().split('T')[0]
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.$store.dispatch('config/load_postes')
|
|
this.$store.dispatch('datas/find_csv')
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
'csvs': 'datas/csvs',
|
|
'rows': 'datas/rows',
|
|
'postes': 'config/postes'
|
|
}),
|
|
date_rows () {
|
|
return this.filter_date(this.filter_spending(this.rows))
|
|
},
|
|
filter_rows () {
|
|
return this.filter_poste(this.date_rows)
|
|
},
|
|
},
|
|
methods: {
|
|
table_date_format (date) {
|
|
return date
|
|
},
|
|
filter_spending (rows) {
|
|
return rows.filter(x => x.Montant < 0)
|
|
},
|
|
filter_date (rows) {
|
|
var start = new Date(this.start)
|
|
var end = new Date(this.end)
|
|
return rows.filter(x => {
|
|
return (new Date(x.Date) >= start) & (new Date(x.Date) < end)
|
|
})
|
|
},
|
|
filter_poste (rows) {
|
|
if (this.poste.words) {
|
|
if (this.poste.invert) {
|
|
return rows.filter(x => {
|
|
return this.poste.words.every(v => {
|
|
return x.Libellé.indexOf(v) < 0
|
|
})
|
|
})
|
|
} else {
|
|
return rows.filter(x => {
|
|
return this.poste.words.some(v => {
|
|
return x.Libellé.indexOf(v) >= 0
|
|
})
|
|
})
|
|
}
|
|
} else {
|
|
return rows
|
|
}
|
|
},
|
|
set_poste (postename) {
|
|
this.poste = this.postes[postename]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.date-selector {
|
|
padding: 1rem;
|
|
}
|
|
|
|
</style>
|