From f7dffa501258f99a44f24bc139d0bae79584b8b4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:46:40 +0530
Subject: [PATCH] refactor(gui-v2): convert to reactive

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/CellIcon.vue         |  6 +++---
 packages/nc-gui-v2/components/smartsheet/Cell.vue     |  2 +-
 packages/nc-gui-v2/composables/useColumn.ts           | 11 ++++++-----
 .../nc-gui-v2/composables/useColumnCreateStore.ts     |  4 ++--
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 25f2c9b4c0..fd20703ac3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { toRef } from 'vue'
+import { Ref, toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
@@ -28,9 +28,9 @@ import DecimalIcon from '~icons/mdi/decimal'
 const props = defineProps<{ columnMeta?: ColumnType }>()
 
 const columnMeta = toRef(props, 'columnMeta')
-const column = inject(ColumnInj, ref(columnMeta))
+const column = inject(ColumnInj, columnMeta)
 
-const additionalColMeta = useColumn(column.value as ColumnType)
+const additionalColMeta = useColumn(column as Ref<ColumnType>)
 
 const icon = computed(() => {
   if (column?.value?.pk) {
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 9c395b40aa..90c24001c1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -89,7 +89,7 @@ const {
   isMultiSelect,
   isPercent,
   isPhoneNumber,
-} = useColumn(column?.value)
+} = useColumn(column)
 
 const syncAndNavigate = (dir: NavigateDir) => {
   if (changed) {
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 07d82ea9a5..8bce6fbd0a 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -1,16 +1,17 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useProject } from '#imports'
+import { Ref } from 'vue'
 
-export function useColumn(column: ColumnType) {
+export function useColumn(column: Ref<ColumnType>) {
   const { project } = useProject()
 
-  const uiDatatype: UITypes = (column && column.uidt) as UITypes
-  const abstractType = isVirtualCol(column)
+  const uiDatatype: UITypes = (column?.value?.uidt) as UITypes
+  const abstractType = isVirtualCol(column?.value)
     ? null
-    : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column)
+    : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value)
 
-  const dataTypeLow = column && column.dt && column.dt.toLowerCase()
+  const dataTypeLow = column?.value?.dt?.toLowerCase()
   const isBoolean = abstractType === 'boolean'
   const isString = abstractType === 'string'
   const isTextArea = uiDatatype === UITypes.LongText
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 1904773ae6..f5d92c3aef 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -91,7 +91,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
 
     const onUidtOrIdTypeChange = () => {
-      const { isCurrency } = useColumn(formState.value as ColumnType)
+      const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
       const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
       formState.value = {
@@ -134,7 +134,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
 
     const onDataTypeChange = () => {
-      const { isCurrency } = useColumn(formState.value as ColumnType)
+      const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
       formState.value.rqd = false
       if (formState.value.uidt !== UITypes.ID) {