feat: drag-n-drop LTAR and Lookup creation

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

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

@@ -184,6 +184,15 @@ const initSortable = (el: Element) => {
       })
     },
     animation: 150,
+    setData(dataTransfer, dragEl) {
+      dataTransfer.setData(
+        'text/json',
+        JSON.stringify({
+          id: dragEl.dataset.id,
+          title: dragEl.dataset.title,
+        }),
+      )
+    },
   })
 }
 
@@ -699,6 +708,7 @@ const duplicateTable = async (table: TableType) => {
                     class="nc-tree-item text-sm cursor-pointer group"
                     :data-order="table.order"
                     :data-id="table.id"
+                    :data-title="table.title"
                     :data-testid="`tree-view-table-${table.title}`"
                     @click="addTableTab(table)"
                   >
@@ -1023,6 +1033,7 @@ const duplicateTable = async (table: TableType) => {
                       class="nc-tree-item text-sm cursor-pointer group"
                       :data-order="table.order"
                       :data-id="table.id"
+                      :data-title="table.title"
                       :data-testid="`tree-view-table-${table.title}`"
                       @click="addTableTab(table)"
                     >

packages/nc-gui/components/smartsheet/Grid.vue

@@ -428,6 +428,8 @@ const showLoading = ref(true)
 
 const skipRowRemovalOnCancel = ref(false)
 
+const preloadColumn = ref<Partial<any>>()
+
 function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false) {
   const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
 
@@ -457,6 +459,13 @@ const onXcResizing = (cn: string, event: any) => {
 
 defineExpose({
   loadData,
+  openColumnCreate: (data) => {
+    tableHead.value?.querySelector('th:last-child')?.scrollIntoView({ behavior: 'smooth' })
+    setTimeout(() => {
+      addColumnDropdown.value = true
+      preloadColumn.value = data
+    }, 500)
+  },
 })
 
 // reset context menu target on hide
@@ -869,6 +878,7 @@ const confirmDeleteRow = (row: number) => {
                   <template #overlay>
                     <SmartsheetColumnEditOrAddProvider
                       v-if="addColumnDropdown"
+                      :preload="preloadColumn"
                       :column-position="columnOrder"
                       @submit="closeAddColumnDropdown"
                       @cancel="closeAddColumnDropdown"

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ColumnReqType } from 'nocodb-sdk'
+import type { ColumnReqType, ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   IsFormInj,
@@ -25,6 +25,7 @@ import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
 
 const props = defineProps<{
+  preload?: Partial<ColumnType>
   columnPosition?: Pick<ColumnReqType, 'column_order'>
 }>()
 
@@ -125,6 +126,18 @@ watchEffect(() => {
 onMounted(() => {
   if (!isEdit.value) {
     generateNewColumnMeta()
+    const { colOptions, ...others } = props.preload || {}
+    formState.value = {
+      ...formState.value,
+      ...others,
+    }
+    if (colOptions) {
+      onUidtOrIdTypeChange()
+      formState.value = {
+        ...formState.value,
+        ...colOptions,
+      }
+    }
   } else {
     if (formState.value.pk) {
       message.info(t('msg.info.editingPKnotSupported'))

packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue

@@ -6,6 +6,7 @@ import { MetaInj, inject, ref, toRef, useProvideColumnCreateStore } from '#impor
 interface Props {
   column?: ColumnType
   columnPosition?: Pick<ColumnReqType, 'column_order'>
+  preload?: Partial<ColumnType>
 }
 
 const props = defineProps<Props>()
@@ -16,9 +17,16 @@ const meta = inject(MetaInj, ref())
 
 const column = toRef(props, 'column')
 
+const preload = toRef(props, 'preload')
+
 useProvideColumnCreateStore(meta, column)
 </script>
 
 <template>
-  <SmartsheetColumnEditOrAdd :column-position="props.columnPosition" @submit="emit('submit')" @cancel="emit('cancel')" />
+  <SmartsheetColumnEditOrAdd
+    :preload="preload"
+    :column-position="props.columnPosition"
+    @submit="emit('submit')"
+    @cancel="emit('cancel')"
+  />
 </template>

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   FieldsInj,
@@ -29,7 +30,7 @@ const props = defineProps<{
 
 const { isUIAllowed } = useUIPermission()
 
-const { metas } = useMetas()
+const { metas, getMeta } = useMetas()
 
 const activeTab = toRef(props, 'activeTab')
 
@@ -64,10 +65,68 @@ provide(
   ReadonlyInj,
   computed(() => !isUIAllowed('xcDatatableEditable')),
 )
+
+const grid = ref()
+
+const onDrop = async (event: DragEvent) => {
+  event.preventDefault()
+  try {
+    // Access the dropped data
+    const data = JSON.parse(event.dataTransfer?.getData('text/json')!)
+    // Do something with the received data
+
+    const childMeta = await getMeta(data.id)
+    const parentMeta = metas.value[meta.value.id!]
+
+    if (!childMeta || !parentMeta) return
+
+    const parentPkCol = parentMeta.columns?.find((c) => c.pk)
+    const childPkCol = childMeta.columns?.find((c) => c.pk)
+
+    // if already a link column exists, create a new Lookup column
+    const relationCol = parentMeta.columns?.find((c: ColumnType) => {
+      if (c.uidt !== UITypes.LinkToAnotherRecord) return false
+
+      const ltarOptions = c.colOptions as LinkToAnotherRecordType
+
+      if (ltarOptions.type !== 'mm') {
+        return false
+      }
+
+      if (ltarOptions.fk_related_model_id === childMeta.id) {
+        return true
+      }
+
+      return false
+    })
+    if (relationCol) {
+      const lookupCol = childMeta.columns?.find((c) => c.pv) ?? childMeta.columns?.[0]
+      grid.value?.openColumnCreate({
+        uidt: UITypes.Lookup,
+        title: `${data.title}Lookup`,
+        fk_relation_column_id: relationCol.id,
+        fk_lookup_column_id: lookupCol?.id,
+      })
+    } else {
+      grid.value?.openColumnCreate({
+        uidt: UITypes.LinkToAnotherRecord,
+        title: `${data.title}List`,
+        parentId: parentMeta.id,
+        childId: childMeta.id,
+        parentTable: parentMeta.title,
+        parentColumn: parentPkCol.title,
+        childTable: childMeta.title,
+        childColumn: childPkCol?.title,
+      })
+    }
+  } catch (e) {
+    console.log('error', e)
+  }
+}
 </script>
 
 <template>
-  <div class="nc-container flex h-full">
+  <div class="nc-container flex h-full" @drop="onDrop" @dragover.prevent>
     <div class="flex flex-col h-full flex-1 min-w-0">
       <LazySmartsheetToolbar />
 
@@ -75,7 +134,7 @@ provide(
         <template v-if="meta">
           <div class="flex flex-1 min-h-0">
             <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
-              <LazySmartsheetGrid v-if="isGrid" />
+              <LazySmartsheetGrid v-if="isGrid" ref="grid" />
 
               <LazySmartsheetGallery v-else-if="isGallery" />