fix(gui-v2): useColumn use refs instead of static values

Signed-off-by: mertmit <mertmit99@gmail.com>

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

@@ -36,47 +36,47 @@ const additionalColMeta = useColumn(column as Ref<ColumnType>)
 const icon = computed(() => {
   if (column?.value?.pk) {
     return KeyIcon
-  } else if (additionalColMeta.isJSON) {
+  } else if (additionalColMeta.isJSON.value) {
     return JSONIcon
-  } else if (additionalColMeta.isDate) {
+  } else if (additionalColMeta.isDate.value) {
     return CalendarIcon
-  } else if (additionalColMeta.isDateTime) {
+  } else if (additionalColMeta.isDateTime.value) {
     return DatetimeIcon
-  } else if (additionalColMeta.isSet) {
+  } else if (additionalColMeta.isSet.value) {
     return MultiSelectIcon
-  } else if (additionalColMeta.isSingleSelect) {
+  } else if (additionalColMeta.isSingleSelect.value) {
     return SingleSelectIcon
-  } else if (additionalColMeta.isBoolean) {
+  } else if (additionalColMeta.isBoolean.value) {
     return BooleanIcon
-  } else if (additionalColMeta.isTextArea) {
+  } else if (additionalColMeta.isTextArea.value) {
     return TextAreaIcon
-  } else if (additionalColMeta.isEmail) {
+  } else if (additionalColMeta.isEmail.value) {
     return EmailIcon
-  } else if (additionalColMeta.isYear) {
+  } else if (additionalColMeta.isYear.value) {
     return CalendarIcon
-  } else if (additionalColMeta.isTime) {
+  } else if (additionalColMeta.isTime.value) {
     return ClockIcon
-  } else if (additionalColMeta.isRating) {
+  } else if (additionalColMeta.isRating.value) {
     return RatingIcon
-  } else if (additionalColMeta.isAttachment) {
+  } else if (additionalColMeta.isAttachment.value) {
     return AttachmentIcon
-  } else if (additionalColMeta.isDecimal) {
+  } else if (additionalColMeta.isDecimal.value) {
     return DecimalIcon
-  } else if (additionalColMeta.isPhoneNumber) {
+  } else if (additionalColMeta.isPhoneNumber.value) {
     return FilePhoneIcon
   }
   // else if(additionalColMeta.isForeignKey) {
   //   return FKIcon
   // }
-  else if (additionalColMeta.isURL) {
+  else if (additionalColMeta.isURL.value) {
     return WebIcon
-  } else if (additionalColMeta.isCurrency) {
+  } else if (additionalColMeta.isCurrency.value) {
     return CurrencyIcon
-  } else if (additionalColMeta.isPercent) {
+  } else if (additionalColMeta.isPercent.value) {
     return PercentIcon
-  } else if (additionalColMeta.isInt || additionalColMeta.isFloat) {
+  } else if (additionalColMeta.isInt.value || additionalColMeta.isFloat.value) {
     return NumericIcon
-  } else if (additionalColMeta.isString) {
+  } else if (additionalColMeta.isString.value) {
     return StringIcon
   } else {
     return GenericIcon

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

@@ -1,41 +1,44 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { useProject } from '#imports'
 
 export function useColumn(column: Ref<ColumnType>) {
   const { project } = useProject()
 
-  const uiDatatype: UITypes = column?.value?.uidt as UITypes
+  const uiDatatype: ComputedRef<UITypes> = computed(() => column?.value?.uidt as UITypes)
-  const abstractType = isVirtualCol(column?.value)
+  const abstractType = computed(() =>
+    isVirtualCol(column?.value)
       ? null
-    : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value)
+      : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value),
+  )
 
-  const dataTypeLow = column?.value?.dt?.toLowerCase()
+  const dataTypeLow = computed(() => column?.value?.dt?.toLowerCase())
-  const isBoolean = abstractType === 'boolean'
+  const isBoolean = computed(() => abstractType.value === 'boolean')
-  const isString = abstractType === 'string'
+  const isString = computed(() => abstractType.value === 'string')
-  const isTextArea = uiDatatype === UITypes.LongText
+  const isTextArea = computed(() => uiDatatype.value === UITypes.LongText)
-  const isInt = abstractType === 'integer'
+  const isInt = computed(() => abstractType.value === 'integer')
-  const isFloat = abstractType === 'float'
+  const isFloat = computed(() => abstractType.value === 'float')
-  const isDate = abstractType === 'date' || uiDatatype === 'Date'
+  const isDate = computed(() => abstractType.value === 'date' || uiDatatype.value === 'Date')
-  const isYear = abstractType === 'year' || uiDatatype === 'Year'
+  const isYear = computed(() => abstractType.value === 'year' || uiDatatype.value === 'Year')
-  const isTime = abstractType === 'time' || uiDatatype === 'Time'
+  const isTime = computed(() => abstractType.value === 'time' || uiDatatype.value === 'Time')
-  const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime'
+  const isDateTime = computed(() => abstractType.value === 'datetime' || uiDatatype.value === 'DateTime')
-  const isJSON = uiDatatype === 'JSON'
+  const isJSON = computed(() => uiDatatype.value === 'JSON')
-  const isEnum = uiDatatype === 'SingleSelect'
+  const isEnum = computed(() => uiDatatype.value === 'SingleSelect')
-  const isSingleSelect = uiDatatype === 'SingleSelect'
+  const isSingleSelect = computed(() => uiDatatype.value === 'SingleSelect')
-  const isSet = uiDatatype === 'MultiSelect'
+  const isSet = computed(() => uiDatatype.value === 'MultiSelect')
-  const isMultiSelect = uiDatatype === 'MultiSelect'
+  const isMultiSelect = computed(() => uiDatatype.value === 'MultiSelect')
-  const isURL = uiDatatype === 'URL'
+  const isURL = computed(() => uiDatatype.value === 'URL')
-  const isEmail = uiDatatype === UITypes.Email
+  const isEmail = computed(() => uiDatatype.value === UITypes.Email)
-  const isAttachment = uiDatatype === 'Attachment'
+  const isAttachment = computed(() => uiDatatype.value === 'Attachment')
-  const isRating = uiDatatype === UITypes.Rating
+  const isRating = computed(() => uiDatatype.value === UITypes.Rating)
-  const isCurrency = uiDatatype === 'Currency'
+  const isCurrency = computed(() => uiDatatype.value === 'Currency')
-  const isPhoneNumber = uiDatatype === UITypes.PhoneNumber
+  const isPhoneNumber = computed(() => uiDatatype.value === UITypes.PhoneNumber)
-  const isDecimal = uiDatatype === UITypes.Decimal
+  const isDecimal = computed(() => uiDatatype.value === UITypes.Decimal)
-  const isDuration = uiDatatype === UITypes.Duration
+  const isDuration = computed(() => uiDatatype.value === UITypes.Duration)
-  const isPercent = uiDatatype === UITypes.Percent
+  const isPercent = computed(() => uiDatatype.value === UITypes.Percent)
-  const isAutoSaved = [
+  const isAutoSaved = computed(() =>
+    [
       UITypes.SingleLineText,
       UITypes.LongText,
       UITypes.PhoneNumber,
@@ -48,8 +51,11 @@ export function useColumn(column: Ref<ColumnType>) {
       UITypes.AutoNumber,
       UITypes.SpecificDBType,
       UITypes.Geometry,
-  ].includes(uiDatatype)
+    ].includes(uiDatatype.value),
-  const isManualSaved = [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype)
+  )
+  const isManualSaved = computed(() =>
+    [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(uiDatatype.value),
+  )
 
   return {
     abstractType,