feat(expense): display the expenses

package-lock.json

@@ -25,6 +25,9 @@
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",
         "vue-template-compiler": "^2.6.11"
+      },
+      "engines": {
+        "node": "16.13.0"
       }
     },
     "node_modules/@babel/code-frame": {

src/App.vue

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

src/components/Account.vue

@@ -3,6 +3,15 @@
     <b-card no-body>
       <b-tabs card>
         <b-tab :title=account.name >
+          <div>
+          <div class="expense-button-div float-left">
+            <b-button variant="success">Ajouter une dépense</b-button>
+            <b-button variant="info">Importer des dépenses</b-button>
+          </div>
+            <div class="float-right">
+              <b-button variant="light">Partager le compte</b-button></div>
+          </div>
+          <b-table striped hover bordered :items="expenses" :fields="fields"></b-table>
         </b-tab>
       </b-tabs>
     </b-card>
@@ -10,13 +19,36 @@
 </template>
 
 <script>
-import {BCard, BTabs , BTab} from "bootstrap-vue";
-import {getAnAccount} from "@/config/noscomptes";
+import {BCard, BTabs , BTab, BTable} from "bootstrap-vue";
+import {getAnAccount, getExpenses} from "@/config/noscomptes";
 export default {
   name: 'account',
   data: function () {
     return {
+      fields: [
+        {
+          key: 'expenseDate',
+          label: 'Date',
+          sortable: true
+        },
+        {
+          key: 'libelle',
+          label: 'libelle',
+
+        },
+        {
+          key: 'value',
+          label: 'Montant',
+          sortable: false
+        },
+
+      ],
       account: {},
+      expenses : [{
+        expenseDate: "Today",
+        libelle:"Test",
+        value: 10
+      }]
     }
   },
   beforeCreate() {
@@ -24,6 +56,11 @@ export default {
     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 => {
+      if (data.lenght > 0) {
+        this.expenses = data
+      }
+    })
   },
   mounted () {
   },
@@ -40,12 +77,22 @@ export default {
   components: {
     BCard,
     BTabs,
-    BTab
+    BTab,
+    BTable
   }
 }
 </script>
 
 <style>
+.expense-button-div {
+  margin-bottom: 10px;
+}
 
+.expense-button-div .btn {
+  margin-left: 10px;
+}
+.sr-only {
+  display: none;
+}
 </style>
 

src/config/noscomptes.js

@@ -47,3 +47,12 @@ export const getAnAccount = (oauthToken, userId, accountId) => {
         return response.data
     })
 }
+
+export const getExpenses = (oauthToken, userId, accountId) => {
+    const headers = {
+        "Authorization": "Bearer " + oauthToken
+    };
+    return Vue.axios.get("http://localhost:8081/users/"+userId+"/accounts/"+accountId+"/expenses", {headers}).then(response => {
+        return response.data
+    })
+}