wip

package.json

@@ -3,20 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "engines": {
-    "node" : "16.13.0"
+    "node": "16.13.0",
+    "npm": "8.1.0"
   },
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 19006",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.0",
     "axios": "^0.21.1",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.21.2",
+    "chart.js": "^2.9.4",
     "core-js": "^3.6.5",
+    "npm": "^8.1.0",
+    "portal-vue": "^2.1.7",
     "vue": "^2.6.14",
     "vue-axios": "^3.2.4",
+    "vue-chartjs": "^3.5.1",
+    "vue-moment": "^4.1.0",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

src/App.vue

@@ -11,4 +11,12 @@ export default {
 </script>
 
 <style>
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
 </style>

src/components/Account.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="account-tab">
+    <div>
+      <div class="expense-button-div float-left">
+        <b-button variant="success">Ajouter une dépense</b-button>
+        <b-button variant="info" v-on:click="showImportExpenses">Importer des dépenses</b-button>
+      </div>
+      <div class="float-right">
+        <b-button variant="light">Partager le compte bancaire</b-button></div>
+    </div>
+    <b-form>
+      <div class="form-datepicker">
+        <div class="text-datepicker">De</div>
+        <b-form-datepicker style="max-width: 300px" v-model="fromValue" :min="fromMin" :max="fromMax" @input="computePickerDate()"></b-form-datepicker>
+        <div class="text-datepicker"> à </div>
+        <b-form-datepicker style="max-width: 300px" v-model="toValue" :min="toMin" :max="toMax" @input="computePickerDate()"></b-form-datepicker>
+      </div>
+    </b-form>
+    <b-card no-body>
+      <b-tabs card vertical>
+        <b-tab title="Vue Global">
+          <scatter-chart style="max-width: 30%;"
+                         v-if="loaded"
+                         :chartdata="expensesChartData"
+                         :options="optionsChartData"
+          />
+          <scatter-chart style="max-width: 100%;"
+              v-if="loaded"
+              :chartdata="chartData"
+              />
+        </b-tab>
+
+        <b-tab title="Vue detaillé" >
+          <b-table striped hover bordered :items="expenses" :fields="fields"></b-table>
+        </b-tab>
+
+      </b-tabs>
+    </b-card>
+    <b-modal ref="import-expense" size="lg" centered title="">
+      <template #modal-header="{ }">
+      </template>
+      <template #default="{ }">
+        <!-- Styled -->
+        <b-form-file
+            v-model="file"
+            :state="Boolean(file)"
+            placeholder="Choose a file or drop it here..."
+            drop-placeholder="Drop file here..."
+        ></b-form-file>
+      </template>
+
+      <template #modal-footer="{ ok, cancel }">
+        <b-button size="sm" variant="success" @click="validateFormImportExpenses()">
+          Importer
+        </b-button>
+        <b-button size="sm" variant="danger" @click="cancel()">
+          Fermer
+        </b-button>
+      </template>
+    </b-modal>
+
+  </div>
+</template>
+
+<script>
+import {BCard, BTabs , BTab, BTable, BFormFile, BModal, BButton, BForm, BFormDatepicker} from "bootstrap-vue";
+import {getAnAccount, getExpenses, sendCSVImportExpenses, getExpensesBetweenDate} from "@/service/noscomptes";
+import {formatExpenses, formatExpensesChart, formatIOTChartOption} from "@/service/expenses";
+import ScatterChart from './charts/BarChart.vue';
+export default {
+  name: 'account',
+  data: function () {
+    return {
+      optionsChartData: {
+        scales: {
+          xAxes: [{
+            stacked: true,
+            type: 'category',
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: false
+            }
+          }]
+        }
+      },
+      fields: [
+        {
+          key: 'expenseDate',
+          label: 'Date',
+          sortable: true
+        },
+        {
+          key: 'libelle',
+          label: 'libelle',
+
+        },
+        {
+          key: 'value',
+          label: 'Montant',
+          sortable: false
+        },
+
+      ],
+      file: undefined,
+      account: {},
+      expenses : [{
+        expenseDate: "Today",
+        libelle:"Test",
+        value: 10
+      }],
+      filteredExpenses:{},
+      chartData:{} ,
+      expensesChartData:{},
+      loaded: false,
+      fromValue: "",
+      fromMin: new Date(2021,10,10),
+      fromMax:new Date(),
+      toValue: "",
+      toMin: new Date(2021,10,1),
+      toMax:new Date(),
+    }
+  },
+  beforeCreate() {
+    let loggedUser = this.$store.state.loggedUser
+    getAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
+      this.account = data
+    })
+    getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
+        this.expenses = data
+      this.chartData = formatExpenses(data)
+      this.expensesChartData = formatExpensesChart(data)
+      this.optionsChartData = formatIOTChartOption(data)
+      this.loaded= true
+    })
+
+  },
+  mounted () {
+  },
+  methods: {
+    computePickerDate(){
+      if (this.fromValue !== "") {
+        this.toMin = new Date(this.fromValue)
+      }
+      if(this.toValue !== "") {
+        this.fromMax = new Date(this.toValue)
+      }
+      let loggedUser = this.$store.state.loggedUser
+      this.loaded = false
+      getExpensesBetweenDate(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId, this.fromValue, this.toValue).then(data => {
+        this.expenses = data
+        this.chartData = formatExpenses(data)
+        this.expensesChartData = formatExpensesChart(data)
+        this.optionsChartData = formatIOTChartOption(data)
+        this.loaded = true
+      })
+      return false
+    },
+    loadAccount() {
+      let loggedUser = this.$store.state.loggedUser
+      getAnAccount(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
+        this.account = data
+      })
+    },
+    showImportExpenses() {
+      this.$refs['import-expense'].show()
+    },
+    validateFormImportExpenses() {
+      let loggedUser = this.$store.state.loggedUser
+      sendCSVImportExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId, this.file)
+          .then(()=>{
+            this.loaded = false
+            getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
+              this.expenses = data
+              this.chartData = formatExpenses(data)
+              this.expensesChartData = formatExpensesChart(data)
+              this.optionsChartData = formatIOTChartOption(data)
+              this.loaded = true
+            })
+
+            this.$refs['import-expense'].hide()
+          })
+
+    }
+
+
+  },
+  components: {
+    ScatterChart,
+    BCard,
+    BTabs,
+    BTab,
+    BTable,
+    BFormFile,
+    BModal,
+    BButton,
+    BForm,
+    BFormDatepicker
+  }
+}
+</script>
+
+<style>
+.expense-button-div {
+  margin-bottom: 10px;
+}
+
+.expense-button-div .btn {
+  margin-left: 10px;
+}
+.sr-only {
+  display: none;
+}
+.text-datepicker {
+  align-items: center;
+  display: flex;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.form-datepicker {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin: 10px 15px 10px 0px;
+}
+</style>
+

src/components/JointAccount.vue

@@ -0,0 +1,242 @@
+<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>
+

src/components/MesComptes.vue

@@ -2,30 +2,50 @@
   <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 account-add d-flex flex-row"
+        <b-tab title="Mes comptes bancaires" active>
+          <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="'/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-button href="#" variant="primary" :header-bg-variant="dark" >Voir mon compte</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>
@@ -65,14 +85,16 @@
 </template>
 
 <script>
-import {BCard, BTabs, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
-import {createAccount, getAccounts} from "@/config/noscomptes";
+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' },
@@ -84,15 +106,47 @@ export default {
     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())
+        .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()
@@ -100,6 +154,7 @@ export default {
   },
   components: {
     BCard,
+    BButton,
     BTabs,
     BTab,
     BCardText,
@@ -115,18 +170,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 +201,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/components/SocialLogin.vue

@@ -9,7 +9,8 @@
 
 <script>
 import router from '@/router/router'
-import {logWithGoogle, getAccounts, getSharedAccounts} from '@/config/noscomptes'
+import {logWithGoogle, getAccounts} from '@/service/noscomptes'
+import {getJointAccounts} from "@/service/jointAccount";
 export default {
   name: 'login_signup_social',
   mounted () {
@@ -20,11 +21,12 @@ export default {
         .signIn()
         .then(GoogleUser => {
           return logWithGoogle(GoogleUser.getAuthResponse().id_token).then(data => {
+            console.log( GoogleUser.getBasicProfile())
             let userInfoMapped = {
               nosComptesId: data.id,
-              googleId: GoogleUser.wa,
-              firstName: GoogleUser.mt.Re,
-              email: data.email,
+              googleId: GoogleUser.getBasicProfile().getId(),
+              firstName: GoogleUser.getBasicProfile().getGivenName(),
+              email: GoogleUser.getBasicProfile().getEmail(),
               oauth_token: GoogleUser.getAuthResponse().id_token,
             }
             this.$store.commit('setLoginUser', userInfoMapped)
@@ -35,10 +37,10 @@ export default {
             getAccounts(userInfo.oauth_token, userInfo.nosComptesId).then(data => {
               this.$store.commit('userAccounts', data)
             })
-            getSharedAccounts(userInfo.oauth_token, userInfo.nosComptesId).then(data => {
-              this.$store.commit('userSharedAccounts', data)
+            getJointAccounts(userInfo.oauth_token, userInfo.nosComptesId).then(data => {
+              this.$store.commit('userJointAccounts', data)
             })
-            router.push('/')
+         router.push('/')
           })
         .catch(error => {
           console.log('error', error)

src/components/charts/BarChart.vue

@@ -0,0 +1,39 @@
+<script>
+import {Bar} from 'vue-chartjs'
+
+export default {
+  name: 'ScatterChart',
+  extends: Bar,
+  props: {
+    chartdata: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: () =>{return {
+        scales: {
+          xAxes: [{
+            type: "time",
+            time: {
+              unit: 'day',
+              round: 'day',
+              displayFormats: {
+                day: 'MMM D'
+              }
+            }
+          }],
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            }
+          }]
+        }
+      }}
+    }
+  },
+  mounted() {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+</script>

src/components/charts/LineChart.vue

@@ -0,0 +1,21 @@
+<script>
+import {Line} from 'vue-chartjs'
+
+export default {
+  name: 'LineChart',
+  extends: Line,
+  props: {
+    chartdata: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Object,
+      default: () =>{return {responsive: true}}
+    }
+  },
+  mounted() {
+    this.renderChart(this.chartdata, this.options)
+  }
+}
+</script>

src/config/noscomptes.js

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-
-export const logWithGoogle = (oauthToken) => {
-    const headers = {
-        "Authorization": "Bearer "+oauthToken
-      };
-    return Vue.axios.get("http://localhost:8081/users",{headers}).then(response => {return response.data})
-}
-
-export const getAccounts = (oauthToken, userId) => {
-    const headers = {
-        "Authorization": "Bearer "+oauthToken
-    };
-    return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts", {headers}).then(response => {console.log(response);return response.data})
-}
-
-export const getSharedAccounts = (oauthToken, userId) => {
-    const headers = {
-        "Authorization": "Bearer "+oauthToken
-    };
-    return Vue.axios.get("http://localhost:8081/users/"+userId+"/sharedaccounts", {headers}).then(response => {console.log(response);return response.data})
-}
-
-export const createAccount = (oauthToken, userId, account) => {
-    const headers = {
-        "Authorization": "Bearer " + oauthToken
-    };
-    return Vue.axios.post("http://localhost:8081/users/"+userId+"/accounts", account, {headers}).then(response => {
-        console.log(response);
-        return response.data
-    })
-}

src/main.js

@@ -7,8 +7,8 @@ import VueAxios from 'vue-axios'
 
 import '@/assets/css/style.css'
 
-import GoogleAuth from '@/config/google_oAuth.js'
-import { BootstrapVue, IconsPlugin , BootstrapVueIcons, ModalPlugin} from 'bootstrap-vue'
+import GoogleAuth from '@/service/google_oAuth.js'
+import { BootstrapVue, IconsPlugin , BootstrapVueIcons, ModalPlugin, FormPlugin, FormFilePlugin} from 'bootstrap-vue'
 
 // Import Bootstrap an BootstrapVue CSS files (order is important)
 import 'bootstrap/dist/css/bootstrap.css'
@@ -36,3 +36,9 @@ Vue.use(IconsPlugin)
 
 Vue.use(BootstrapVueIcons)
 Vue.use(ModalPlugin)
+Vue.use(FormPlugin)
+Vue.use(FormFilePlugin)
+
+import VueMoment from 'vue-moment'
+
+Vue.use(VueMoment)

src/router/router.js

@@ -3,6 +3,9 @@ import Router from 'vue-router'
 import Home from '@/views/Home'
 import Login from '@/views/Login'
 import store from "../store/store";
+import MesComptes from "@/components/MesComptes";
+import JointAccount from "@/components/JointAccount";
+import Account from "@/components/Account"
 Vue.use(Router)
 
 let baseRoutes = [
@@ -10,17 +13,23 @@ let baseRoutes = [
     path: '/',
     name: 'Home',
     component: Home,
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: Home,
+    children: [{
+      path: "accounts",
+      component: MesComptes,
+    }, {
+      path: 'account/:accountId',
+      component: Account,
+    },
+      {
+        path: "jointAccount",
+        component: JointAccount,
+      }]
   },
   {
     path: '/login',
     name: 'Login',
     component: Login
-  }
+  },
 ]
 
 const router = new Router({

src/service/expenses.js

@@ -0,0 +1,129 @@
+import Vue from 'vue'
+
+export const formatExpenses = (expenses) => {
+    const formattedExpenses = []
+    const reduceExpenses = []
+    for (const expense of expenses) {
+        if (reduceExpenses[expense.expenseDate] === undefined) {
+            reduceExpenses[expense.expenseDate] = expense.value
+        } else {
+            reduceExpenses[expense.expenseDate] += expense.value
+        }
+    }
+    for (const date in reduceExpenses) {
+        formattedExpenses[formattedExpenses.length] = { x: date, y: reduceExpenses[date] }
+    }
+    console.log(reduceExpenses)
+    console.log(formattedExpenses)
+    return {
+        datasets: [{
+            label: 'My First Dataset',
+            data: formattedExpenses,
+            fill: false,
+            borderColor: 'rgb(75, 192, 192)',
+            tension: 0.1
+        }]
+    }
+}
+
+export const formatExpensesChart = (expenses) => {
+    const reduceIncome = []
+    const reduceOutcome = []
+    const reduceTotal = []
+    const outcome = []
+    const income = []
+    const total = []
+    expenses.sort(function(a,b){
+        // Turn your strings into dates, and then subtract them
+        // to get a value that is either negative, positive, or zero.
+        return new Date(a.expenseDate) - new Date(b.expenseDate);
+    });
+    for (const expense of expenses) {
+        var month = Vue.moment(expense.expenseDate).format('MMMM');
+        if (expense.value > 0) {
+            if (reduceIncome[month] === undefined) {
+                reduceIncome[month] = expense.value
+            } else {
+                reduceIncome[month] += expense.value
+            }
+        } else {
+            if (reduceOutcome[month] === undefined) {
+                reduceOutcome[month] = expense.value
+            } else {
+                reduceOutcome[month] += expense.value
+            }
+        }
+        if (reduceTotal[month] === undefined) {
+            reduceTotal[month] = expense.value
+        } else {
+            reduceTotal[month] += expense.value
+        }
+    }
+    for (const date in reduceOutcome) {
+        outcome[outcome.length] = { x: date, y: reduceOutcome[date] }
+    }
+    for (const date in reduceIncome) {
+        income[income.length] = { x: date, y: reduceIncome[date] }
+    }
+
+    for (const date in reduceTotal) {
+        total[total.length] = { x: date, y: reduceTotal[date] }
+    }
+
+    console.log(income)
+    console.log(outcome)
+    return {
+        datasets: [{
+            type: "line",
+            label: 'total',
+            data: total,
+            fill: false,
+            borderColor: 'rgb(0, 0, 0)',
+            backgroundColor:'rgb(198, 24, 24)',
+            tension: 0.1
+        },{
+            label: 'Income',
+            data: income,
+            fill: false,
+            borderColor: 'rgb(0, 0, 0)',
+            backgroundColor:'rgb(24,198,24)',
+            tension: 0.1
+        },
+            {
+                label: 'Outcome',
+                data: outcome,
+                fill: false,
+                borderColor: 'rgb(0, 0, 0)',
+                backgroundColor:'rgb(198, 24, 24)',
+                tension: 0.1
+            }]
+    }
+}
+
+export const formatIOTChartOption = (expenses) => {
+    const months = []
+    const monthLabel = []
+    for (const expense of expenses) {
+        var month = Vue.moment(expense.expenseDate).format('MMMM');
+        months[month] = month
+    }
+    for (const month in months) {
+        monthLabel[monthLabel.length] = month
+    }
+    console.log(months)
+    console.log(monthLabel)
+    return  {
+        scales: {
+            xAxes: [{
+                stacked: true,
+                type: 'category',
+                labels: monthLabel,
+            }],
+            yAxes: [{
+                ticks: {
+                    beginAtZero: false
+                }
+            }]
+        }
+    }
+}

src/service/google_oAuth.js

@@ -25,7 +25,6 @@ var googleAuth = (function () {
         })
       })
     }
-  
     function Auth () {
       if (!(this instanceof Auth))
       return new Auth()
@@ -38,7 +37,9 @@ var googleAuth = (function () {
         console.warn('isLoaded() will be deprecated. You can use "this.$gAuth.isInit"')
         return !!this.GoogleAuth
       }
-  
+      this.currentUser = () => {
+        return this.GoogleAuth.currentUser;
+      }
       this.load = (config, prompt) => {
         installClient()
         .then(() => {
@@ -143,4 +144,4 @@ var googleAuth = (function () {
     Vue.gAuth.load(GoogleAuthConfig, prompt)
   }
   
-  export default installGoogleAuthPlugin
+  export default installGoogleAuthPlugin

src/service/jointAccount.js

@@ -0,0 +1,53 @@
+import Vue from 'vue'
+
+export const getJointAccounts = (oauthToken, userId) => {
+    const headers = {
+        "Authorization": "Bearer "+oauthToken
+    };
+    return Vue.axios.get("http://localhost:8080/users/"+userId+"/jointaccounts", {headers}).then(response => {console.log(response);return response.data})
+}
+
+export const createJointAccount = (oauthToken, userId, jointaccount) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.post("http://localhost:8080/users/"+userId+"/jointaccounts", jointaccount, {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const deleteAJointAccount = (oauthToken, userId, jointaccountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.delete("http://localhost:8080/users/"+userId+"/jointaccounts/"+jointaccountId, {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const getAJointAccount = (oauthToken, userId, jointaccountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8080/users/"+userId+"/jointaccounts/"+jointaccountId, {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const getExpenses = (oauthToken, userId, jointaccountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8080/users/"+userId+"/jointaccounts/"+jointaccountId+"/expenses", {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const getExpensesBetweenDate = (oauthToken, userId, accountId, from, to) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8080/users/"+userId+"/accounts/"+accountId+"/expenses?from="+from+"&to="+to, {headers}).then(response => {
+        return response.data
+    })
+}

src/service/noscomptes.js

@@ -0,0 +1,73 @@
+import Vue from 'vue'
+
+export const logWithGoogle = (oauthToken) => {
+    const headers = {
+        "Authorization": "Bearer "+oauthToken
+      };
+    return Vue.axios.get("http://localhost:8080/users",{headers}).then(response => {return response.data})
+}
+
+export const getAccounts = (oauthToken, userId) => {
+    const headers = {
+        "Authorization": "Bearer "+oauthToken
+    };
+    return Vue.axios.get("http://localhost:8080/users/"+userId+"/accounts", {headers}).then(response => {console.log(response);return response.data})
+}
+
+export const createAccount = (oauthToken, userId, account) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.post("http://localhost:8080/users/"+userId+"/accounts", account, {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const deleteAnAccount = (oauthToken, userId, accountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.delete("http://localhost:8080/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:8080/users/"+userId+"/accounts/"+accountId, {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const getExpenses = (oauthToken, userId, accountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8080/users/"+userId+"/accounts/"+accountId+"/expenses", {headers}).then(response => {
+        return response.data
+    })
+}
+
+export const getExpensesBetweenDate = (oauthToken, userId, accountId, from, to) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8080/users/"+userId+"/accounts/"+accountId+"/expenses?from="+from+"&to="+to, {headers}).then(response => {
+        return response.data
+    })
+}
+
+
+export const sendCSVImportExpenses = (oauthToken, userId, accountId, file) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken,
+        'Content-Type': 'multipart/form-data'
+    };
+    let fileForm = new FormData()
+    fileForm.set('attachment',file)
+    return Vue.axios.post("http://localhost:8080/users/"+userId+"/accounts/"+accountId+"/expenses", fileForm, {headers}).then(response => {
+        return response.data
+    })
+}

src/store/store.js

@@ -1,15 +1,17 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { setStore, getStore } from '@/config/utils'
-import {removeItem} from "../config/utils";
+import { setStore, getStore } from '@/service/utils'
+import {removeItem} from "../service/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: {
 

src/views/Home.vue

@@ -4,8 +4,8 @@
       <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-nav-item href="/accounts">Mes comptes</b-nav-item>
+          <b-nav-item href="/jointAccount">Compte joint</b-nav-item>
         </b-navbar-nav>
         <b-navbar-nav align="end" class="right-element">
           <b-nav-item-dropdown left dropleft>
@@ -20,13 +20,12 @@
       </b-navbar>
     </div>
     <div>
-      <MesComptes></MesComptes>
+      <router-view></router-view>
     </div>
   </div>
 </template>
 
 <script>
-import MesComptes from '@/components/MesComptes'
 import router from '@/router/router'
 import {BDropdownItem, BNavbar, BNavbarNav, BNavItem, BNavItemDropdown} from "bootstrap-vue";
 
@@ -37,8 +36,7 @@ export default {
     BNavbarNav,
     BNavItem,
     BNavItemDropdown,
-    BDropdownItem,
-    MesComptes
+    BDropdownItem
   },
   methods: {
     signOut() {