feat(expense): import expense

package.json

@@ -3,7 +3,8 @@
   "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",
@@ -11,10 +12,13 @@
     "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",
     "core-js": "^3.6.5",
+    "npm": "^8.1.0",
+    "portal-vue": "^2.1.7",
     "vue": "^2.6.14",
     "vue-axios": "^3.2.4",
     "vue-router": "^3.5.1",

src/components/Account.vue

@@ -6,7 +6,7 @@
           <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>
+            <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</b-button></div>
@@ -15,12 +15,35 @@
         </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(file1)"
+            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} from "bootstrap-vue";
+import {BCard, BTabs , BTab, BTable, BFormFile} from "bootstrap-vue";
-import {getAnAccount, getExpenses} from "@/config/noscomptes";
+import {getAnAccount, getExpenses, sendCSVImportExpenses} from "@/config/noscomptes";
 export default {
   name: 'account',
   data: function () {
@@ -43,6 +66,7 @@ export default {
         },
 
       ],
+      file: undefined,
       account: {},
       expenses : [{
         expenseDate: "Today",
@@ -57,9 +81,7 @@ export default {
       this.account = data
     })
     getExpenses(loggedUser.oauth_token, loggedUser.nosComptesId, this.$route.params.accountId).then(data => {
-      if (data.lenght > 0) {
         this.expenses = data
-      }
     })
   },
   mounted () {
@@ -71,6 +93,13 @@ export default {
         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)
+    }
 
 
   },
@@ -78,7 +107,8 @@ export default {
     BCard,
     BTabs,
     BTab,
-    BTable
+    BTable,
+    BFormFile
   }
 }
 </script>

src/config/noscomptes.js

@@ -56,3 +56,16 @@ export const getExpenses = (oauthToken, userId, accountId) => {
         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:8081/users/"+userId+"/accounts/"+accountId+"/expenses", fileForm, {headers}).then(response => {
+        return response.data
+    })
+}

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 , BootstrapVueIcons, ModalPlugin} from 'bootstrap-vue'
+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,5 @@ Vue.use(IconsPlugin)
 
 Vue.use(BootstrapVueIcons)
 Vue.use(ModalPlugin)
+Vue.use(FormPlugin)
+Vue.use(FormFilePlugin)