feat(expense): display the expenses

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>