noscomptes-ui/src/components/JointAccount.vue

<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, deleteAJointAccount} from "@/service/jointAccount";
export default {
  name: 'joint_account',
  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
      deleteAJointAccount(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() {
      console.log("toto")
      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>