93 lines
2.1 KiB
Vue
93 lines
2.1 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" :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_poste('total')" postename="total"></box>
|
|
<box @click.native="set_poste('cash')" postename="cash"></box>
|
|
<box @click.native="set_poste('CB')" postename="CB"></box>
|
|
<box @click.native="set_poste('other')" postename="other"></box>
|
|
</b-card-group>
|
|
|
|
<b-table striped hover :items="filtered_rows(poste.words, poste.invert)" :fields='fields'></b-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
import box from '../components/box'
|
|
|
|
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
|
|
}
|
|
],
|
|
poste: {}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.$store.dispatch('config/load')
|
|
this.$store.dispatch('datas/find_csv')
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
'csvs': 'datas/csvs',
|
|
'filtered_rows': 'datas/libelle_filter_rows',
|
|
'start': 'datas/start',
|
|
'end': 'datas/end',
|
|
'postes': 'config/postes'
|
|
})
|
|
},
|
|
methods: {
|
|
...mapActions('datas', [
|
|
'set_start',
|
|
'set_end'
|
|
]),
|
|
update_start (e) {
|
|
},
|
|
table_date_format (date) {
|
|
return date
|
|
},
|
|
set_poste (postename) {
|
|
this.poste = this.postes[postename]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.date-selector {
|
|
padding: 1rem;
|
|
}
|
|
|
|
</style>
|