refactor(gui-v2): combine composables

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

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

@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
-import { Modal } from 'ant-design-vue'
-import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
+import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { useToast } from 'vue-toastification'
 import SettingsModal from './settings/SettingsModal.vue'
-import { useProject, useTabs, useUIPermission, watchEffect } from '#imports'
+import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
 import { useNuxtApp, useRoute } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils'
 import MdiSettingIcon from '~icons/mdi/cog'
 import MdiTable from '~icons/mdi/table'
 import MdiView from '~icons/mdi/eye-circle-outline'
@@ -18,7 +14,6 @@ import MdiPlus from '~icons/mdi/plus-circle-outline'
 import MdiDrag from '~icons/mdi/drag-vertical'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiAPIDocIcon from '~icons/mdi/open-in-new'
-import { TabType } from '~/composables'
 
 const { addTab } = useTabs()
 const toast = useToast()
@@ -27,7 +22,7 @@ const { isUIAllowed } = useUIPermission()
 const route = useRoute()
 const { tables, loadTables } = useProject(route.params.projectId as string)
 const { closeTab } = useTabs()
-const { deleteTable } = useDeleteTable()
+const { deleteTable } = useTable()
 
 const tablesById = $computed<Record<string, TableType>>(() =>
   tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -2,7 +2,7 @@
 import type { ComponentPublicInstance } from '@vue/runtime-core'
 import { Form } from 'ant-design-vue'
 import { useToast } from 'vue-toastification'
-import { onMounted, useProject, useTableCreate, useTabs } from '#imports'
+import { onMounted, useProject, useTable, useTabs } from '#imports'
 import { validateTableName } from '~/utils/validation'
 import { TabType } from '~/composables'
 
@@ -29,7 +29,7 @@ const { addTab } = useTabs()
 
 const { loadTables } = useProject()
 
-const { table, createTable, generateUniqueTitle, tables, project } = useTableCreate(async (table) => {
+const { table, createTable, generateUniqueTitle, tables, project } = useTable(async (table) => {
   await loadTables()
 
   addTab({

packages/nc-gui-v2/components/dlg/TableRename.vue

@@ -3,7 +3,7 @@ import { watchEffect } from '@vue/runtime-core'
 import { Form } from 'ant-design-vue'
 import type { TableType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
-import { useProject, useTableCreate, useTabs } from '#imports'
+import { useProject, useTabs } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { validateTableName } from '~/utils/validation'
 import { useNuxtApp } from '#app'

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { inject, useDeleteTable } from '#imports'
+import { inject, useTable } from '#imports'
 import { MetaInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
 const meta = inject(MetaInj)
 
-const { deleteTable } = useDeleteTable()
+const { deleteTable } = useTable()
 </script>
 
 <template>

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

@@ -10,7 +10,7 @@ export * from './useHasMany'
 export * from './useManyToMany'
 export * from './useMetas'
 export * from './useProject'
-export * from './useTableCreate'
+export * from './useTable'
 export * from './useTabs'
 export * from './useViewColumns'
 export * from './useViewData'
@@ -18,6 +18,5 @@ export * from './useViewFilters'
 export * from './useViews'
 export * from './useViewSorts'
 export * from './useVirtualCell'
-export * from './useDeleteTable'
 export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'

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

@@ -2,16 +2,59 @@ 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 } from '#imports'
+import { useProject } from './useProject'
 import { TabType } from '~/composables/useTabs'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils'
+import { useNuxtApp } from '#app'
+
+export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
+  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
+    title: '',
+    table_name: '',
+    columns: ['id', 'title', 'created_at', 'updated_at'],
+  })
 
-export function useDeleteTable() {
   const { $e, $api } = useNuxtApp()
   const toast = useToast()
   const { getMeta, removeMeta } = useMetas()
   const { loadTables } = useProject()
   const { closeTab } = useTabs()
+  const { sqlUi, project, tables } = useProject()
+
+  const createTable = async () => {
+    if (!sqlUi?.value) return
+    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
+      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
+        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
+        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
+        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
+        return true
+      }
+      return table.columns.includes(col.column_name)
+    })
+
+    const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
+      ...table,
+      columns,
+    })
+
+    onTableCreate?.(tableMeta)
+  }
+
+  watch(
+    () => table.title,
+    (title) => {
+      table.table_name = `${project?.value?.prefix || ''}${title}`
+    },
+  )
+
+  const generateUniqueTitle = () => {
+    let c = 1
+    while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
+      c++
+    }
+    table.title = `Sheet${c}`
+  }
 
   const deleteTable = (table: TableType) => {
     $e('c:table:delete')
@@ -65,5 +108,5 @@ export function useDeleteTable() {
     })
   }
 
-  return { deleteTable }
+  return { table, createTable, generateUniqueTitle, tables, project, deleteTable }
 }

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

@@ -1,52 +0,0 @@
-import type { TableType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
-import { useProject } from './useProject'
-import { useNuxtApp } from '#app'
-
-export function useTableCreate(onTableCreate?: (tableMeta: TableType) => void) {
-  const table = reactive<{ title: string; table_name: string; columns: string[] }>({
-    title: '',
-    table_name: '',
-    columns: ['id', 'title', 'created_at', 'updated_at'],
-  })
-
-  const { sqlUi, project, tables } = useProject()
-  const { $api } = useNuxtApp()
-
-  const createTable = async () => {
-    if (!sqlUi?.value) return
-    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
-      if (col.column_name === 'id' && table.columns.includes('id_ag')) {
-        Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
-        col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
-        col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
-        return true
-      }
-      return table.columns.includes(col.column_name)
-    })
-
-    const tableMeta = await $api.dbTable.create(project?.value?.id as string, {
-      ...table,
-      columns,
-    })
-
-    onTableCreate?.(tableMeta)
-  }
-
-  watch(
-    () => table.title,
-    (title) => {
-      table.table_name = `${project?.value?.prefix || ''}${title}`
-    },
-  )
-
-  const generateUniqueTitle = () => {
-    let c = 1
-    while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
-      c++
-    }
-    table.title = `Sheet${c}`
-  }
-
-  return { table, createTable, generateUniqueTitle, tables, project }
-}