Change document upload form to show parsed document

frontend/components/containers/DocumentList.vue

@@ -10,32 +10,17 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 import DocumentList from '@/components/organisms/DocumentList'
 
 export default {
   components: {
     DocumentList
   },
-  data() {
-    return {
-      headers: [
-        {
-          text: 'Text',
-          align: 'left',
-          value: 'text'
-        },
-        {
-          text: 'Metadata',
-          align: 'left',
-          value: 'meta'
-        }
-      ]
-    }
-  },
 
   computed: {
-    ...mapState('documents', ['items', 'selected', 'loading'])
+    ...mapState('documents', ['items', 'selected', 'loading']),
+    ...mapGetters('documents', ['headers'])
   },
 
   created() {

frontend/components/containers/DocumentUploadButton.vue

@@ -6,6 +6,10 @@
     <template v-slot="slotProps">
       <document-upload-form
         :upload-document="uploadDocument"
+        :formats="formatList"
+        :headers="headers"
+        :parse-file="parseFile"
+        :parsed-doc="parsedDoc"
         @close="slotProps.close"
       />
     </template>
@@ -13,7 +17,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapGetters } from 'vuex'
 import BaseModal from '@/components/molecules/BaseModal'
 import DocumentUploadForm from '@/components/organisms/DocumentUploadForm'
 
@@ -23,8 +27,12 @@ export default {
     DocumentUploadForm
   },
 
+  computed: {
+    ...mapGetters('documents', ['formatList', 'parsedDoc', 'headers'])
+  },
+
   methods: {
-    ...mapActions('documents', ['uploadDocument'])
+    ...mapActions('documents', ['uploadDocument', 'parseFile'])
   }
 }
 </script>

frontend/components/organisms/DocumentUploadForm.vue

@@ -24,29 +24,58 @@
           />
         </v-radio-group>
         <v-file-input
-          v-model="file"
+          :value="file"
           :accept="acceptType"
           :rules="uploadFileRules"
           label="File input"
+          @change="parseFile"
         />
       </v-form>
+      <document-list
+        :headers="headers"
+        :docs="parsedDoc"
+        :selected="[]"
+        :loading="false"
+      />
     </template>
   </base-card>
 </template>
 
 <script>
 import BaseCard from '@/components/molecules/BaseCard'
+import DocumentList from '@/components/organisms/DocumentList'
 import { fileFormatRules, uploadFileRules } from '@/rules/index'
 
 export default {
   components: {
-    BaseCard
+    BaseCard,
+    DocumentList
   },
   props: {
     uploadDocument: {
       type: Function,
       default: () => {},
       required: true
+    },
+    parseFile: {
+      type: Function,
+      default: () => {},
+      required: true
+    },
+    formats: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    parsedDoc: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    headers: {
+      type: Array,
+      default: () => [],
+      required: true
     }
   },
   data() {
@@ -54,23 +83,6 @@ export default {
       valid: false,
       file: null,
       selectedFormat: null,
-      formats: [
-        {
-          type: 'csv',
-          text: 'Upload a CSV file from your computer',
-          accept: '.csv'
-        },
-        {
-          type: 'plain',
-          text: 'Upload text items from your computer',
-          accept: '.txt'
-        },
-        {
-          type: 'json',
-          text: 'Upload a JSON file from your computer',
-          accept: '.json,.jsonl'
-        }
-      ],
       fileFormatRules,
       uploadFileRules
     }

frontend/store/documents.js

@@ -1,14 +1,57 @@
 import DocumentService from '@/services/document.service'
+import CSVParser from '@/services/parsers/csv.service'
 
 export const state = () => ({
   items: [],
   selected: [],
-  loading: false
+  loading: false,
+  selectedFormat: null,
+  parsed: {}
 })
 
 export const getters = {
   isDocumentSelected(state) {
     return state.selected.length > 0
+  },
+  formatList() {
+    return [
+      {
+        type: 'csv',
+        text: 'Upload a CSV file from your computer',
+        accept: '.csv'
+      },
+      {
+        type: 'plain',
+        text: 'Upload text items from your computer',
+        accept: '.txt'
+      },
+      {
+        type: 'json',
+        text: 'Upload a JSON file from your computer',
+        accept: '.json,.jsonl'
+      }
+    ]
+  },
+  headers() {
+    return [
+      {
+        text: 'Text',
+        align: 'left',
+        value: 'text'
+      },
+      {
+        text: 'Metadata',
+        align: 'left',
+        value: 'meta'
+      }
+    ]
+  },
+  parsedDoc(state) {
+    if ('data' in state.parsed) {
+      return state.parsed.data
+    } else {
+      return []
+    }
   }
 }
 
@@ -34,6 +77,10 @@ export const mutations = {
   },
   setLoading(state, payload) {
     state.loading = payload
+  },
+  parseFile(state, text) {
+    const parser = new CSVParser()
+    state.parsed = parser.parse(text)
   }
 }
 
@@ -80,5 +127,15 @@ export const actions = {
         })
     }
     commit('resetSelected')
+  },
+  parseFile({ commit }, data) {
+    const reader = new FileReader()
+    reader.readAsText(data, 'UTF-8')
+    reader.onload = (e) => {
+      commit('parseFile', e.target.result)
+    }
+    reader.onerror = (e) => {
+      alert(e)
+    }
   }
 }