add joint account

This commit is contained in:
2022-05-20 00:52:40 +02:00
parent 3ca5a66c19
commit 010e03d522
7 changed files with 59 additions and 222 deletions

View File

@@ -108,9 +108,9 @@
<script> <script>
import {BCard, BTabs, BTable, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormInput} from "bootstrap-vue"; import {BCard, BTabs, BTable, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormInput} from "bootstrap-vue";
import {createJointAccount, getJointAccounts, deleteAnJointAccount} from "@/service/noscomptes"; import {createJointAccount, getJointAccounts, deleteAJointAccount} from "@/service/jointAccount";
export default { export default {
name: 'notre_compte', name: 'joint_account',
data: function () { data: function () {
return { return {
loggedUser: this.$store.state.loggedUser, loggedUser: this.$store.state.loggedUser,
@@ -139,7 +139,7 @@ export default {
methods: { methods: {
deleteJointAccount(){ deleteJointAccount(){
let loggedUser = this.$store.state.loggedUser let loggedUser = this.$store.state.loggedUser
deleteAnJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.jointAccountIdToDelete).then(() => { deleteAJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.jointAccountIdToDelete).then(() => {
this.loadJointAccounts() this.loadJointAccounts()
this.$refs['delete-jointAccount'].hide() this.$refs['delete-jointAccount'].hide()
}) })
@@ -164,6 +164,7 @@ export default {
this.user= "" this.user= ""
}, },
validateForm() { validateForm() {
console.log("toto")
let loggedUser = this.$store.state.loggedUser let loggedUser = this.$store.state.loggedUser
this.nameState= undefined this.nameState= undefined
createJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, {"name": this.name}) createJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, {"name": this.name})

View File

@@ -1,205 +0,0 @@
<template>
<div class="accounts-tab">
<b-card no-body>
<b-tabs card>
<b-tab title="Notre compte" active>
<b-card style="display: inline-block;"
class="mb-2 account-card account-add"
>
<b-card-title>
<br>
</b-card-title>
<b-card-text>
<br>
</b-card-text>
<b-button href="#" variant="success" v-on:click="show()" >Ajouter un compte commun<b-icon-plus-circle-fill style="color:green"></b-icon-plus-circle-fill></b-button>
</b-card>
<b-card style="display: inline-block;" v-for="account in accounts" :key="account.id"
:title=account.name
class="mb-2 account-card"
>
<b-card-text>
{{account.name}}
</b-card-text>
<b-button :href="'/account/'+account.id" variant="primary" class="see-account" >Voir</b-button>
<b-button href="#" variant="danger" v-on:click="validateDeleteAccount(account.id)">Supprimer</b-button>
</b-card>
</b-tab>
</b-tabs>
</b-card>
<b-modal ref="delete-account" size="lg" centered title="">
<template #modal-header="{ }">
</template>
<template #default="{ }">
<p>Etes vous sûr ?</p>
</template>
<template #modal-footer="{ ok, cancel }">
<b-button size="sm" variant="danger" @click="deleteAccount()">
Supprimer
</b-button>
<!-- Button with custom close trigger value -->
<b-button size="sm" variant="outline-secondary" @click="show=cancel()">
Annuler
</b-button>
</template>
</b-modal>
<b-modal ref="create-account" size="lg" centered title="">
<template #modal-header="{ }">
<h5>Ajout d'un compte</h5>
</template>
<template #modal-footer="{ ok, cancel }">
<b-button size="sm" variant="success" @click="validateForm()">
Créer
</b-button>
<b-button size="sm" variant="danger" @click="cancel()">
Fermer
</b-button>
</template>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Name"
label-for="name-input"
invalid-feedback="Le nom du compte est requis"
:state="nameState"
>
<b-form-input
id="name-input"
v-model="name"
:state="nameState"
required
></b-form-input>
</b-form-group>
<b-form-group
label="Banque"
label-for="provider-input"
invalid-feedback="La banque est requise"
:state="nameState">
<b-form-select v-model="provider" :options="options"></b-form-select>
</b-form-group>
</form>
</b-modal>
</div>
</template>
<script>
import {BCard, BTabs, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
import {createAccount, getAccounts, deleteAnAccount} from "@/service/noscomptes";
export default {
name: 'notre_compte',
data: function () {
return {
accounts: [],
nameState: undefined,
name: "",
}
},
beforeCreate() {
let loggedUser = this.$store.state.loggedUser
getAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
// this.$store.commit('userAccounts', data)
this.accounts = data
})
},
mounted () {
},
methods: {
deleteAccount(){
let loggedUser = this.$store.state.loggedUser
deleteAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.accountIdToDelete).then(() => {
this.loadAccounts()
this.$refs['delete-account'].hide()
})
},
loadAccounts() {
let loggedUser = this.$store.state.loggedUser
getAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
// this.$store.commit('userAccounts', data)
this.accounts = data
})
},
validateForm() {
let loggedUser = this.$store.state.loggedUser
this.nameState= undefined
createAccount(loggedUser.oauth_token, loggedUser.nosComptesId, {"name": this.name, "provider": this.provider})
.then(() => {
this.$refs['create-account'].hide();
this.nameState= undefined
this.loadAccounts()
})
.catch(error => {
if (error.response.status != 409) {
this.$refs['create-account'].hide()
} else {
this.nameState= false
}
})
},
validateDeleteAccount(accountId) {
this.accountIdToDelete = accountId
this.$refs['delete-account'].show()
},
show() {
this.$refs['create-account'].show()
}
},
components: {
BCard,
BButton,
BTabs,
BTab,
BCardText,
BCardTitle,
BIconPlusCircleFill,
BModal,
BFormGroup,
BFormSelect,
BFormInput
}
}
</script>
<style>
.accounts-tab {
margin: 2% 1% 0 1%;
box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
-moz-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
-webkit-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
}
.accounts-tab .account-card{
margin: 1% 0% 1% 1%;
width: 20rem;
height: 20rem;
box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
-moz-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
-webkit-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
}
.accounts-tab .account-card a.btn svg{
margin: 0 0 0 10px;
}
.accounts-tab .account-card.account-add a.btn {
background-color: white;
color: black;
border-color: black;
}
.accounts-tab .account-card.account-add:hover {
background-color: green;
}
.accounts-tab .account-card.account-add:hover .card-title, .accounts-tab .account-card.account-add:hover .card-title .bi {
color:white!important;
}
.account-card .card-body {
text-align: center;
align-self: center;
}
.tab-pane.card-body {
margin: 0 1%
}
.see-account {
margin: 0 100px 0 0;
}
</style>

View File

@@ -9,7 +9,7 @@
<script> <script>
import router from '@/router/router' import router from '@/router/router'
import {logWithGoogle, getAccounts, getSharedAccounts} from '@/service/noscomptes' import {logWithGoogle, getAccounts} from '@/service/noscomptes'
export default { export default {
name: 'login_signup_social', name: 'login_signup_social',
mounted () { mounted () {
@@ -36,10 +36,7 @@ export default {
getAccounts(userInfo.oauth_token, userInfo.nosComptesId).then(data => { getAccounts(userInfo.oauth_token, userInfo.nosComptesId).then(data => {
this.$store.commit('userAccounts', data) this.$store.commit('userAccounts', data)
}) })
getSharedAccounts(userInfo.oauth_token, userInfo.nosComptesId).then(data => { router.push('/')
this.$store.commit('userSharedAccounts', data)
})
router.push('/')
}) })
.catch(error => { .catch(error => {
console.log('error', error) console.log('error', error)

View File

@@ -38,7 +38,6 @@ Vue.use(BootstrapVueIcons)
Vue.use(ModalPlugin) Vue.use(ModalPlugin)
Vue.use(FormPlugin) Vue.use(FormPlugin)
Vue.use(FormFilePlugin) Vue.use(FormFilePlugin)
Vue.use(require('vue-moment'));
import VueMoment from 'vue-moment' import VueMoment from 'vue-moment'

View File

@@ -0,0 +1,53 @@
import Vue from 'vue'
export const getJointAccounts = (oauthToken, userId) => {
const headers = {
"Authorization": "Bearer "+oauthToken
};
return Vue.axios.get("http://localhost:8081/users/"+userId+"/jointaccounts", {headers}).then(response => {console.log(response);return response.data})
}
export const createJointAccount = (oauthToken, userId, jointaccount) => {
const headers = {
"Authorization": "Bearer " + oauthToken
};
return Vue.axios.post("http://localhost:8081/users/"+userId+"/jointaccounts", jointaccount, {headers}).then(response => {
return response.data
})
}
export const deleteAJointAccount = (oauthToken, userId, jointaccountId) => {
const headers = {
"Authorization": "Bearer " + oauthToken
};
return Vue.axios.delete("http://localhost:8081/users/"+userId+"/jointaccounts/"+jointaccountId, {headers}).then(response => {
return response.data
})
}
export const getAJointAccount = (oauthToken, userId, jointaccountId) => {
const headers = {
"Authorization": "Bearer " + oauthToken
};
return Vue.axios.get("http://localhost:8081/users/"+userId+"/jointaccounts/"+jointaccountId, {headers}).then(response => {
return response.data
})
}
export const getExpenses = (oauthToken, userId, jointaccountId) => {
const headers = {
"Authorization": "Bearer " + oauthToken
};
return Vue.axios.get("http://localhost:8081/users/"+userId+"/jointaccounts/"+jointaccountId+"/expenses", {headers}).then(response => {
return response.data
})
}
export const getExpensesBetweenDate = (oauthToken, userId, accountId, from, to) => {
const headers = {
"Authorization": "Bearer " + oauthToken
};
return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts/"+accountId+"/expenses?from="+from+"&to="+to, {headers}).then(response => {
return response.data
})
}

View File

@@ -14,13 +14,6 @@ export const getAccounts = (oauthToken, userId) => {
return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts", {headers}).then(response => {console.log(response);return response.data}) return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts", {headers}).then(response => {console.log(response);return response.data})
} }
export const getSharedAccounts = (oauthToken, userId) => {
const headers = {
"Authorization": "Bearer "+oauthToken
};
return Vue.axios.get("http://localhost:8081/users/"+userId+"/sharedaccounts", {headers}).then(response => {console.log(response);return response.data})
}
export const createAccount = (oauthToken, userId, account) => { export const createAccount = (oauthToken, userId, account) => {
const headers = { const headers = {
"Authorization": "Bearer " + oauthToken "Authorization": "Bearer " + oauthToken

View File

@@ -5,7 +5,6 @@
<!-- Right aligned nav items --> <!-- Right aligned nav items -->
<b-navbar-nav> <b-navbar-nav>
<b-nav-item href="/accounts">Mes comptes</b-nav-item> <b-nav-item href="/accounts">Mes comptes</b-nav-item>
<b-nav-item href="#">Nos comptes</b-nav-item>
<b-nav-item href="/jointAccount">Compte joint</b-nav-item> <b-nav-item href="/jointAccount">Compte joint</b-nav-item>
</b-navbar-nav> </b-navbar-nav>
<b-navbar-nav align="end" class="right-element"> <b-navbar-nav align="end" class="right-element">