refactor(gui-v2): replace column with reactive object

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

packages/nc-gui-v2/components/cell/Checkbox.vue

@@ -26,7 +26,7 @@ const checkboxMeta = $computed(() => {
       unchecked: 'mdi-checkbox-blank-circle-outline',
     },
     color: 'primary',
-    ...(column?.meta || {}),
+    ...(column?.value?.meta || {}),
   }
 })
 </script>

packages/nc-gui-v2/components/cell/Currency.vue

@@ -22,7 +22,7 @@ const currencyMeta = computed(() => {
   return {
     currency_locale: 'en-US',
     currency_code: 'USD',
-    ...(column && column.meta ? column.meta : {}),
+    ...(column?.value?.meta ? column?.value?.meta : {}),
   }
 })
 const currency = computed(() => {

packages/nc-gui-v2/components/cell/DatePicker.vue

@@ -14,7 +14,7 @@ const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
 let isDateInvalid = $ref(false)
-const dateFormat = columnMeta?.meta?.date_format ?? 'YYYY-MM-DD'
+const dateFormat = columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD'
 
 const localState = $computed({
   get() {

packages/nc-gui-v2/components/cell/Duration.vue

@@ -16,7 +16,7 @@ const column = inject(ColumnInj)
 const showWarningMessage = ref(false)
 const durationInMS = ref(0)
 const isEdited = ref(false)
-const durationType = ref(column?.meta?.duration || 0)
+const durationType = ref(column?.value?.meta?.duration || 0)
 
 const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
 const localState = computed({

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -14,7 +14,7 @@ const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
 const editEnabled = inject(EditModeInj, ref(false))
 
-const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
 const localState = computed({
   get() {

packages/nc-gui-v2/components/cell/Percent.vue

@@ -17,7 +17,7 @@ const percent = ref()
 
 const isEdited = ref(false)
 
-const percentType = computed(() => column?.meta?.precision || 0)
+const percentType = computed(() => column?.value?.meta?.precision || 0)
 
 const percentStep = computed(() => getPercentStep(percentType.value))
 
@@ -27,7 +27,7 @@ const localState = computed({
   },
   set: (val) => {
     if (val === null) val = 0
-    if (isValidPercent(val, column?.meta?.negative)) {
+    if (isValidPercent(val, column?.value?.meta?.negative)) {
       percent.value = val / 100
     }
   },

packages/nc-gui-v2/components/cell/Rating.vue

@@ -26,7 +26,7 @@ const ratingMeta = computed(() => {
     },
     color: '#fcb401',
     max: 5,
-    ...(column?.meta || {}),
+    ...(column?.value?.meta || {}),
   }
 })
 

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -19,7 +19,7 @@ const vModel = computed({
   set: (val) => emit('update:modelValue', val),
 })
 
-const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 </script>
 
 <template>

packages/nc-gui-v2/components/cell/Url.vue

@@ -18,7 +18,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 const vModel = computed({
   get: () => value,
   set: (val) => {
-    if (!(column && column.meta && column.meta.validate) || isValidURL(val)) {
+    if (!column?.value?.meta?.validate || isValidURL(val)) {
       emit('update:modelValue', val)
     }
   },

packages/nc-gui-v2/components/cell/attachment/utils.ts

@@ -78,7 +78,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         try {
           const data = await api.storage.upload(
             {
-              path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
+              path: [NOCO, project.value.title, meta.value.title, column.value.title].join('/'),
             },
             {
               files: file,

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { inject } from 'vue'
+import { inject, toRef } from 'vue'
 import { ColumnInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
-const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
-
+const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const column = toRef(props, 'column')
 provide(ColumnInj, column)
 
 const meta = inject(MetaInj)

packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
@@ -24,14 +25,15 @@ import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
 import PercentIcon from '~icons/mdi/percent-outline'
 import DecimalIcon from '~icons/mdi/decimal'
 
-const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+const props = defineProps<{ columnMeta?: ColumnType }>()
 
-const column = inject(ColumnInj, columnMeta)
+const columnMeta = toRef(props, 'columnMeta')
+const column = inject(ColumnInj, ref(columnMeta))
 
-const additionalColMeta = useColumn(column as ColumnType)
+const additionalColMeta = useColumn(column.value as ColumnType)
 
 const icon = computed(() => {
-  if (column?.pk) {
+  if (column?.value?.pk) {
     return KeyIcon
   } else if (additionalColMeta.isJSON) {
     return JSONIcon

packages/nc-gui-v2/components/smartsheet-header/Menu.vue

@@ -25,13 +25,13 @@ const { getMeta } = useMetas()
 
 const deleteColumn = () =>
   Modal.confirm({
-    title: h('div', ['Do you want to delete ', h('span', { class: 'font-weight-bold' }, [column?.title]), ' column ?']),
+    title: h('div', ['Do you want to delete ', h('span', { class: 'font-weight-bold' }, [column?.value?.title]), ' column ?']),
     okText: t('general.delete'),
     okType: 'danger',
     cancelText: t('general.cancel'),
     async onOk() {
       try {
-        await $api.dbTableColumn.delete(column?.id as string)
+        await $api.dbTableColumn.delete(column?.value?.id as string)
         getMeta(meta?.value?.id as string, true)
       } catch (e) {
         toast.error(await extractSdkResponseErrorMsg(e))
@@ -41,7 +41,7 @@ const deleteColumn = () =>
 
 const setAsPrimaryValue = async () => {
   try {
-    await $api.dbTableColumn.primaryColumnSet(column?.id as string)
+    await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
     getMeta(meta?.value?.id as string, true)
     toast.success('Successfully updated as primary column')
   } catch (e) {

packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { toRef } from 'vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { ColumnInj, MetaInj } from '~/context'
 import { provide } from '#imports'
 
-const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
+const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
 

packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
@@ -11,14 +12,15 @@ import RollupIcon from '~icons/mdi/movie-roll'
 import CountIcon from '~icons/mdi/counter'
 import SpecificDBTypeIcon from '~icons/mdi/database-settings'
 
-const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+const props = defineProps<{ columnMeta?: ColumnType }>()
+const columnMeta = toRef(props, 'columnMeta')
 
-const column = inject(ColumnInj, columnMeta)
+const column = inject(ColumnInj, ref(columnMeta))
 
 const icon = computed(() => {
-  switch (column?.uidt) {
+  switch (column?.value?.uidt) {
     case UITypes.LinkToAnotherRecord:
-      switch ((column?.colOptions as LinkToAnotherRecordType)?.type) {
+      switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
           return MMIcon
         case RelationTypes.HAS_MANY:

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -16,9 +16,9 @@ interface Emits {
   (event: 'update:modelValue', value: any): void
 }
 
-const { column, ...props } = defineProps<Props>()
-
+const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
+const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
 
@@ -44,11 +44,11 @@ const isAutoSaved = $computed(() => {
     UITypes.AutoNumber,
     UITypes.SpecificDBType,
     UITypes.Geometry,
-  ].includes(column.uidt as UITypes)
+  ].includes(column?.value?.uidt as UITypes)
 })
 
 const isManualSaved = $computed(() => {
-  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column.uidt as UITypes)
+  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column?.value?.uidt as UITypes)
 })
 
 const vModel = computed({
@@ -89,7 +89,7 @@ const {
   isMultiSelect,
   isPercent,
   isPhoneNumber,
-} = useColumn(column)
+} = useColumn(column?.value)
 
 const syncAndNavigate = (dir: NavigateDir) => {
   if (changed) {

packages/nc-gui-v2/components/smartsheet/VirtualCell.vue

@@ -14,12 +14,11 @@ interface Props {
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
-const { column, modelValue: value } = props
+const { column } = props
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
 
 provide(ColumnInj, column)
-provide(CellValueInj, value)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
 provide(CellValueInj, toRef(props, 'modelValue'))

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

@@ -20,7 +20,8 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
-const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((meta: Ref<TableType>, column?: ColumnType) => {
+const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
+  (meta: Ref<TableType>, column?: Ref<ColumnType>) => {
     const { sqlUi } = useProject()
     const { $api } = useNuxtApp()
 
@@ -33,9 +34,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const formState = ref<Partial<Record<string, any>>>({
       title: 'title',
       uidt: UITypes.SingleLineText,
-    ...(column || {}),
+      ...(column?.value || {}),
       // todo: swagger json update - include meta
-    meta: (column as any)?.meta || {},
+      meta: (column?.value as any)?.meta || {},
     })
 
     const additionalValidations = ref<Record<string, any>>({})
@@ -109,8 +110,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
       const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
-      formState.value.dtxp = column.dtxp
+      if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value?.uidt as UITypes)) {
+        formState.value.dtxp = column?.value?.dtxp
       }
 
       if (columnToValidate.includes(formState.value.uidt)) {
@@ -120,9 +121,9 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
 
       if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
+        if (column?.value?.uidt === UITypes.Currency) {
+          formState.value.dtxp = column.value.dtxp
+          formState.value.dtxs = column.value.dtxs
         } else {
           formState.value.dtxp = 19
           formState.value.dtxs = 2
@@ -148,14 +149,14 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       formState.value.dtx = 'specificType'
 
       const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
-      formState.value.dtxp = column.dtxp
+      if (column?.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value.uidt as UITypes)) {
+        formState.value.dtxp = column?.value.dtxp
       }
 
       if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
+        if (column?.value?.uidt === UITypes.Currency) {
+          formState.value.dtxp = column.value.dtxp
+          formState.value.dtxs = column.value.dtxs
         } else {
           formState.value.dtxp = 19
           formState.value.dtxs = 2
@@ -179,8 +180,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
         formState.value.table_name = meta.value.table_name
         formState.value.title = formState.value.column_name
-      if (column) {
-        await $api.dbTableColumn.update(column.id as string, formState.value)
+        if (column?.value) {
+          await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
           toast.success('Column updated')
         } else {
           // todo : set additional meta for auto generated string id
@@ -215,10 +216,11 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       onAlter,
       addOrUpdate,
       generateNewColumnMeta,
-    isEdit: !!column?.id,
+      isEdit: computed(() => !!column?.value?.id),
       column,
     }
-})
+  },
+)
 
 export { useProvideColumnCreateStore }
 

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

@@ -1,26 +1,28 @@
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { computed } from '#imports'
 
-export function useVirtualCell(column: ColumnType) {
+export function useVirtualCell(column: Ref<ColumnType>) {
   const isHm = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord && (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.HAS_MANY,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.HAS_MANY,
   )
   const isMm = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.MANY_TO_MANY,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.MANY_TO_MANY,
   )
   const isBt = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.BELONGS_TO,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.BELONGS_TO,
   )
-  const isLookup = computed(() => column.uidt === UITypes.Lookup)
-  const isRollup = computed(() => column.uidt === UITypes.Rollup)
-  const isFormula = computed(() => column.uidt === UITypes.Formula)
-  const isCount = computed(() => column.uidt === UITypes.Count)
+  const isLookup = computed(() => column?.value?.uidt === UITypes.Lookup)
+  const isRollup = computed(() => column?.value?.uidt === UITypes.Rollup)
+  const isFormula = computed(() => column?.value?.uidt === UITypes.Formula)
+  const isCount = computed(() => column?.value?.uidt === UITypes.Count)
 
   return {
     isHm,

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

@@ -8,7 +8,7 @@ import type { TabItem } from '~/composables/useTabs'
 export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
-export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
+export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')
 export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['paginationData']> =