feat(accounts): handle display

src/components/MesComptes.vue

@@ -3,25 +3,28 @@
     <b-card no-body>
       <b-tabs card>
         <b-tab title="Mes comptes" active>
-          <b-card @click="show('modal-1')"
-                  class="mb-2 account-card account-add d-flex flex-row"
+          <b-card style="display: inline-block;"
+                  class="mb-2 account-card account-add"
           >
-
-            <b-card-title class="p-2">
-              Ajouter un compte
-              <b-icon-plus-circle-fill style="color:green"></b-icon-plus-circle-fill>
+            <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<b-icon-plus-circle-fill style="color:green"></b-icon-plus-circle-fill></b-button>
 
           </b-card>
-          <b-card v-for="account in accounts" :key="account.name"
+          <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="#" variant="primary" class="see-account" >Voir</b-button>
+            <b-button href="#" variant="danger" >Supprimer </b-button>
 
-            <b-button href="#" variant="primary" :header-bg-variant="dark" >Voir mon compte</b-button>
           </b-card>
         </b-tab>
       </b-tabs>
@@ -65,14 +68,16 @@
 </template>
 
 <script>
-import {BCard, BTabs, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
+import {BCard, BTabs, BButton, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
 import {createAccount, getAccounts} from "@/config/noscomptes";
 export default {
   name: 'mes_comptes',
   data: function () {
     return {
       accounts: [],
+      nameState: undefined,
       name: "",
+      provider: "",
       options: [
         { value: 'caisse-epargne', text: 'Caisse Epargne' },
         { value: 'bnp', text: 'BNP Paribas' },
@@ -83,16 +88,37 @@ export default {
   beforeCreate() {
     let loggedUser = this.$store.state.loggedUser
     getAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
-      this.$store.commit('userAccounts', data)
+      // this.$store.commit('userAccounts', data)
+      this.accounts = data
     })
   },
   mounted () {
   },
   methods: {
+    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())
+        .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
+        }
+        })
+
     },
     show() {
       this.$refs['create-account'].show()
@@ -100,6 +126,7 @@ export default {
   },
   components: {
     BCard,
+    BButton,
     BTabs,
     BTab,
     BCardText,
@@ -115,18 +142,27 @@ export default {
 
 <style>
 .accounts-tab {
-  margin: 2% 3% 0 3%;
+  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;
 }
@@ -137,4 +173,11 @@ export default {
   text-align: center;
   align-self: center;
 }
+.tab-pane.card-body {
+  margin: 0 1%
+}
+.see-account {
+  margin: 0 100px 0 0;
+}
 </style>
+

src/store/store.js

@@ -6,10 +6,12 @@ import {removeItem} from "../config/utils";
 Vue.use(Vuex)
 
 const user = getStore('user')
+//const accounts = getStore('accounts')
 
 export default new Vuex.Store({
   state: {
-    loggedUser: user
+    loggedUser: user,
+    userAccounts: [],
   },
   mutations: {
     setLoginUser(state, user) {
@@ -19,7 +21,11 @@ export default new Vuex.Store({
     deleteLoginUser(state) {
       state.loggedUser = undefined
       removeItem('user')
-    }
+    },
+    userAccounts(state, accounts) {
+      state.userAccounts = accounts
+      setStore('accounts', accounts)
+    },
   },
   actions: {