ajout compte joint
This commit is contained in:
241
src/components/JointAccount.vue
Normal file
241
src/components/JointAccount.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="jointAccounts-tab">
|
||||
<b-card no-body>
|
||||
<b-tabs card>
|
||||
<b-tab title="Compte joint" active>
|
||||
<b-card style="display: inline-block;"
|
||||
class="mb-2 jointAccount-card jointAccount-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 joint<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="jointAccount in jointAccounts" :key="jointAccount.id"
|
||||
:title=jointAccount.name
|
||||
class="mb-2 jointAccount-card"
|
||||
>
|
||||
<b-card-text>
|
||||
{{jointAccount.name}}
|
||||
</b-card-text>
|
||||
<b-button :href="'/jointAccount/'+jointAccount.id" variant="primary" class="see-jointAccount" >Voir</b-button>
|
||||
<b-button href="#" variant="danger" v-on:click="validateDeleteJointAccount(jointAccount.id)">Supprimer</b-button>
|
||||
|
||||
</b-card>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-card>
|
||||
<b-modal ref="delete-jointAccount" 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="deleteJointAccount()">
|
||||
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-jointAccount" size="lg" centered title="">
|
||||
<template #modal-header="{ }">
|
||||
<h5>Ajout d'un compte joint</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 joint 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="Name"
|
||||
label-for="name-input"
|
||||
invalid-feedback=""
|
||||
:state="sharedState"
|
||||
>
|
||||
<b-table striped hover bordered :items="sharedUsers" :fields="fields">
|
||||
<template #cell(actions)="row">
|
||||
<b-button v-if="row.item.user != loggedUser.email" size="sm" class="mr-1" variant="danger" @click="removeUser(row.index)">
|
||||
Supprimer
|
||||
</b-button>
|
||||
</template>
|
||||
</b-table>
|
||||
<b-form-group
|
||||
label-for="user-input"
|
||||
invalid-feedback="Veuillez saisir un email valide"
|
||||
:state="userState"
|
||||
>
|
||||
<b-form-input
|
||||
id="user-input"
|
||||
v-model="user"
|
||||
:state="userState"
|
||||
required
|
||||
></b-form-input>
|
||||
<b-button size="sm" class="mr-1" variant="success" @click="addUser()">
|
||||
Ajouter un utilisateur
|
||||
</b-button>
|
||||
</b-form-group>
|
||||
</b-form-group>
|
||||
</form>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {BCard, BTabs, BTable, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormInput} from "bootstrap-vue";
|
||||
import {createJointAccount, getJointAccounts, deleteAnJointAccount} from "@/service/noscomptes";
|
||||
export default {
|
||||
name: 'notre_compte',
|
||||
data: function () {
|
||||
return {
|
||||
loggedUser: this.$store.state.loggedUser,
|
||||
jointAccounts: [],
|
||||
nameState: undefined,
|
||||
sharedState: undefined,
|
||||
userState: undefined,
|
||||
user: "",
|
||||
name: "",
|
||||
sharedUsers: [{"user": this.$store.state.loggedUser.email}],
|
||||
fields: [
|
||||
{ key: 'user', label: 'Utilisateur', sortable: true, sortDirection: 'desc' },
|
||||
{ key: 'actions', label: 'Actions' }
|
||||
],
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
let loggedUser = this.$store.state.loggedUser
|
||||
getJointAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
|
||||
// this.$store.commit('userJointAccounts', data)
|
||||
this.jointAccounts = data
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
deleteJointAccount(){
|
||||
let loggedUser = this.$store.state.loggedUser
|
||||
deleteAnJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.jointAccountIdToDelete).then(() => {
|
||||
this.loadJointAccounts()
|
||||
this.$refs['delete-jointAccount'].hide()
|
||||
})
|
||||
},
|
||||
loadJointAccounts() {
|
||||
let loggedUser = this.$store.state.loggedUser
|
||||
getJointAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
|
||||
// this.$store.commit('userJointAccounts', data)
|
||||
this.jointAccounts = data
|
||||
})
|
||||
},
|
||||
removeUser(userToRemove) {
|
||||
this.sharedUsers = this.sharedUsers.filter((_, index) => index != userToRemove)
|
||||
},
|
||||
addUser() {
|
||||
this.userState = undefined
|
||||
if(this.user == "") {
|
||||
this.userState = false
|
||||
return
|
||||
}
|
||||
this.sharedUsers.push({"user": this.user})
|
||||
this.user= ""
|
||||
},
|
||||
validateForm() {
|
||||
let loggedUser = this.$store.state.loggedUser
|
||||
this.nameState= undefined
|
||||
createJointAccount(loggedUser.oauth_token, loggedUser.nosComptesId, {"name": this.name})
|
||||
.then(() => {
|
||||
this.$refs['create-jointAccount'].hide();
|
||||
this.nameState= undefined
|
||||
this.loadJointAccounts()
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.response.status != 409) {
|
||||
this.$refs['create-jointAccount'].hide()
|
||||
} else {
|
||||
this.nameState= false
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
validateDeleteJointAccount(jointAccountId) {
|
||||
this.jointAccountIdToDelete = jointAccountId
|
||||
this.$refs['delete-jointAccount'].show()
|
||||
},
|
||||
show() {
|
||||
this.$refs['create-jointAccount'].show()
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BCard,
|
||||
BButton,
|
||||
BTabs,
|
||||
BTab,
|
||||
BTable,
|
||||
BCardText,
|
||||
BCardTitle,
|
||||
BIconPlusCircleFill,
|
||||
BModal,
|
||||
BFormGroup,
|
||||
BFormInput
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.jointAccounts-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);
|
||||
}
|
||||
.jointAccounts-tab .jointAccount-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);
|
||||
}
|
||||
.jointAccounts-tab .jointAccount-card a.btn svg{
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.jointAccounts-tab .jointAccount-card.jointAccount-add a.btn {
|
||||
background-color: white;
|
||||
color: black;
|
||||
border-color: black;
|
||||
}
|
||||
.jointAccounts-tab .jointAccount-card.jointAccount-add:hover {
|
||||
background-color: green;
|
||||
}
|
||||
.jointAccounts-tab .jointAccount-card.jointAccount-add:hover .card-title, .jointAccounts-tab .jointAccount-card.jointAccount-add:hover .card-title .bi {
|
||||
color:white!important;
|
||||
}
|
||||
.see-jointAccount {
|
||||
margin: 0 100px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user