add feature upload xlsx / json in existing table

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
 }

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">
-                  <div
+                  <a-menu-item v-if="isUIAllowed(`${type}Import`) && !isView && !isPublicView" :key="type">
-                    v-e="['a:actions:upload-csv']"
+                    <div
-                    class="nc-project-menu-item"
+                      v-e="[`a:actions:upload-${type}`]"
-                    :class="{ disabled: isLocked }"
+                      class="nc-project-menu-item"
-                    @click="!isLocked ? (quickImportDialog = true) : {}"
+                      :class="{ disabled: isLocked }"
-                  >
+                      @click="!isLocked ? (dialog.value = true) : {}"
-                    <MdiUploadOutline class="text-gray-500" />
+                    >
-                    <!-- Upload CSV -->
+                      <MdiUploadOutline class="text-gray-500" />
-                    {{ $t('activity.uploadCSV') }}
+                      {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
-                    <div class="flex items-center text-gray-400"><MdiAlpha />version</div>
+                      <div class="flex items-center text-gray-400"><MdiAlpha />version</div>
-                  </div>
+                    </div>
-                </a-menu-item>
+                  </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" />
 

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"