refactor(gui-v2): integrate delete table with delete icon

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -27,6 +27,7 @@ const { isUIAllowed } = useUIPermission()
 const route = useRoute()
 const { tables, loadTables } = useProject(route.params.projectId as string)
 const { closeTab } = useTabs()
+const { deleteTable } = useDeleteTable()
 
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
@@ -128,59 +129,6 @@ const setMenuContext = (type: 'table' | 'main', value?: any) => {
   $e('c:table:create:navdraw:right-click')
 }
 
-const deleteTable = (table: TableType) => {
-  $e('c:table:delete')
-  // 'Click Submit to Delete The table'
-  Modal.confirm({
-    title: `Click Yes to Delete The table : ${table.title}`,
-    okText: 'Yes',
-    okType: 'danger',
-    cancelText: 'No',
-    async onOk() {
-      const { getMeta, removeMeta } = useMetas()
-      try {
-        const meta = (await getMeta(table.id as string)) as TableType
-        const relationColumns = meta?.columns?.filter((c) => c.uidt === UITypes.LinkToAnotherRecord)
-
-        if (relationColumns?.length) {
-          const refColMsgs = await Promise.all(
-            relationColumns.map(async (c, i) => {
-              const refMeta = (await getMeta(
-                (c?.colOptions as LinkToAnotherRecordType)?.fk_related_model_id as string,
-              )) as TableType
-              return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`
-            }),
-          )
-          toast.info(
-            h('div', {
-              innerHTML: `<div style="padding:10px 4px">Unable to delete tables because of the following.
-                <br><br>${refColMsgs.join('<br>')}<br><br>
-                Delete them & try again</div>`,
-            }),
-          )
-          return
-        }
-
-        await $api.dbTable.delete(table?.id as string)
-
-        closeTab({
-          type: TabType.TABLE,
-          id: table.id,
-          title: table.title,
-        })
-
-        await loadTables()
-
-        removeMeta(table.id as string)
-        toast.info(`Deleted table ${table.title} successfully`)
-        $e('a:table:delete')
-      } catch (e: any) {
-        toast.error(await extractSdkResponseErrorMsg(e))
-      }
-    },
-  })
-}
-
 const renameTableDlg = ref(false)
 const renameTableMeta = ref()
 const showRenameTableDlg = (table: TableType, rightClick = false) => {

packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
+import { inject } from '#imports'
+import useDeleteTable from '~/composables/useDeleteTable'
+import { MetaInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
+
+const meta = inject(MetaInj)
+
+const { deleteTable } = useDeleteTable()
 </script>
 
 <template>
@@ -7,7 +14,7 @@ import MdiDeleteIcon from '~icons/mdi/delete-outline'
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
-      <MdiDeleteIcon class="group-hover:(!text-white)" />
+      <MdiDeleteIcon class="group-hover:(!text-white)" @click="deleteTable(meta)" />
     </div>
   </a-tooltip>
 </template>

packages/nc-gui-v2/composables/useDeleteTable.ts

@@ -0,0 +1,68 @@
+import { Modal } from 'ant-design-vue'
+import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { useToast } from 'vue-toastification'
+import useTabs, { TabType } from '~/composables/useTabs'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+
+export default () => {
+  const { $e, $api } = useNuxtApp()
+  const toast = useToast()
+  const { getMeta, removeMeta } = useMetas()
+  const { loadTables } = useProject()
+  const { closeTab } = useTabs()
+
+  const deleteTable = (table: TableType) => {
+    $e('c:table:delete')
+    // 'Click Submit to Delete The table'
+    Modal.confirm({
+      title: `Click Yes to Delete The table : ${table.title}`,
+      okText: 'Yes',
+      okType: 'danger',
+      cancelText: 'No',
+      async onOk() {
+        try {
+          const meta = (await getMeta(table.id as string)) as TableType
+          const relationColumns = meta?.columns?.filter((c) => c.uidt === UITypes.LinkToAnotherRecord)
+
+          if (relationColumns?.length) {
+            const refColMsgs = await Promise.all(
+              relationColumns.map(async (c, i) => {
+                const refMeta = (await getMeta(
+                  (c?.colOptions as LinkToAnotherRecordType)?.fk_related_model_id as string,
+                )) as TableType
+                return `${i + 1}. ${c.title} is a LinkToAnotherRecord of ${(refMeta && refMeta.title) || c.title}`
+              }),
+            )
+            toast.info(
+              h('div', {
+                innerHTML: `<div style="padding:10px 4px">Unable to delete tables because of the following.
+                <br><br>${refColMsgs.join('<br>')}<br><br>
+                Delete them & try again</div>`,
+              }),
+            )
+            return
+          }
+
+          await $api.dbTable.delete(table?.id as string)
+
+          closeTab({
+            type: TabType.TABLE,
+            id: table.id,
+            title: table.title,
+          })
+
+          await loadTables()
+
+          removeMeta(table.id as string)
+          toast.info(`Deleted table ${table.title} successfully`)
+          $e('a:table:delete')
+        } catch (e: any) {
+          toast.error(await extractSdkResponseErrorMsg(e))
+        }
+      },
+    })
+  }
+
+  return { deleteTable }
+}