Browse Source

Change document upload form to show parsed document

pull/341/head
Hironsan 5 years ago
parent
commit
144f5e0663
4 changed files with 102 additions and 40 deletions
  1. 21
      frontend/components/containers/DocumentList.vue
  2. 12
      frontend/components/containers/DocumentUploadButton.vue
  3. 50
      frontend/components/organisms/DocumentUploadForm.vue
  4. 59
      frontend/store/documents.js

21
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() {

12
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>

50
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
}

59
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)
}
}
}
Loading…
Cancel
Save