Browse Source

add feature upload xlsx / json in existing table

pull/5164/head
Semjon Geist 2 years ago
parent
commit
e9d017cba9
  1. 7
      packages/nc-gui/components/dlg/QuickImport.vue
  2. 33
      packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
  3. 16
      packages/nc-gui/components/template/Editor.vue

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

@ -61,7 +61,7 @@ const isParsingData = ref(false)
const useForm = Form.useForm
const importState = reactive({
const defaultImportState = {
fileList: [] as importFileList | streamImportFileList,
url: '',
jsonEditor: {},
@ -72,7 +72,8 @@ const importState = reactive({
firstRowAsHeaders: true,
shouldImportData: true,
},
})
}
const importState = reactive(defaultImportState)
const isImportTypeJson = computed(() => importType === 'json')
@ -176,6 +177,8 @@ async function handleImport() {
return message.error(await extractSdkResponseErrorMsg(e))
} finally {
importLoading.value = false
templateEditorModal.value = false
Object.assign(importState, defaultImportState)
}
dialogShow.value = false
}

33
packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@ -1,4 +1,5 @@
<script lang="ts" setup>
import type { Ref } from '@vue/reactivity'
import {
ActiveViewInj,
IsLockedInj,
@ -41,11 +42,19 @@ const showApiSnippetDrawer = ref(false)
const showErd = ref(false)
const quickImportDialog = ref(false)
type QuickImportDialogType = 'csv' | 'excel' | 'json'
const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel', 'json']
const quickImportDialogs: Record<typeof quickImportDialogTypes[number], Ref<boolean>> = quickImportDialogTypes.reduce(
(acc: any, curr) => {
acc[curr] = ref(false)
return acc
},
{},
) as Record<QuickImportDialogType, Ref<boolean>>
const { isUIAllowed } = useUIPermission()
const { isSharedBase } = useProject()
const { bases, isSharedBase } = useProject()
const Icon = computed(() => {
switch (selectedView.value?.lock_type) {
@ -173,19 +182,20 @@ useMenuCloseOnEsc(open)
</template>
<template #expandIcon></template>
<a-menu-item v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
<template v-for="(dialog, type) in quickImportDialogs">
<a-menu-item v-if="isUIAllowed(`${type}Import`) && !isView && !isPublicView" :key="type">
<div
v-e="['a:actions:upload-csv']"
v-e="[`a:actions:upload-${type}`]"
class="nc-project-menu-item"
:class="{ disabled: isLocked }"
@click="!isLocked ? (quickImportDialog = true) : {}"
@click="!isLocked ? (dialog.value = true) : {}"
>
<MdiUploadOutline class="text-gray-500" />
<!-- Upload CSV -->
{{ $t('activity.uploadCSV') }}
{{ `${$t('general.upload')} ${type.toUpperCase()}` }}
<div class="flex items-center text-gray-400"><MdiAlpha />version</div>
</div>
</a-menu-item>
</template>
</a-sub-menu>
</template>
@ -230,7 +240,14 @@ useMenuCloseOnEsc(open)
</template>
</a-dropdown>
<LazyDlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-data-only="true" />
<LazyDlgQuickImport
v-for="type in quickImportDialogTypes"
:key="type"
v-model="quickImportDialogs[type].value"
:import-type="type"
:base-id="bases[0].id"
:import-data-only="true"
/>
<LazyWebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />

16
packages/nc-gui/components/template/Editor.vue

@ -405,10 +405,14 @@ async function importTemplate() {
const tableId = meta.value?.id
const projectName = project.value.title!
const table_names = data.tables.map((t: Record<string, any>) => t.table_name)
await Promise.all(
Object.keys(importData).map((key: string) =>
(async (k) => {
if (!table_names.includes(k)) {
return
}
const data = importData[k]
const total = data.length
@ -458,7 +462,7 @@ async function importTemplate() {
// Successfully imported table data
message.success(t('msg.success.tableDataImported'))
} catch (e: any) {
message.error(e.message)
message.error(await extractSdkResponseErrorMsg(e))
} finally {
isImporting.value = false
}
@ -633,6 +637,16 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
</span>
</template>
<template #extra>
<a-tooltip bottom>
<template #title>
<!-- TODO: i18n -->
<span>Delete Table</span>
</template>
<mdi-delete-outline v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" />
</a-tooltip>
</template>
<a-table
v-if="srcDestMapping"
class="template-form"

Loading…
Cancel
Save