noscomptes-ui/src/components/MesComptes.vue

<template>
  <div class="accounts-tab">
    <b-card no-body>
      <b-tabs card>
        <b-tab title="Mes comptes bancaires" 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<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: 'mes_comptes',
  data: function () {
    return {
      accounts: [],
      nameState: undefined,
      name: "",
      provider: "",
      options: [
        { value: 'caisse-epargne', text: 'Caisse Epargne' },
        { value: 'bnp', text: 'BNP Paribas' },
        { value: 'boursorama', text: 'Boursorama' }
      ]
    }
  },
  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>