From e9d017cba96cbbadbcc1f4c3fdebca4fb5186972 Mon Sep 17 00:00:00 2001
From: Semjon Geist <semjon.geist@ionos.com>
Date: Sun, 19 Feb 2023 18:52:26 +0100
Subject: [PATCH] add feature upload xlsx / json in existing table

---
 .../nc-gui/components/dlg/QuickImport.vue     |  7 ++-
 .../smartsheet/toolbar/ViewActions.vue        | 49 +++++++++++++------
 .../nc-gui/components/template/Editor.vue     | 16 +++++-
 3 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 8f3f1bad79..b98edd7c79 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/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
 }
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index f955ff7075..ac56024750 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/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">
-                  <div
-                    v-e="['a:actions:upload-csv']"
-                    class="nc-project-menu-item"
-                    :class="{ disabled: isLocked }"
-                    @click="!isLocked ? (quickImportDialog = true) : {}"
-                  >
-                    <MdiUploadOutline class="text-gray-500" />
-                    <!-- Upload CSV -->
-                    {{ $t('activity.uploadCSV') }}
-                    <div class="flex items-center text-gray-400"><MdiAlpha />version</div>
-                  </div>
-                </a-menu-item>
+                <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-${type}`]"
+                      class="nc-project-menu-item"
+                      :class="{ disabled: isLocked }"
+                      @click="!isLocked ? (dialog.value = true) : {}"
+                    >
+                      <MdiUploadOutline class="text-gray-500" />
+                      {{ `${$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" />
 
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 3d44a13a73..22b17e6543 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/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"