wip

src/components/MesComptes.vue

@@ -12,7 +12,7 @@
             <b-card-text>
               <br>
               </b-card-text>
-            <b-button href="#" variant="success" v-on:click="show" >Ajouter un compte<b-icon-plus-circle-fill style="color:green"></b-icon-plus-circle-fill></b-button>
+            <b-button href="#" variant="success" v-on:click="show()" >Ajouter un compte<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"
@@ -23,12 +23,29 @@
               {{account.name}}
             </b-card-text>
             <b-button href="#" variant="primary" class="see-account" >Voir</b-button>
-            <b-button href="#" variant="danger" >Supprimer </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>
@@ -69,7 +86,7 @@
 
 <script>
 import {BCard, BTabs, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
-import {createAccount, getAccounts} from "@/config/noscomptes";
+import {createAccount, getAccounts, deleteAnAccount} from "@/config/noscomptes";
 export default {
   name: 'mes_comptes',
   data: function () {
@@ -95,6 +112,13 @@ export default {
   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 => {
@@ -120,6 +144,10 @@ export default {
         })
 
     },
+    validateDeleteAccount(accountId) {
+      this.accountIdToDelete = accountId
+      this.$refs['delete-account'].show()
+    },
     show() {
       this.$refs['create-account'].show()
     }

src/config/noscomptes.js

@@ -26,7 +26,24 @@ export const createAccount = (oauthToken, userId, account) => {
         "Authorization": "Bearer " + oauthToken
     };
     return Vue.axios.post("http://localhost:8081/users/"+userId+"/accounts", account, {headers}).then(response => {
-        console.log(response);
+        return response.data
+    })
+}
+
+export const deleteAnAccount = (oauthToken, userId, accountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.delete("http://localhost:8081/users/"+userId+"/accounts/"+accountId, {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const getAnAccount = (oauthToken, userId, accountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts/"+accountId, {headers}).then(response => {
         return response.data
     })
 }