Feat: Parse and render csv

src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="app">
     <navbar></navbar>
-    <router-view/>
+    <div id="content">
+        <router-view/>
+    </div>
   </div>
 </template>
 
@@ -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,36 +21,46 @@ 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) {
-      readdir(context.getters.data_dir, (err, list) => {
-        if (err) {
-          console.log(err)
-        } else {
-          var csvs = list.filter(x => {
-            return x.split('.').pop() === 'csv'
-          })
-          for (var i in csvs) {
-            context.dispatch('load_csv', csvs[i])
+      try {
+        readdir(context.getters.data_dir, (err, list) => {
+          if (err) {
+            console.log(err)
+          } else {
+            var csvs = list.filter(x => {
+              return x.split('.').pop() === 'csv'
+            })
+            for (var i in csvs) {
+              context.dispatch('load_csv', csvs[i])
+            }
+            context.commit('SET_CSV_FILES', { csvs })
           }
-          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>