157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<template>
|
|
<div class="account-tab">
|
|
<b-card no-body>
|
|
<b-tabs card>
|
|
<b-tab title="Vue Global">
|
|
<scatter-chart
|
|
v-if="loaded"
|
|
:chartdata="chartData"
|
|
/>
|
|
</b-tab>
|
|
|
|
<b-tab title="Vue detaillé" >
|
|
<div>
|
|
<div class="expense-button-div float-left">
|
|
<b-button variant="success">Ajouter une dépense</b-button>
|
|
<b-button variant="info" v-on:click="showImportExpenses">Importer des dépenses</b-button>
|
|
</div>
|
|
<div class="float-right">
|
|
<b-button variant="light">Partager le compte</b-button></div>
|
|
</div>
|
|
<b-table striped hover bordered :items="expenses" :fields="fields"></b-table>
|
|
</b-tab>
|
|
</b-tabs>
|
|
</b-card>
|
|
<b-modal ref="import-expense" size="lg" centered title="">
|
|
<template #modal-header="{ }">
|
|
</template>
|
|
<template #default="{ }">
|
|
<!-- Styled -->
|
|
<b-form-file
|
|
v-model="file"
|
|
:state="Boolean(file)"
|
|
placeholder="Choose a file or drop it here..."
|
|
drop-placeholder="Drop file here..."
|
|
></b-form-file>
|
|
</template>
|
|
|
|
<template #modal-footer="{ ok, cancel }">
|
|
<b-button size="sm" variant="success" @click="validateFormImportExpenses()">
|
|
Importer
|
|
</b-button>
|
|
<b-button size="sm" variant="danger" @click="cancel()">
|
|
Fermer
|
|
</b-button>
|
|
</template>
|
|
</b-modal>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {BCard, BTabs , BTab, BTable, BFormFile, BModal, BButton} from "bootstrap-vue";
|
|
import {getAnAccount, getExpenses, sendCSVImportExpenses} from "@/service/noscomptes";
|
|
import {formatExpenses} from "@/service/expenses";
|
|
import ScatterChart from './charts/BarChart.vue';
|
|
export default {
|
|
name: 'account',
|
|
data: function () {
|
|
return {
|
|
fields: [
|
|
{
|
|
key: 'expenseDate',
|
|
label: 'Date',
|
|
sortable: true
|
|
},
|
|
{
|
|
key: 'libelle',
|
|
label: 'libelle',
|
|
|
|
},
|
|
{
|
|
key: 'value',
|
|
label: 'Montant',
|
|
sortable: false
|
|
},
|
|
|
|
],
|
|
file: undefined,
|
|
account: {},
|
|
expenses : [{
|
|
expenseDate: "Today",
|
|
libelle:"Test",
|
|
value: 10
|
|
}],
|
|
chartData:{} ,
|
|
loaded: false,
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
let loggedUser = this.$store.state.loggedUser
|
|
getAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
|
|
this.account = data
|
|
})
|
|
getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
|
|
this.expenses = data
|
|
this.chartData = formatExpenses(data)
|
|
this.loaded= true
|
|
})
|
|
|
|
},
|
|
mounted () {
|
|
},
|
|
methods: {
|
|
loadAccount() {
|
|
let loggedUser = this.$store.state.loggedUser
|
|
getAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
|
|
this.account = data
|
|
})
|
|
},
|
|
showImportExpenses() {
|
|
this.$refs['import-expense'].show()
|
|
},
|
|
validateFormImportExpenses() {
|
|
let loggedUser = this.$store.state.loggedUser
|
|
sendCSVImportExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId, this.file)
|
|
.then(()=>{
|
|
this.loaded = false
|
|
getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
|
|
this.expenses = data
|
|
this.chartData = formatExpenses(data)
|
|
this.loaded = true
|
|
})
|
|
|
|
this.$refs['import-expense'].hide()
|
|
})
|
|
|
|
}
|
|
|
|
|
|
},
|
|
components: {
|
|
ScatterChart,
|
|
BCard,
|
|
BTabs,
|
|
BTab,
|
|
BTable,
|
|
BFormFile,
|
|
BModal,
|
|
BButton
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.expense-button-div {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.expense-button-div .btn {
|
|
margin-left: 10px;
|
|
}
|
|
.sr-only {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|