github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): add spinner during parsing large data

pull/4135/head
Wing-Kam Wong 2 years ago
parent
12a64cf641
commit
d892aef5d3
1 changed files with 108 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 210
      packages/nc-gui/components/dlg/QuickImport.vue

210
packages/nc-gui/components/dlg/QuickImport.vue
Unescape View File

@ -51,6 +51,8 @@ const importColumns = ref([])
const templateEditorModal = ref(false) const templateEditorModal = ref(false)
const isParsingData = ref(false)
const useForm = Form.useForm const useForm = Form.useForm
const importState = reactive({ const importState = reactive({
@ -134,6 +136,7 @@ const modalWidth = computed(() => {
async function handlePreImport() { async function handlePreImport() {
loading.value = true loading.value = true
isParsingData.value = true
if (activeKey.value === 'uploadTab') { if (activeKey.value === 'uploadTab') {
// TODO: update // TODO: update
@ -149,7 +152,9 @@ async function handlePreImport() {
await parseAndExtractData(JSON.stringify(importState.jsonEditor)) await parseAndExtractData(JSON.stringify(importState.jsonEditor))
} }
loading.value = false // TODO: fix
// loading.value = false
// isParsingData.value = false
} }
async function handleImport() { async function handleImport() {
@ -188,8 +193,8 @@ async function parseAndExtractData2(val: UploadFile[]) {
// importData.value = templateGenerator.getData() // importData.value = templateGenerator.getData()
// if (importOnly) importColumns.value = templateGenerator.getColumns() // if (importOnly) importColumns.value = templateGenerator.getColumns()
templateEditorModal.value = true templateEditorModal.value = true
isParsingData.value = false
}) })
} catch (e: any) { } catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
@ -338,115 +343,116 @@ const customReqCbk = (customReqArgs: { file: any; onSuccess: () => void }) => {
wrap-class-name="nc-modal-quick-import" wrap-class-name="nc-modal-quick-import"
@keydown.esc="dialogShow = false" @keydown.esc="dialogShow = false"
> >
<div class="px-5"> <a-spin :spinning="isParsingData" tip="Parsing Data ..." size="large">
<div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div> <div class="px-5">
<div class="prose-xl font-weight-bold my-5">{{ importMeta.header }}</div>
<div class="mt-5">
<LazyTemplateEditor <div class="mt-5">
v-if="templateEditorModal" <LazyTemplateEditor
ref="templateEditorRef" v-if="templateEditorModal"
:project-template="templateData" ref="templateEditorRef"
:import-data="importData" :project-template="templateData"
:import-columns="importColumns" :import-data="importData"
:import-only="importOnly" :import-columns="importColumns"
:quick-import-type="importType" :import-only="importOnly"
:max-rows-to-parse="importState.parserConfig.maxRowsToParse" :quick-import-type="importType"
class="nc-quick-import-template-editor" :max-rows-to-parse="importState.parserConfig.maxRowsToParse"
@import="handleImport" class="nc-quick-import-template-editor"
/> @import="handleImport"
/>
<a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" tab-position="top">
<a-tab-pane key="uploadTab" :closable="false"> <a-tabs v-else v-model:activeKey="activeKey" hide-add type="editable-card" tab-position="top">
<template #tab> <a-tab-pane key="uploadTab" :closable="false">
<!-- Upload --> <template #tab>
<div class="flex items-center gap-2"> <!-- Upload -->
<MdiFileUploadOutline /> <div class="flex items-center gap-2">
{{ $t('general.upload') }} <MdiFileUploadOutline />
{{ $t('general.upload') }}
</div>
</template>
<div class="py-6">
<a-upload-dragger
v-model:fileList="importState.fileList"
name="file"
class="nc-input-import !scrollbar-thin-dull"
:accept="importMeta.acceptTypes"
:max-count="1"
list-type="picture"
:custom-request="customReqCbk"
@change="handleChange"
@reject="rejectDrop"
>
<MdiFilePlusOutline size="large" />
<!-- Click or drag file to this area to upload -->
<p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p>
<p class="ant-upload-hint">
{{ importMeta.uploadHint }}
</p>
</a-upload-dragger>
</div> </div>
</template> </a-tab-pane>
<div class="py-6"> <a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
<a-upload-dragger <template #tab>
v-model:fileList="importState.fileList" <span class="flex items-center gap-2">
name="file" <MdiCodeJson />
class="nc-input-import !scrollbar-thin-dull" JSON Editor
:accept="importMeta.acceptTypes" </span>
:max-count="1" </template>
list-type="picture"
:custom-request="customReqCbk" <div class="pb-3 pt-3">
@change="handleChange" <LazyMonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
@reject="rejectDrop" </div>
> </a-tab-pane>
<MdiFilePlusOutline size="large" />
<a-tab-pane v-else key="urlTab" :closable="false">
<!-- Click or drag file to this area to upload --> <template #tab>
<p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p> <span class="flex items-center gap-2">
<MdiLinkVariant />
<p class="ant-upload-hint"> URL
{{ importMeta.uploadHint }} </span>
</p> </template>
</a-upload-dragger>
</div> <div class="pr-10 pt-5">
</a-tab-pane> <a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
<a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
<a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false"> <a-input v-model:value="importState.url" size="large" />
<template #tab> </a-form-item>
<span class="flex items-center gap-2"> </a-form>
<MdiCodeJson /> </div>
JSON Editor </a-tab-pane>
</span> </a-tabs>
</template> </div>
<div class="pb-3 pt-3">
<LazyMonacoEditor ref="jsonEditorRef" v-model="importState.jsonEditor" class="min-h-60 max-h-80" />
</div>
</a-tab-pane>
<a-tab-pane v-else key="urlTab" :closable="false">
<template #tab>
<span class="flex items-center gap-2">
<MdiLinkVariant />
URL
</span>
</template>
<div class="pr-10 pt-5">
<a-form :model="importState" name="quick-import-url-form" layout="horizontal" class="mb-0">
<a-form-item :label="importMeta.urlInputLabel" v-bind="validateInfos.url">
<a-input v-model:value="importState.url" size="large" />
</a-form-item>
</a-form>
</div>
</a-tab-pane>
</a-tabs>
</div>
<div v-if="!templateEditorModal"> <div v-if="!templateEditorModal">
<a-divider /> <a-divider />
<div class="mb-4"> <div class="mb-4">
<!-- Advanced Settings --> <!-- Advanced Settings -->
<span class="prose-lg">{{ $t('title.advancedSettings') }}</span> <span class="prose-lg">{{ $t('title.advancedSettings') }}</span>
<a-form-item class="mt-4 mb-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse"> <a-form-item class="mt-4 mb-2" :label="t('msg.info.footMsg')" v-bind="validateInfos.maxRowsToParse">
<a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" /> <a-input-number v-model:value="importState.parserConfig.maxRowsToParse" :min="1" :max="50000" />
</a-form-item> </a-form-item>
<!-- Flatten nested --> <!-- Flatten nested -->
<div v-if="isImportTypeJson" class="mt-3"> <div v-if="isImportTypeJson" class="mt-3">
<a-checkbox v-model:checked="importState.parserConfig.normalizeNested"> <a-checkbox v-model:checked="importState.parserConfig.normalizeNested">
<span class="caption">{{ $t('labels.flattenNested') }}</span> <span class="caption">{{ $t('labels.flattenNested') }}</span>
</a-checkbox> </a-checkbox>
</div> </div>
<!-- Import Data --> <!-- Import Data -->
<div v-if="isImportTypeJson" class="mt-4"> <div v-if="isImportTypeJson" class="mt-4">
<a-checkbox v-model:checked="importState.parserConfig.importData">{{ $t('labels.importData') }}</a-checkbox> <a-checkbox v-model:checked="importState.parserConfig.importData">{{ $t('labels.importData') }}</a-checkbox>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </a-spin>
<template #footer> <template #footer>
<a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button> <a-button v-if="templateEditorModal" key="back" @click="templateEditorModal = false">Back</a-button>

Write Preview
Loading…
Cancel
Save