Browse Source

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

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2860/head
Pranav C 2 years ago
parent
commit
491fad361b
  1. 54
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 9
      packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
  3. 68
      packages/nc-gui-v2/composables/useDeleteTable.ts

54
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) => {

9
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>

68
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 }
}
Loading…
Cancel
Save