feat(gui-v2): add deleteTable & fix a-collapse panel

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

@@ -4,7 +4,6 @@ import { UITypes } from 'nocodb-sdk'
 import type { SizeType } from 'ant-design-vue/es/config-provider'
 import { computed, onMounted, provide, watch } from '#imports'
 import MdiTableIcon from '~icons/mdi/table'
-import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiStringIcon from '~icons/mdi/alpha-a'
 import MdiLongTextIcon from '~icons/mdi/text'
 import MdiNumericIcon from '~icons/mdi/numeric'
@@ -96,7 +95,14 @@ const onTableNameUpdate = (oldTable: string, newVal: string) => {
 }
 
 const deleteTable = (tableIdx: number) => {
-  // TODO:
+  const deleteTable = project.value.tables[tableIdx]
+  for (const table of project.value.tables) {
+    if (table === deleteTable) {
+      continue
+    }
+    table.columns = table.columns.filter((c: Record<string, any>) => c.ref_table_name !== deleteTable.table_name)
+  }
+  project.value.tables.splice(tableIdx, 1)
 }
 
 const isSelect = (col: ColumnType) => {
@@ -145,13 +151,9 @@ const addNewColumnRow = (table: Record<string, any>, uidt?: string) => {
         {{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' : '' }}
         available for import
       </p>
-      <a-collapse
-        v-if="project.value?.tables && project.value?.tables.length"
-        v-model:activeKey="expansionPanel"
-        v-for="(table, i) in project.value?.tables"
-        :key="i"
-      >
-        <template #expandIcon="{ isActive }">
+      <a-collapse v-if="project.value?.tables && project.value?.tables.length" v-model:activeKey="expansionPanel">
+        <a-collapse-panel v-for="(table, i) in project.value?.tables" :key="i">
+          <template #header>
             <v-text-field
               v-if="editableTn[i]"
               :value="table.table_name"
@@ -170,16 +172,16 @@ const addNewColumnRow = (table: Record<string, any>, uidt?: string) => {
               <MdiTableIcon />
               {{ table.table_name }}
             </span>
-          <v-spacer />
+          </template>
+          <template #extra>
             <a-tooltip bottom>
               <template #title>
                 <!-- TODO: i18n -->
                 <span>Delete Table</span>
               </template>
-            <MdiDeleteIcon v-if="project.value.tables.length > 1" @click.stop="deleteTable(i)" />
+              <MdiDeleteOutlineIcon v-if="project.value.tables.length > 1" @click.stop="deleteTable(i)" />
             </a-tooltip>
           </template>
-        <a-collapse-panel>
           <a-table v-if="table.columns.length" :dataSource="table.columns" :columns="tableColumns" :pagination="false">
             <template #headerCell="{ column }">
               <template v-if="column.key === 'column_name'">