Browse Source

wip(nc-gui): papaparse integration

pull/4135/head
Wing-Kam Wong 2 years ago
parent
commit
12a64cf641
  1. 113
      packages/nc-gui/components/dlg/QuickImport.vue

113
packages/nc-gui/components/dlg/QuickImport.vue

@ -54,7 +54,9 @@ const templateEditorModal = ref(false)
const useForm = Form.useForm const useForm = Form.useForm
const importState = reactive({ const importState = reactive({
fileList: [] as (UploadFile & { data: string | ArrayBuffer })[], // TODO: remove
// fileList: [] as (UploadFile & { data: string | ArrayBuffer })[],
fileList: [] as UploadFile[],
url: '', url: '',
jsonEditor: {}, jsonEditor: {},
parserConfig: { parserConfig: {
@ -134,17 +136,17 @@ async function handlePreImport() {
loading.value = true loading.value = true
if (activeKey.value === 'uploadTab') { if (activeKey.value === 'uploadTab') {
await parseAndExtractData(importState.fileList[0].data, importState.fileList[0].name) // TODO: update
await parseAndExtractData2(importState.fileList)
} else if (activeKey.value === 'urlTab') { } else if (activeKey.value === 'urlTab') {
try { try {
await validate() await validate()
await parseAndExtractData(importState.url)
await parseAndExtractData(importState.url, '')
} catch (e: any) { } catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
} }
} else if (activeKey.value === 'jsonEditorTab') { } else if (activeKey.value === 'jsonEditorTab') {
await parseAndExtractData(JSON.stringify(importState.jsonEditor), '') await parseAndExtractData(JSON.stringify(importState.jsonEditor))
} }
loading.value = false loading.value = false
@ -164,13 +166,14 @@ async function handleImport() {
dialogShow.value = false dialogShow.value = false
} }
async function parseAndExtractData(val: string | ArrayBuffer, name: string) { // papaparse experiment
async function parseAndExtractData2(val: UploadFile[]) {
try { try {
templateData.value = null templateData.value = null
importData.value = null importData.value = null
importColumns.value = [] importColumns.value = []
const templateGenerator = getAdapter(name, val) const templateGenerator = getAdapter(val)
if (!templateGenerator) { if (!templateGenerator) {
message.error(t('msg.error.templateGeneratorNotFound')) message.error(t('msg.error.templateGeneratorNotFound'))
@ -179,7 +182,36 @@ async function parseAndExtractData(val: string | ArrayBuffer, name: string) {
await templateGenerator.init() await templateGenerator.init()
templateGenerator.parse() templateGenerator.parse(() => {
templateData.value = templateGenerator.getTemplate()
// templateData.value.tables[0].table_name = populateUniqueTableName()
// importData.value = templateGenerator.getData()
// if (importOnly) importColumns.value = templateGenerator.getColumns()
templateEditorModal.value = true
})
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
}
async function parseAndExtractData(val: string | ArrayBuffer) {
try {
templateData.value = null
importData.value = null
importColumns.value = []
const templateGenerator = getAdapter(val)
if (!templateGenerator) {
message.error(t('msg.error.templateGeneratorNotFound'))
return
}
await templateGenerator.init()
templateGenerator.parse(() => {})
templateData.value = templateGenerator.getTemplate() templateData.value = templateGenerator.getTemplate()
templateData.value.tables[0].table_name = populateUniqueTableName() templateData.value.tables[0].table_name = populateUniqueTableName()
importData.value = templateGenerator.getData() importData.value = templateGenerator.getData()
@ -202,27 +234,34 @@ function handleChange(info: UploadChangeParam) {
const status = info.file.status const status = info.file.status
if (status !== 'uploading' && status !== 'removed') { if (status !== 'uploading' && status !== 'removed') {
const reader = new FileReader() // const reader = new FileReader()
// reader.onload = (e: ProgressEvent<FileReader>) => {
reader.onload = (e: ProgressEvent<FileReader>) => { // const target = importState.fileList.find((f) => f.uid === info.file.uid)
const target = importState.fileList.find((f) => f.uid === info.file.uid) // if (e.target && e.target.result) {
// /** if the file was pushed into the list by `<a-upload-dragger>` we just add the data to the file */
if (e.target && e.target.result) { // if (target) {
/** if the file was pushed into the list by `<a-upload-dragger>` we just add the data to the file */ // target.data = e.target.result
if (target) { // } else if (!target) {
target.data = e.target.result // /** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
} else if (!target) { // importState.fileList.push({
/** if the file was added programmatically and not with d&d, we create file infos and push it into the list */ // ...info.file,
importState.fileList.push({ // status: 'done',
...info.file, // data: e.target.result,
status: 'done', // })
data: e.target.result, // }
}) // }
} // }
} // reader.readAsArrayBuffer(info.file.originFileObj!)
if (!importState.fileList.find((f) => f.uid === info.file.uid)) {
/** if the file was added programmatically and not with d&d, we create file infos and push it into the list */
importState.fileList.push({
...info.file,
status: 'done',
})
} }
console.log(info)
reader.readAsArrayBuffer(info.file.originFileObj!) console.log(importState.fileList)
} }
if (status === 'done') { if (status === 'done') {
@ -246,22 +285,30 @@ function populateUniqueTableName() {
return `Sheet${c}` return `Sheet${c}`
} }
function getAdapter(name: string, val: any) { function getAdapter(val: any) {
if (IsImportTypeExcel.value || isImportTypeCsv.value) { if (isImportTypeCsv.value) {
switch (activeKey.value) {
case 'uploadTab':
return new CSVTemplateAdapter(val, importState.parserConfig)
case 'urlTab':
// TODO: implement one for CSV
return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
}
} else if (IsImportTypeExcel.value || isImportTypeCsv.value) {
switch (activeKey.value) { switch (activeKey.value) {
case 'uploadTab': case 'uploadTab':
return new ExcelTemplateAdapter(name, val, importState.parserConfig) return new ExcelTemplateAdapter(val, importState.parserConfig)
case 'urlTab': case 'urlTab':
return new ExcelUrlTemplateAdapter(val, importState.parserConfig) return new ExcelUrlTemplateAdapter(val, importState.parserConfig)
} }
} else if (isImportTypeJson.value) { } else if (isImportTypeJson.value) {
switch (activeKey.value) { switch (activeKey.value) {
case 'uploadTab': case 'uploadTab':
return new JSONTemplateAdapter(name, val, importState.parserConfig) return new JSONTemplateAdapter(val, importState.parserConfig)
case 'urlTab': case 'urlTab':
return new JSONUrlTemplateAdapter(val, importState.parserConfig) return new JSONUrlTemplateAdapter(val, importState.parserConfig)
case 'jsonEditorTab': case 'jsonEditorTab':
return new JSONTemplateAdapter(name, val, importState.parserConfig) return new JSONTemplateAdapter(val, importState.parserConfig)
} }
} }

Loading…
Cancel
Save