From 12a64cf641c851787838b39608513eaa1fdb110f Mon Sep 17 00:00:00 2001 From: Wing-Kam Wong Date: Tue, 18 Oct 2022 11:28:52 +0800 Subject: [PATCH] wip(nc-gui): papaparse integration --- .../nc-gui/components/dlg/QuickImport.vue | 113 +++++++++++++----- 1 file changed, 80 insertions(+), 33 deletions(-) diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue index e2f7629ca3..d569e572c0 100644 --- a/packages/nc-gui/components/dlg/QuickImport.vue +++ b/packages/nc-gui/components/dlg/QuickImport.vue @@ -54,7 +54,9 @@ const templateEditorModal = ref(false) const useForm = Form.useForm const importState = reactive({ - fileList: [] as (UploadFile & { data: string | ArrayBuffer })[], + // TODO: remove + // fileList: [] as (UploadFile & { data: string | ArrayBuffer })[], + fileList: [] as UploadFile[], url: '', jsonEditor: {}, parserConfig: { @@ -134,17 +136,17 @@ async function handlePreImport() { loading.value = true 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') { try { await validate() - - await parseAndExtractData(importState.url, '') + await parseAndExtractData(importState.url) } catch (e: any) { message.error(await extractSdkResponseErrorMsg(e)) } } else if (activeKey.value === 'jsonEditorTab') { - await parseAndExtractData(JSON.stringify(importState.jsonEditor), '') + await parseAndExtractData(JSON.stringify(importState.jsonEditor)) } loading.value = false @@ -164,13 +166,14 @@ async function handleImport() { dialogShow.value = false } -async function parseAndExtractData(val: string | ArrayBuffer, name: string) { +// papaparse experiment +async function parseAndExtractData2(val: UploadFile[]) { try { templateData.value = null importData.value = null importColumns.value = [] - const templateGenerator = getAdapter(name, val) + const templateGenerator = getAdapter(val) if (!templateGenerator) { message.error(t('msg.error.templateGeneratorNotFound')) @@ -179,7 +182,36 @@ async function parseAndExtractData(val: string | ArrayBuffer, name: string) { 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.tables[0].table_name = populateUniqueTableName() importData.value = templateGenerator.getData() @@ -202,27 +234,34 @@ function handleChange(info: UploadChangeParam) { const status = info.file.status if (status !== 'uploading' && status !== 'removed') { - const reader = new FileReader() - - reader.onload = (e: ProgressEvent) => { - 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 `` we just add the data to the file */ - if (target) { - target.data = e.target.result - } else if (!target) { - /** 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', - data: e.target.result, - }) - } - } + // const reader = new FileReader() + // reader.onload = (e: ProgressEvent) => { + // 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 `` we just add the data to the file */ + // if (target) { + // target.data = e.target.result + // } else if (!target) { + // /** 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', + // 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', + }) } - - reader.readAsArrayBuffer(info.file.originFileObj!) + console.log(info) + console.log(importState.fileList) } if (status === 'done') { @@ -246,22 +285,30 @@ function populateUniqueTableName() { return `Sheet${c}` } -function getAdapter(name: string, val: any) { - if (IsImportTypeExcel.value || isImportTypeCsv.value) { +function getAdapter(val: any) { + 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) { case 'uploadTab': - return new ExcelTemplateAdapter(name, val, importState.parserConfig) + return new ExcelTemplateAdapter(val, importState.parserConfig) case 'urlTab': return new ExcelUrlTemplateAdapter(val, importState.parserConfig) } } else if (isImportTypeJson.value) { switch (activeKey.value) { case 'uploadTab': - return new JSONTemplateAdapter(name, val, importState.parserConfig) + return new JSONTemplateAdapter(val, importState.parserConfig) case 'urlTab': return new JSONUrlTemplateAdapter(val, importState.parserConfig) case 'jsonEditorTab': - return new JSONTemplateAdapter(name, val, importState.parserConfig) + return new JSONTemplateAdapter(val, importState.parserConfig) } }