feat(gui): copying belongs to column

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

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

@@ -170,6 +170,7 @@ const getContainerScrollForElement = (
 
 const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyValue, isCellSelected, selectedCell } =
   useMultiSelect(
+    meta,
     fields,
     data,
     $$(editEnabled),
@@ -270,16 +271,16 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
         }
       }
     },
-    async (ctx: { row: number; col: number }) => {
+    async (ctx: { row: number; col?: number, updatedColumnTitle?: string }) => {
       const rowObj = data.value[ctx.row]
-      const columnObj = fields.value[ctx.col]
+      const columnObj = (ctx.col !== null && ctx.col !== undefined) ? fields.value[ctx.col] : null
 
-      if (isVirtualCol(columnObj)) {
+      if (!ctx.updatedColumnTitle && isVirtualCol(columnObj)) {
         return
       }
 
       // update/save cell value
-      await updateOrSaveRow(rowObj, columnObj.title)
+      await updateOrSaveRow(rowObj, ctx.updatedColumnTitle || columnObj.title)
     },
   )
 
@@ -645,7 +646,8 @@ const closeAddColumnDropdown = () => {
           <thead ref="tableHead">
           <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
             <th data-testid="grid-id-column">
-                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center" data-testid="nc-check-all">
+              <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center"
+                   data-testid="nc-check-all">
                 <template v-if="!readOnly">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                   <div

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

@@ -1,8 +1,10 @@
 import type { MaybeRef } from '@vueuse/core'
-import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
-import { isVirtualCol, RelationTypes, UITypes } from 'nocodb-sdk'
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Cell } from './cellRange'
 import { CellRange } from './cellRange'
+import { useMetas } from '~/composables/useMetas'
+import { extractPkFromRow } from '~/utils'
 import { copyTable, message, reactive, ref, unref, useCopy, useEventListener, useI18n } from '#imports'
 import type { Row } from '~/lib'
 
@@ -39,6 +41,7 @@ function convertCellData(args: { from: UITypes; to: UITypes; value: any }) {
  * Utility to help with multi-selecting rows/cells in the smartsheet
  */
 export function useMultiSelect(
+  _meta: MaybeRef<TableType>,
   fields: MaybeRef<ColumnType[]>,
   data: MaybeRef<Row[]>,
   _editEnabled: MaybeRef<boolean>,
@@ -49,10 +52,14 @@ export function useMultiSelect(
   keyEventHandler?: Function,
   syncCellData?: Function,
 ) {
+  const meta = ref(_meta)
+
   const { t } = useI18n()
 
   const { copy } = useCopy()
 
+  const { getMeta } = useMetas()
+
   let clipboardContext = $ref<{ value: any; uidt: UITypes } | null>(null)
 
   const editEnabled = ref(_editEnabled)
@@ -266,9 +273,35 @@ export function useMultiSelect(
                 await copyValue()
                 break
               case 86:
-                if(isVirtualCol(columnObj) && (columnObj.uidt !== UITypes.LinkToAnotherRecord || (columnObj.colOptions as LinkToAnotherRecordType)?.type !== RelationTypes.BELONGS_TO)) {
+                // handle belongs to column
+                if (
+                  columnObj.uidt === UITypes.LinkToAnotherRecord &&
+                  (columnObj.colOptions as LinkToAnotherRecordType)?.type === RelationTypes.BELONGS_TO
+                ) {
+                  rowObj.row[columnObj.title!] = convertCellData({
+                    value: clipboardContext.value,
+                    from: clipboardContext.uidt,
+                    to: columnObj.uidt as UITypes,
+                  })
+                  e.preventDefault()
+
+                  const foreignKeyColumn: ColumnType = meta.value?.columns.find(
+                    (c) => c.id === (columnObj.colOptions as LinkToAnotherRecordType)?.fk_child_column_id,
+                  )
+
+                  const relatedTableMeta = await getMeta((columnObj.colOptions as LinkToAnotherRecordType)?.fk_related_model_id!)
+
+                  rowObj.row[foreignKeyColumn.title!] = extractPkFromRow(clipboardContext.value, relatedTableMeta!.columns!)
+
+                  // makeEditable(rowObj, columnObj)
+                  return syncCellData?.({ ...selectedCell, updatedColumnTitle: foreignKeyColumn.title })
+                }
+
+                // if it's a virtual column excluding belongs to cell type skip paste
+                if (isVirtualCol(columnObj)) {
                   return message.info(t('msg.info.cannotPasteHere'))
                 }
+
                 // const clipboardText = await getClipboardData()
                 if (clipboardContext) {
                   rowObj.row[columnObj.title!] = convertCellData({
@@ -304,7 +337,6 @@ export function useMultiSelect(
         }
         break
     }
-
   }
 
   useEventListener(document, 'keydown', onKeyDown)