Merge pull request #4149 from nocodb/fix/cell-refs

fix(nc-gui): use `TableDataCell` component to set cell refs

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

@@ -18,6 +18,7 @@ import {
   ReloadViewDataHookInj,
   computed,
   createEventHook,
+  enumColor,
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
@@ -67,7 +68,7 @@ const isView = false
 
 let editEnabled = $ref(false)
 
-const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail, isSqlView } = useSmartsheetStoreOrThrow()
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -273,7 +274,9 @@ watch(contextMenu, () => {
 
 const rowRefs = $ref<any[]>()
 
-async function clearCell(ctx: { row: number; col: number }) {
+async function clearCell(ctx: { row: number; col: number } | null) {
+  if (!ctx) return
+
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
 
@@ -586,9 +589,8 @@ watch(
                       </div>
                     </div>
                   </td>
-                  <td
+                  <SmartsheetTableDataCell
                     v-for="(columnObj, colIndex) of fields"
-                    :ref="cellRefs.set"
                     :key="columnObj.id"
                     class="cell relative cursor-pointer nc-grid-cell"
                     :class="{
@@ -631,7 +633,7 @@ watch(
                         @cancel="editEnabled = false"
                       />
                     </div>
-                  </td>
+                  </SmartsheetTableDataCell>
                 </tr>
               </template>
             </LazySmartsheetRow>

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk'
 import type { Row } from '~/lib'
 import {
   ReloadRowDataHookInj,
@@ -20,7 +22,7 @@ const currentRow = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
 
-const { isNew, state, syncLTARRefs, clearLTARCell } = useProvideSmartsheetRowStore(meta, currentRow)
+const { isNew, state, syncLTARRefs, clearLTARCell } = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow)
 
 // on changing isNew(new record insert) status sync LTAR cell values
 watch(isNew, async (nextVal, prevVal) => {

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

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref, useSmartsheetStoreOrThrow } from '#imports'
+
+const { cellRefs } = useSmartsheetStoreOrThrow()
+
+const el = ref<HTMLTableDataCellElement>()
+
+onMounted(() => {
+  cellRefs.value.push(el.value!)
+})
+
+onBeforeUnmount(() => {
+  const index = cellRefs.value.indexOf(el.value!)
+  if (index > -1) {
+    cellRefs.value.splice(index, 1)
+  }
+})
+</script>
+
+<template>
+  <td ref="el">
+    <slot />
+  </td>
+</template>

packages/nc-gui/composables/useSmartsheetStore.ts

@@ -1,21 +1,21 @@
 import { ViewTypes } from 'nocodb-sdk'
 import type { FilterType, KanbanType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { computed, reactive, ref, unref, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
+import { computed, reactive, ref, unref, useInjectionState, useNuxtApp, useProject } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
     view: Ref<ViewType | undefined>,
     meta: Ref<TableType | KanbanType | undefined>,
     shared = false,
-    initalSorts?: Ref<SortType[]>,
+    initialSorts?: Ref<SortType[]>,
     initialFilters?: Ref<FilterType[]>,
   ) => {
     const { $api } = useNuxtApp()
 
     const { sqlUi } = useProject()
 
-    const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+    const cellRefs = ref<HTMLTableDataCellElement[]>([])
 
     // state
     // todo: move to grid view store
@@ -50,7 +50,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 
     const isSqlView = computed(() => (meta.value as TableType)?.type === 'view')
 
-    const sorts = ref<SortType[]>(unref(initalSorts) ?? [])
+    const sorts = ref<SortType[]>(unref(initialSorts) ?? [])
     const nestedFilters = ref<FilterType[]>(unref(initialFilters) ?? [])
 
     return {
@@ -78,9 +78,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
 export { useProvideSmartsheetStore }
 
 export function useSmartsheetStoreOrThrow() {
-  const smartsheetStore = useSmartsheetStore()
+  const state = useSmartsheetStore()
 
-  if (smartsheetStore == null) throw new Error('Please call `useSmartsheetStore` on the appropriate parent component')
+  if (!state) throw new Error('Please call `useProvideSmartsheetStore` on the appropriate parent component')
 
-  return smartsheetStore
+  return state
 }