Feat: Parse and render csv

src/App.vue

@@ -1,8 +1,10 @@
 <template>
   <div id="app">
     <navbar></navbar>
+    <div id="content">
         <router-view/>
     </div>
+  </div>
 </template>
 
 <script>
@@ -17,6 +19,9 @@ export default {
 
 <style>
 #app {
-  text-align: center;
 }
+#content {
+    padding: 5rem;
+}
+
 </style>

src/store/modules/config.js

@@ -1,12 +1,13 @@
 import { readdir, readFile } from 'fs'
 import path from 'path'
+import Papa from 'papaparse'
 
 export default {
   namespaced: true,
   state: {
     data_dir: '/home/lafrite/scripts/comptes/data/',
     csv_files: [],
-    datas: []
+    datas: {}
   },
   getters: {
     data_dir: (state) => {
@@ -20,16 +21,19 @@ export default {
     }
   },
   mutations: {
-    APPEND_DATA: (state, { content }) => {
-      state.datas.push(content)
-    },
     SET_CSV_FILES: (state, { csvs }) => {
       state.csv_files = csvs
+    },
+    SET_DATA: (state, { data }) => {
+      state.datas = data
+    },
+    APPEND_DATA: (state, { content }) => {
+      state.datas.push(content)
     }
-
   },
   actions: {
     async find_csv (context) {
+      try {
         readdir(context.getters.data_dir, (err, list) => {
           if (err) {
             console.log(err)
@@ -43,13 +47,20 @@ export default {
             context.commit('SET_CSV_FILES', { csvs })
           }
         })
+      } catch (e) {
+        console.log(e)
+      }
     },
     async load_csv (context, csv) {
       readFile(path.join(context.getters.data_dir, csv), 'utf8', (err, content) => {
         if (err) {
           console.log(err)
         } else {
-          context.commit('APPEND_DATA', { content })
+          var parse_config = {
+            header: true
+          }
+          var parsed = Papa.parse(content, parse_config)
+          context.commit('SET_DATA', { data: parsed })
         }
       })
     }

src/views/analysis.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="import">
     <h1>Analyse</h1>
-    <p>{{ data_dir }}</p>
-    <p>{{ csvs }}</p>
-    <p>{{ datas }}</p>
+    <b-table striped hover :items="datas.data"></b-table>
   </div>
 </template>