From a929561c6303b5c9a1470d88a4ae46d9db5fe350 Mon Sep 17 00:00:00 2001
From: Jeffrey Duroyon <jeffrey.duroyon@gmail.com>
Date: Fri, 5 Nov 2021 00:53:09 +0100
Subject: [PATCH] feat(accounts): add account tab and modal creation

---
 src/components/MesComptes.vue | 88 +++++++++++++++++++++++++++++++++++
 src/config/noscomptes.js      |  2 +-
 src/main.js                   |  5 +-
 src/views/Home.vue            | 45 ++++++++++--------
 4 files changed, 119 insertions(+), 21 deletions(-)
 create mode 100644 src/components/MesComptes.vue

diff --git a/src/components/MesComptes.vue b/src/components/MesComptes.vue
new file mode 100644
index 0000000..1a17448
--- /dev/null
+++ b/src/components/MesComptes.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="accounts-tab">
+    <b-card no-body>
+      <b-tabs card>
+        <b-tab title="Mes comptes" active>
+          <b-card @click="show('modal-1')"
+                  class="mb-2 account-card d-flex flex-row"
+          >
+
+            <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>
+
+          </b-card>
+          <b-card v-for="account in accounts" :key="account.name"
+              :title=account.name
+              class="mb-2 account-card"
+          >
+            <b-card-text>
+              {{account.name}}
+            </b-card-text>
+
+            <b-button href="#" variant="primary">Voir mon compte</b-button>
+          </b-card>
+        </b-tab>
+      </b-tabs>
+    </b-card>
+    <b-modal ref="my-modal" id="modal-1" title="BootstrapVue">
+      <p class="my-4">Hello from modal!</p>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import {BCard, BTabs, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal} from "bootstrap-vue";
+import {getAccounts} from "@/config/noscomptes";
+export default {
+  name: 'mes_comptes',
+  data: function () {
+    return {
+      accounts: 0
+    }
+  },
+  beforeCreate() {
+    let loggedUser = this.$store.state.loggedUser
+    getAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
+      this.$store.commit('userAccounts', data)
+    })
+  },
+  mounted () {
+  },
+  methods: {
+    show() {
+      this.$refs['my-modal'].show()
+    }
+  },
+  components: {
+    BCard,
+    BTabs,
+    BTab,
+    BCardText,
+    BCardTitle,
+    BIconPlusCircleFill,
+    BModal
+  }
+}
+</script>
+
+<style>
+.accounts-tab {
+  margin: 2% 3% 0 3%;
+  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{
+  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);
+}
+.account-card .card-body {
+  text-align: center;
+  align-self: center;
+}
+</style>
diff --git a/src/config/noscomptes.js b/src/config/noscomptes.js
index ce78056..2506aac 100644
--- a/src/config/noscomptes.js
+++ b/src/config/noscomptes.js
@@ -11,7 +11,7 @@ export const getAccounts = (oauthToken, userId) => {
     const headers = {
         "Authorization": "Bearer "+oauthToken
     };
-    return Vue.axios.get("http://localhost:8081/users/"+userId+"/accountsgc", {headers}).then(response => {console.log(response);return response.data})
+    return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts", {headers}).then(response => {console.log(response);return response.data})
 }
 
 export const getSharedAccounts = (oauthToken, userId) => {
diff --git a/src/main.js b/src/main.js
index 45170cf..b0deae0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,7 +8,7 @@ import VueAxios from 'vue-axios'
 import '@/assets/css/style.css'
 
 import GoogleAuth from '@/config/google_oAuth.js'
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+import { BootstrapVue, IconsPlugin , BootstrapVueIcons, ModalPlugin} from 'bootstrap-vue'
 
 // Import Bootstrap an BootstrapVue CSS files (order is important)
 import 'bootstrap/dist/css/bootstrap.css'
@@ -33,3 +33,6 @@ new Vue({
 Vue.use(BootstrapVue)
 // Optionally install the BootstrapVue icon components plugin
 Vue.use(IconsPlugin)
+
+Vue.use(BootstrapVueIcons)
+Vue.use(ModalPlugin)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3c3869e..d2f7e75 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,27 +1,32 @@
 <template>
   <div>
-    <b-navbar toggleable="lg" type="dark" variant="info" fixed="fixed">
+    <div>
+      <b-navbar toggleable="lg" type="dark" variant="info" fixed="fixed">
         <!-- Right aligned nav items -->
-      <b-navbar-nav >
-        <b-nav-item href="#">Mes comptes</b-nav-item>
-        <b-nav-item href="#">Nos comptes</b-nav-item>
-      </b-navbar-nav>
-      <b-navbar-nav align="end" class="right-element">
-        <b-nav-item-dropdown left dropleft>
-          <!-- Using 'button-content' slot -->
-          <template #button-content>
-            <em>{{ $store.state.loggedUser.firstName}}</em>
-          </template>
-          <b-dropdown-item href="#">Profile</b-dropdown-item>
-          <b-dropdown-item @click="signOut" href="/">Sign Out</b-dropdown-item>
-        </b-nav-item-dropdown>
-      </b-navbar-nav>
-    </b-navbar>
+        <b-navbar-nav>
+          <b-nav-item href="#">Mes comptes</b-nav-item>
+          <b-nav-item href="#">Nos comptes</b-nav-item>
+        </b-navbar-nav>
+        <b-navbar-nav align="end" class="right-element">
+          <b-nav-item-dropdown left dropleft>
+            <!-- Using 'button-content' slot -->
+            <template #button-content>
+              <em>{{ $store.state.loggedUser.firstName }}</em>
+            </template>
+            <b-dropdown-item href="#">Profile</b-dropdown-item>
+            <b-dropdown-item @click="signOut" href="/">Sign Out</b-dropdown-item>
+          </b-nav-item-dropdown>
+        </b-navbar-nav>
+      </b-navbar>
+    </div>
+    <div>
+      <MesComptes></MesComptes>
+    </div>
   </div>
 </template>
 
 <script>
-
+import MesComptes from '@/components/MesComptes'
 import router from '@/router/router'
 import {BDropdownItem, BNavbar, BNavbarNav, BNavItem, BNavItemDropdown} from "bootstrap-vue";
 
@@ -32,13 +37,14 @@ export default {
     BNavbarNav,
     BNavItem,
     BNavItemDropdown,
-    BDropdownItem
+    BDropdownItem,
+    MesComptes
   },
   methods: {
     signOut() {
       this.$gAuth
           .signOut()
-          .then( () => {
+          .then(() => {
             this.$store.commit("deleteLoginUser")
             router.push("/login")
           })
@@ -53,6 +59,7 @@ export default {
   margin-left: auto;
   padding-right: 10px;
 }
+
 .right-element .dropdown-menu {
   right: 0px;
 }