From 7095344bb7ef1777ee76996f47bddacddb992183 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:06:56 +0530
Subject: [PATCH 01/34] refactor(gui-v2): replace column with reactive object

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/cell/Checkbox.vue    |   2 +-
 .../nc-gui-v2/components/cell/Currency.vue    |   2 +-
 .../nc-gui-v2/components/cell/DatePicker.vue  |   2 +-
 .../nc-gui-v2/components/cell/Duration.vue    |   2 +-
 .../nc-gui-v2/components/cell/MultiSelect.vue |   2 +-
 .../nc-gui-v2/components/cell/Percent.vue     |   4 +-
 packages/nc-gui-v2/components/cell/Rating.vue |   2 +-
 .../components/cell/SingleSelect.vue          |   2 +-
 packages/nc-gui-v2/components/cell/Url.vue    |   2 +-
 .../components/cell/attachment/utils.ts       |   2 +-
 .../components/smartsheet-header/Cell.vue     |   6 +-
 .../components/smartsheet-header/CellIcon.vue |  10 +-
 .../components/smartsheet-header/Menu.vue     |   6 +-
 .../smartsheet-header/VirtualCell.vue         |   4 +-
 .../smartsheet-header/VirtualCellIcon.vue     |  10 +-
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  10 +-
 .../components/smartsheet/VirtualCell.vue     |   3 +-
 .../composables/useColumnCreateStore.ts       | 352 +++++++++---------
 .../nc-gui-v2/composables/useVirtualCell.ts   |  22 +-
 packages/nc-gui-v2/context/index.ts           |   2 +-
 20 files changed, 228 insertions(+), 219 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index ec6fb56386..f24d797de5 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index fe99200482..71c1e639d0 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/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(() => {
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 19e59b98a6..ee373db17b 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/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() {
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 9a19351556..5ef2e9a2e3 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/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({
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index fffc9f347c..12260eb12f 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/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() {
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index dde455185c..746e86739c 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/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
     }
   },
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 08bce5f227..fe4b782d64 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -26,7 +26,7 @@ const ratingMeta = computed(() => {
     },
     color: '#fcb401',
     max: 5,
-    ...(column?.meta || {}),
+    ...(column?.value?.meta || {}),
   }
 })
 
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 66570ef61c..c63efc7d2d 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 46bb61dd3e..ca15fb0b11 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/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)
     }
   },
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index e97275449a..7d9bf002ab 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/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,
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index b1bdbc047e..26cb6cf922 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/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)
diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 8b3a41f476..25f2c9b4c0 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/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
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index df81e9cdf6..83c4a5ac87 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/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) {
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index efb873fe0c..018ad1d8c6 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/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)
 
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 5caf418e77..99b6eb6aca 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/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:
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index bc725b74fa..9c395b40aa 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/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) {
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index b385f6aca8..67fc79aece 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/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'))
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 53c5d2abe7..1904773ae6 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -20,205 +20,207 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
-const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((meta: Ref<TableType>, column?: ColumnType) => {
-  const { sqlUi } = useProject()
-  const { $api } = useNuxtApp()
+const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
+  (meta: Ref<TableType>, column?: Ref<ColumnType>) => {
+    const { sqlUi } = useProject()
+    const { $api } = useNuxtApp()
+
+    const toast = useToast()
+
+    const idType = null
+
+    // state
+    // todo: give proper type - ColumnType
+    const formState = ref<Partial<Record<string, any>>>({
+      title: 'title',
+      uidt: UITypes.SingleLineText,
+      ...(column?.value || {}),
+      // todo: swagger json update - include meta
+      meta: (column?.value as any)?.meta || {},
+    })
+
+    const additionalValidations = ref<Record<string, any>>({})
+
+    const validators = computed(() => {
+      return {
+        column_name: [
+          {
+            required: true,
+            message: 'Column name is required',
+          },
+          // validation for unique column name
+          {
+            validator: (rule: any, value: any) => {
+              return new Promise<void>((resolve, reject) => {
+                if (
+                  meta.value?.columns?.some(
+                    (c) =>
+                      c.id !== formState.value.id && // ignore current column
+                      // compare against column_name and title
+                      ((value || '').toLowerCase() === (c.column_name || '').toLowerCase() ||
+                        (value || '').toLowerCase() === (c.title || '').toLowerCase()),
+                  )
+                ) {
+                  return reject(new Error('Duplicate column name'))
+                }
+                resolve()
+              })
+            },
+          },
+        ],
+        uidt: [
+          {
+            required: true,
+            message: 'UI Datatype is required',
+          },
+        ],
+        ...(additionalValidations?.value || {}),
+      }
+    })
 
-  const toast = useToast()
+    const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
-  const idType = null
+    const setAdditionalValidations = (validations: Record<string, any>) => {
+      additionalValidations.value = validations
+    }
 
-  // state
-  // todo: give proper type - ColumnType
-  const formState = ref<Partial<Record<string, any>>>({
-    title: 'title',
-    uidt: UITypes.SingleLineText,
-    ...(column || {}),
-    // todo: swagger json update - include meta
-    meta: (column as any)?.meta || {},
-  })
+    // actions
+    const generateNewColumnMeta = () => {
+      setAdditionalValidations({})
+      formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
+    }
 
-  const additionalValidations = ref<Record<string, any>>({})
+    const onUidtOrIdTypeChange = () => {
+      const { isCurrency } = useColumn(formState.value as ColumnType)
+
+      const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
+      formState.value = {
+        ...formState.value,
+        meta: {},
+        rqd: false,
+        pk: false,
+        ai: false,
+        cdf: null,
+        un: false,
+        dtx: 'specificType',
+        ...colProp,
+      }
 
-  const validators = computed(() => {
-    return {
-      column_name: [
-        {
-          required: true,
-          message: 'Column name is required',
-        },
-        // validation for unique column name
-        {
-          validator: (rule: any, value: any) => {
-            return new Promise<void>((resolve, reject) => {
-              if (
-                meta.value?.columns?.some(
-                  (c) =>
-                    c.id !== formState.value.id && // ignore current column
-                    // compare against column_name and title
-                    ((value || '').toLowerCase() === (c.column_name || '').toLowerCase() ||
-                      (value || '').toLowerCase() === (c.title || '').toLowerCase()),
-                )
-              ) {
-                return reject(new Error('Duplicate column name'))
-              }
-              resolve()
-            })
-          },
-        },
-      ],
-      uidt: [
-        {
-          required: true,
-          message: 'UI Datatype is required',
-        },
-      ],
-      ...(additionalValidations?.value || {}),
-    }
-  })
-
-  const { resetFields, validate, validateInfos } = useForm(formState, validators)
-
-  const setAdditionalValidations = (validations: Record<string, any>) => {
-    additionalValidations.value = validations
-  }
-
-  // actions
-  const generateNewColumnMeta = () => {
-    setAdditionalValidations({})
-    formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
-  }
-
-  const onUidtOrIdTypeChange = () => {
-    const { isCurrency } = useColumn(formState.value as ColumnType)
-
-    const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
-    formState.value = {
-      ...formState.value,
-      meta: {},
-      rqd: false,
-      pk: false,
-      ai: false,
-      cdf: null,
-      un: false,
-      dtx: 'specificType',
-      ...colProp,
-    }
+      formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+      formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
-    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
-    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?.value?.uidt as UITypes)) {
+        formState.value.dtxp = column?.value?.dtxp
+      }
 
-    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 (columnToValidate.includes(formState.value.uidt)) {
+        formState.value.meta = {
+          validate: formState.value.meta && formState.value.meta.validate,
+        }
+      }
 
-    if (columnToValidate.includes(formState.value.uidt)) {
-      formState.value.meta = {
-        validate: formState.value.meta && formState.value.meta.validate,
+      if (isCurrency) {
+        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
+        }
       }
+
+      formState.value.altered = formState.value.altered || 2
     }
 
-    if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
-      } else {
-        formState.value.dtxp = 19
-        formState.value.dtxs = 2
+    const onDataTypeChange = () => {
+      const { isCurrency } = useColumn(formState.value as ColumnType)
+
+      formState.value.rqd = false
+      if (formState.value.uidt !== UITypes.ID) {
+        formState.value.primaryKey = false
       }
-    }
+      formState.value.ai = false
+      formState.value.cdf = null
+      formState.value.un = false
+      formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+      formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
-    formState.value.altered = formState.value.altered || 2
-  }
+      formState.value.dtx = 'specificType'
 
-  const onDataTypeChange = () => {
-    const { isCurrency } = useColumn(formState.value as ColumnType)
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+      if (column?.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value.uidt as UITypes)) {
+        formState.value.dtxp = column?.value.dtxp
+      }
 
-    formState.value.rqd = false
-    if (formState.value.uidt !== UITypes.ID) {
-      formState.value.primaryKey = false
-    }
-    formState.value.ai = false
-    formState.value.cdf = null
-    formState.value.un = false
-    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
-    formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
+      if (isCurrency) {
+        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
+        }
+      }
 
-    formState.value.dtx = 'specificType'
+      // this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
 
-    const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
-      formState.value.dtxp = column.dtxp
+      formState.value.altered = formState.value.altered || 2
     }
 
-    if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
-      } else {
-        formState.value.dtxp = 19
-        formState.value.dtxs = 2
-      }
+    const onAlter = (val = 2, cdf = false) => {
+      formState.value.altered = formState.value.altered || val
+      if (cdf) formState.value.cdf = formState.value.cdf || null
     }
 
-    // this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
-
-    formState.value.altered = formState.value.altered || 2
-  }
-
-  const onAlter = (val = 2, cdf = false) => {
-    formState.value.altered = formState.value.altered || val
-    if (cdf) formState.value.cdf = formState.value.cdf || null
-  }
-
-  const addOrUpdate = async (onSuccess: () => {}) => {
-    try {
-      console.log(formState, validators)
-      if (!(await validate())) return
-
-      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)
-        toast.success('Column updated')
-      } else {
-        // todo : set additional meta for auto generated string id
-        if (formState.value.uidt === UITypes.ID) {
-          // based on id column type set autogenerated meta prop
-          // if (isAutoGenId) {
-          //   this.newColumn.meta = {
-          //     ag: 'nc',
-          //   };
-          // }
+    const addOrUpdate = async (onSuccess: () => {}) => {
+      try {
+        console.log(formState, validators)
+        if (!(await validate())) return
+
+        formState.value.table_name = meta.value.table_name
+        formState.value.title = formState.value.column_name
+        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
+          if (formState.value.uidt === UITypes.ID) {
+            // based on id column type set autogenerated meta prop
+            // if (isAutoGenId) {
+            //   this.newColumn.meta = {
+            //     ag: 'nc',
+            //   };
+            // }
+          }
+          await $api.dbTableColumn.create(meta.value.id as string, formState.value)
+
+          toast.success('Column created')
         }
-        await $api.dbTableColumn.create(meta.value.id as string, formState.value)
-
-        toast.success('Column created')
+        onSuccess()
+      } catch (e: any) {
+        const error = await extractSdkResponseErrorMsg(e)
+        if (error) toast.error(await extractSdkResponseErrorMsg(e))
       }
-      onSuccess()
-    } catch (e: any) {
-      const error = await extractSdkResponseErrorMsg(e)
-      if (error) toast.error(await extractSdkResponseErrorMsg(e))
     }
-  }
-
-  return {
-    formState,
-    resetFields,
-    validate,
-    validateInfos,
-    setAdditionalValidations,
-    onUidtOrIdTypeChange,
-    sqlUi,
-    onDataTypeChange,
-    onAlter,
-    addOrUpdate,
-    generateNewColumnMeta,
-    isEdit: !!column?.id,
-    column,
-  }
-})
+
+    return {
+      formState,
+      resetFields,
+      validate,
+      validateInfos,
+      setAdditionalValidations,
+      onUidtOrIdTypeChange,
+      sqlUi,
+      onDataTypeChange,
+      onAlter,
+      addOrUpdate,
+      generateNewColumnMeta,
+      isEdit: computed(() => !!column?.value?.id),
+      column,
+    }
+  },
+)
 
 export { useProvideColumnCreateStore }
 
diff --git a/packages/nc-gui-v2/composables/useVirtualCell.ts b/packages/nc-gui-v2/composables/useVirtualCell.ts
index 1c8a06c44d..856b3d0143 100644
--- a/packages/nc-gui-v2/composables/useVirtualCell.ts
+++ b/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,
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index c5c5aa9cdd..4ef530da15 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/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']> =

From 33af6f18aa8e9ed688208c795b621dc5b2176b3a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:11:28 +0530
Subject: [PATCH 02/34] fix(gui-v2): use right injection key

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Decimal.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index 677c482042..b2f15151a6 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, ref } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null
@@ -13,7 +14,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject<boolean>(EditModeInj)
 
 const root = ref<HTMLInputElement>()
 

From a26128837f2b8409beead8cd7e4746e27f0dce75 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:14:10 +0530
Subject: [PATCH 03/34] refactor(gui-v2): accept null prop value in cell
 component

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Currency.vue         | 2 +-
 packages/nc-gui-v2/components/cell/DatePicker.vue       | 7 +++----
 packages/nc-gui-v2/components/cell/DateTimePicker.vue   | 8 ++++----
 packages/nc-gui-v2/components/cell/Duration.vue         | 2 +-
 packages/nc-gui-v2/components/cell/Float.vue            | 2 +-
 packages/nc-gui-v2/components/cell/JsonEditableCell.vue | 2 +-
 packages/nc-gui-v2/components/cell/MultiSelect.vue      | 2 +-
 packages/nc-gui-v2/components/cell/Percent.vue          | 2 +-
 packages/nc-gui-v2/components/cell/Rating.vue           | 2 +-
 packages/nc-gui-v2/components/cell/SingleSelect.vue     | 2 +-
 packages/nc-gui-v2/components/cell/TimePicker.vue       | 8 ++++----
 packages/nc-gui-v2/components/cell/Url.vue              | 2 +-
 packages/nc-gui-v2/components/cell/YearPicker.vue       | 8 ++++----
 13 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 71c1e639d0..b9984f8499 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -3,7 +3,7 @@ import { computed, inject, ref, useVModel } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number
+  modelValue: number | null
 }
 
 const props = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index ee373db17b..d69202b6ee 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -2,14 +2,13 @@
 import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 68f4a9087a..038e218c95 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const { isMysql } = useProject()
 
 const readOnlyMode = inject(ReadonlyInj, false)
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 5ef2e9a2e3..aa888120cd 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/packages/nc-gui-v2/components/cell/Duration.vue
@@ -4,7 +4,7 @@ import { ColumnInj } from '~/context'
 import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils'
 
 interface Props {
-  modelValue: number | string
+  modelValue: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 6e029c67de..16ba6db0f9 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -3,7 +3,7 @@ import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number
+  modelValue: number | null
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
index acf815fc54..f92bd346ca 100644
--- a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
+++ b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
@@ -4,7 +4,7 @@ import { computed, inject } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string | Record<string, any>
+  modelValue: string | Record<string, any> | null
   isForm: boolean
 }
 
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 12260eb12f..f43f62fc8f 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -3,7 +3,7 @@ import { computed, inject } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index 746e86739c..4b25a11f50 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -4,7 +4,7 @@ import { ColumnInj } from '~/context'
 import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils'
 
 interface Props {
-  modelValue: number | string
+  modelValue: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index fe4b782d64..cc23e23db1 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -8,7 +8,7 @@ import MdiThumbUpIcon from '~icons/mdi/thumb-up'
 import MdiFlagIcon from '~icons/mdi/flag'
 
 interface Props {
-  modelValue?: number
+  modelValue?: number | null
   readOnly?: boolean
 }
 
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index c63efc7d2d..2511d3404a 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -3,7 +3,7 @@ import { computed, inject } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index 1e2fa406d0..ec36b5774a 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const { isMysql } = useProject()
 
 const readOnlyMode = inject(ReadonlyInj, false)
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index ca15fb0b11..97d9c5fe19 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -4,7 +4,7 @@ import { ColumnInj, EditModeInj } from '~/context'
 import { isValidURL } from '~/utils'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue: value } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index a167dab5ed..1b8133bfca 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: number | string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: number
-}
-
 const readOnlyMode = inject(ReadonlyInj, false)
 
 let isYearInvalid = $ref(false)

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 04/34] 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) {

From 48552f52c9050a9b25063929701fdcff35cd45dd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 17:12:15 +0530
Subject: [PATCH 05/34] refactor(gui-v2): hide plus icon in tab header

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useColumnCreateStore.ts  | 1 +
 packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index f5d92c3aef..b1e24b7bde 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -87,6 +87,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     // actions
     const generateNewColumnMeta = () => {
       setAdditionalValidations({})
+      debugger
       formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
     }
 
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index 6ff2fa5455..c19d34de54 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -162,4 +162,8 @@ function openQuickImportDialog(type: string) {
 :deep(.ant-menu-submenu::after) {
   @apply !border-none;
 }
+
+:deep(.ant-tabs-nav-add){
+  @apply !hidden;
+}
 </style>

From c4b10a432959bf1cb37db61e141e311e2f0c912d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 17:17:05 +0530
Subject: [PATCH 06/34] fix(gui-v2): populate default column name and type

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue | 2 +-
 packages/nc-gui-v2/composables/useColumnCreateStore.ts        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index cff836c888..286b1353f5 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -65,7 +65,7 @@ function onCancel() {
 
 // create column meta if it's a new column
 watchEffect(() => {
-  if (!isEdit) {
+  if (!isEdit?.value) {
     generateNewColumnMeta()
   }
 })
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index b1e24b7bde..f5d92c3aef 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -87,7 +87,6 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     // actions
     const generateNewColumnMeta = () => {
       setAdditionalValidations({})
-      debugger
       formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
     }
 

From c68ace833dcf5f02c8029b07fd3ff583cc10cab4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 18:02:37 +0530
Subject: [PATCH 07/34] fix(gui-v2): add copy to clipboard

- on typing make cell editable
- on cmd/ctrl + c copy cell content

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/CellIcon.vue |  3 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 55 +++++++++++++++++--
 packages/nc-gui-v2/composables/useColumn.ts   |  4 +-
 .../pages/nc/[projectId]/index/index.vue      |  2 +-
 4 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index fd20703ac3..a65e979ca4 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { Ref, toRef } from 'vue'
+import type { Ref } from 'vue'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index da6c1fa2f6..85150c31c5 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { onClickOutside } from '@vueuse/core'
 import { isVirtualCol } from 'nocodb-sdk'
+import { message } from 'ant-design-vue'
 import {
   inject,
   onKeyStroke,
   onMounted,
+  onUnmounted,
   provide,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
@@ -103,9 +106,7 @@ defineExpose({
 })
 
 // instantiate column create store
-// watchEffect(() => {
 if (meta) useProvideColumnCreateStore(meta)
-// })
 
 // reset context menu target on hide
 watch(contextMenu, () => {
@@ -114,6 +115,8 @@ watch(contextMenu, () => {
   }
 })
 
+const isPkAvail = $computed(() => meta?.value?.columns?.some((c) => c.pk))
+
 const clearCell = async (ctx: { row: number; col: number }) => {
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
@@ -127,8 +130,10 @@ const clearCell = async (ctx: { row: number; col: number }) => {
   await updateOrSaveRow(rowObj, columnObj.title)
 }
 
+const { copy } = useClipboard()
+
 /** handle keypress events */
-onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'], async (e: KeyboardEvent) => {
+const onKeyDown = async (e: KeyboardEvent) => {
   if (selected.row === null || selected.col === null) return
   /** on tab key press navigate through cells */
   switch (e.key) {
@@ -177,7 +182,49 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
       e.preventDefault()
       if (selected.row < data.value.length - 1) selected.row++
       break
+    default:
+      {
+        const rowObj = data.value[selected.row]
+        const columnObj = fields.value[selected.col]
+
+        if (e.metaKey || e.ctrlKey) {
+          switch (e.keyCode) {
+            // copy - ctrl/cmd +c
+            case 67:
+              await copy(rowObj.row[columnObj.title] || '')
+              break
+          }
+        }
+
+        if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+          return
+        }
+
+        /** on letter key press make cell editable and empty */
+        if (e?.key?.length === 1) {
+          if (!isPkAvail && !rowObj.rowMeta.new) {
+            return message.info("Update not allowed for table which doesn't have primary Key")
+          }
+          rowObj.row[columnObj.title] = ''
+          editEnabled = true
+        }
+      }
+      break
   }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeyDown)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeyDown)
+})
+
+/** On clicking outside of table reset active cell  */
+const smartTable = ref(null)
+onClickOutside(smartTable, (event) => {
+  selected.row = null
+  selected.col = null
 })
 
 const onNavigate = (dir: NavigateDir) => {
@@ -207,7 +254,7 @@ const onNavigate = (dir: NavigateDir) => {
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
+        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr class="group">
               <th>
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 8bce6fbd0a..51ac14531e 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -1,12 +1,12 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { useProject } from '#imports'
-import { Ref } from 'vue'
 
 export function useColumn(column: Ref<ColumnType>) {
   const { project } = useProject()
 
-  const uiDatatype: UITypes = (column?.value?.uidt) as UITypes
+  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?.value)
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index c19d34de54..b7c54f9937 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -163,7 +163,7 @@ function openQuickImportDialog(type: string) {
   @apply !border-none;
 }
 
-:deep(.ant-tabs-nav-add){
+:deep(.ant-tabs-nav-add) {
   @apply !hidden;
 }
 </style>

From 8dfb1f4853870ada17a9be776423b19294498ee6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 18:19:10 +0530
Subject: [PATCH 08/34] fix(gui-v2): bind column default property

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/AdvancedOptions.vue     | 9 ++-------
 packages/nc-gui-v2/components/smartsheet/Grid.vue        | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
index 26bf40e44f..85d1378b55 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
@@ -77,13 +77,8 @@ formState.value.au = !!formState.value.au
       <a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" size="small" @input="onAlter" />
     </a-form-item>
     <a-form-item :label="$t('placeholder.defaultValue')">
-      <a-textarea
-        v-model="formState.cdf"
-        :help="sqlUi.getDefaultValueForDatatype(formState.dt)"
-        size="small"
-        auto-size
-        @input="onAlter(2, true)"
-      />
+      <a-textarea v-model:value="formState.cdf" size="small" auto-size @input="onAlter(2, true)" />
+      <span class="text-gray-400 text-xs">{{ sqlUi.getDefaultValueForDatatype(formState.dt) }}</span>
     </a-form-item>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 85150c31c5..e04d35096d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -284,7 +284,7 @@ const onNavigate = (dir: NavigateDir) => {
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th v-t="['c:column:add']" @click="addColumnDropdown = true">
                 <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
-                  <div class="h-full w-full flex align-center justify-center">
+                  <div class="h-full w-[60px] flex align-center justify-center">
                     <MdiPlusIcon class="text-sm" />
                   </div>
                   <template #overlay>

From 95de96b6b4363c8f3a70c442e03a03a3b4c18462 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:28:50 +0530
Subject: [PATCH 09/34] fix(gui-v2): focus decimal cell on edit enabled

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Decimal.vue    | 8 +++-----
 packages/nc-gui-v2/components/smartsheet/Cell.vue | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index b2f15151a6..77b0a2f7a3 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -3,7 +3,7 @@ import { computed, inject, onMounted, ref } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | string
 }
 
 interface Emits {
@@ -20,15 +20,13 @@ const root = ref<HTMLInputElement>()
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 90c24001c1..42d7b28f35 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -102,7 +102,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 
 <template>
   <div
-    class="nc-cell"
+    class="nc-cell w-full-h-full"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up

From c4c2e477bd0c4cd6a0e1abe7dc48f562afc2852d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:36:23 +0530
Subject: [PATCH 10/34] fix(gui-v2): on blur event reset editable value

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Currency.vue | 10 +++++++++-
 packages/nc-gui-v2/components/cell/Decimal.vue  |  1 +
 packages/nc-gui-v2/components/cell/Email.vue    |  2 +-
 packages/nc-gui-v2/components/cell/Float.vue    |  1 +
 packages/nc-gui-v2/components/cell/Integer.vue  |  1 +
 packages/nc-gui-v2/components/cell/Url.vue      |  2 +-
 6 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index b9984f8499..54bfdc53d2 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -37,10 +37,18 @@ const currency = computed(() => {
     return vModel.value
   }
 })
+
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" />
+  <input
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    class="w-full h-full border-none outline-none"
+    @blur="editEnabled = false"
+  />
   <span v-else-if="vModel">{{ currency }}</span>
   <span v-else />
 </template>
diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index 77b0a2f7a3..7f1ef4c114 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -31,6 +31,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
+    @blur="editEnabled = false"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index 33407812bd..ab10f0aebb 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -25,7 +25,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" @blur="editEnabled = false" />
   <a v-else-if="validEmail" class="prose-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 16ba6db0f9..ff836dcad5 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -29,6 +29,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
+    @blur="editEnabled = false"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 38691d0fa2..f62ef8e345 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -32,6 +32,7 @@ function onKeyDown(evt: KeyboardEvent) {
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
+    @blur="editEnabled = false"
     @keydown="onKeyDown"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 97d9c5fe19..1bfcdb39df 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -30,7 +30,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" />
   <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
   <span v-else>{{ value }}</span>
 </template>

From cbd1f1718592713e586570fedff75e622d0fe859 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:42:37 +0530
Subject: [PATCH 11/34] fix(gui-v2): reload data after column add/update

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/EditOrAdd.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 286b1353f5..d0dd9ebfec 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
-import { MetaInj } from '~/context'
+import { MetaInj, ReloadViewDataHookInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
@@ -13,11 +13,9 @@ interface Props {
 const { editColumnDropdown } = defineProps<Props>()
 
 const emit = defineEmits(['cancel'])
-
 const meta = inject(MetaInj)
-
+const reloadDataTrigger = inject(ReloadViewDataHookInj)
 const advancedOptions = ref(false)
-
 const { getMeta } = useMetas()
 
 const formulaOptionsRef = ref()
@@ -50,9 +48,10 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
   ]
 })
 
-const reloadMeta = () => {
+const reloadMetaAndData = () => {
   emit('cancel')
   getMeta(meta?.value.id as string, true)
+  reloadDataTrigger?.trigger()
 }
 
 function onCancel() {
@@ -144,7 +143,7 @@ watch(
           v-model:checked="formState.meta.validate"
           class="ml-1 mb-1"
         >
-          <span class="text-xs text-gray-600">
+          <span class="text-[10px] text-gray-600">
             {{ `Accept only valid ${formState.uidt}` }}
           </span>
         </a-checkbox>
@@ -156,7 +155,12 @@ watch(
             <!-- Cancel -->
             {{ $t('general.cancel') }}
           </a-button>
-          <a-button html-type="submit" type="primary" size="small" @click="addOrUpdate(reloadMeta), (advancedOptions = false)">
+          <a-button
+            html-type="submit"
+            type="primary"
+            size="small"
+            @click="addOrUpdate(reloadMetaAndData), (advancedOptions = false)"
+          >
             <!-- Save -->
             {{ $t('general.save') }}
           </a-button>

From 9518a25a06414ca89b91eaccc2ccd85034e182f1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 19:29:08 +0530
Subject: [PATCH 12/34] refactor(gui-v2): update LTAR columns

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/VirtualCell.vue      |  3 ++-
 .../components/virtual-cell/BelongsTo.vue      |  3 ++-
 .../components/virtual-cell/HasMany.vue        |  3 ++-
 .../components/virtual-cell/ManyToMany.vue     |  3 ++-
 packages/nc-gui-v2/composables/useLTARStore.ts | 18 +++++++++---------
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 67fc79aece..f47831b164 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -14,7 +14,8 @@ interface Props {
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
-const { column } = props
+
+const column = toRef(props, 'column')
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 1e417e3caf..e2dcae0d5a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { useProvideLTARStore } from '#imports'
@@ -15,7 +16,7 @@ const localState = null
 const listItemsDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 95f4cf2172..c453834e55 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
@@ -17,7 +18,7 @@ const listItemsDlg = ref(false)
 const childListDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index c1fc3abf1e..af82ed0f65 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
@@ -17,7 +18,7 @@ const listItemsDlg = ref(false)
 const childListDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index d4a7b18c4b..8366cf13e7 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -13,7 +13,7 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Required<ColumnType>, row?: Ref<Row>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
@@ -31,12 +31,12 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       size: 10,
     })
 
-    const colOptions = column.colOptions as LinkToAnotherRecordType
+    const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
 
     // getters
-    const meta = computed(() => metas?.value?.[column.fk_model_id as string])
+    const meta = computed(() => metas?.value?.[column?.value?.fk_model_id as string])
     const relatedTableMeta = computed<TableType>(() => {
-      return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
+      return metas.value?.[colOptions?.fk_related_model_id as string]
     })
 
     const rowId = computed(() =>
@@ -72,8 +72,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           project.value.id as string,
           meta.value.id,
           rowId.value,
-          (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
-          column.title,
+          colOptions.type as 'mm' | 'hm',
+          column?.value?.title,
           // todo: swagger type correction
           {
             limit: childrenExcludedListPagination.size,
@@ -99,7 +99,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.id,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           // todo: swagger type correction
           {
             limit: childrenListPagination.size,
@@ -157,7 +157,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.title,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
       } catch (e) {
@@ -195,7 +195,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.title as string,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
       } catch (e) {

From 3eeffc69a667f49e14fe696734865f90ce6e0591 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 19:32:01 +0530
Subject: [PATCH 13/34] refactor(gui-v2): clear tabs on load

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/nc/[projectId]/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index 4c70c5f50d..824e1eb099 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -4,9 +4,10 @@ import { TabType } from '~/composables'
 
 const route = useRoute()
 const { loadProject, loadTables } = useProject(route.params.projectId as string)
-const { addTab } = useTabs()
+const { addTab, clearTabs } = useTabs()
 const { $state } = useNuxtApp()
 
+clearTabs()
 if (!route.params.type) {
   addTab({ type: TabType.AUTH, title: 'Team & Auth' })
 }

From 996d91ef49d48655c092b8bc0ec0e245ef09a7e2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 12:27:16 +0530
Subject: [PATCH 14/34] fix(gui-v2): allow id column creation if pk missing

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index d0dd9ebfec..cfdf4cf23e 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -5,6 +5,7 @@ import { MetaInj, ReloadViewDataHookInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
+import MdiIdentifierIcon from '~icons/mdi/identifier'
 
 interface Props {
   editColumnDropdown: boolean
@@ -37,7 +38,7 @@ const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 const uiTypesOptions = computed<typeof uiTypes>(() => {
   return [
     ...uiTypes.filter((t) => !isEdit || !t.virtual),
-    ...(!isEdit && meta?.value?.columns?.every((c) => !c.pk)
+    ...(!isEdit?.value && meta?.value?.columns?.every((c) => !c.pk)
       ? [
           {
             name: 'ID',
@@ -107,7 +108,7 @@ watch(
       </a-form-item>
       <a-form-item :label="$t('labels.columnType')">
         <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input" @change="onUidtOrIdTypeChange">
-          <a-select-option v-for="opt in uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
+          <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
             <div class="flex gap-1 align-center text-xs">
               <component :is="opt.icon" class="text-grey" />
               {{ opt.name }}

From d1b0b7cca3656d4d19c38bc4b736dd0224f72e19 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 12:40:43 +0530
Subject: [PATCH 15/34] fix(gui-v2): block user from editing pk and ai values

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  2 +
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 42 +++++++++++++------
 .../composables/useSmartsheetStore.ts         |  2 +
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index ca9f1693ce..1b71a9a17f 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    '(fix(gui-v2)': block user from editing pk and ai values)
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -66,6 +67,7 @@ declare module '@vue/runtime-core' {
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index e04d35096d..e9547fc51f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onClickOutside } from '@vueuse/core'
+import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
@@ -13,6 +14,7 @@ import {
   useSmartsheetStoreOrThrow,
   useViewData,
 } from '#imports'
+import type { Row } from '~/composables'
 import {
   ActiveViewInj,
   ChangePageInj,
@@ -37,11 +39,12 @@ const fields = inject(FieldsInj, ref([]))
 const isLocked = inject(IsLockedInj, false)
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
+const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
 let editEnabled = $ref(false)
 const { sqlUi } = useProject()
-const { xWhere } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow()
 const addColumnDropdown = ref(false)
 const contextMenu = ref(false)
 const contextMenuTarget = ref(false)
@@ -77,12 +80,6 @@ const selectCell = (row: number, col: number) => {
   selected.col = col
 }
 
-onKeyStroke(['Enter'], (e) => {
-  if (selected.row !== null && selected.col !== null) {
-    editEnabled = true
-  }
-})
-
 watch(
   () => (view?.value as any)?.id,
   async (n?: string, o?: string) => {
@@ -115,8 +112,6 @@ watch(contextMenu, () => {
   }
 })
 
-const isPkAvail = $computed(() => meta?.value?.columns?.some((c) => c.pk))
-
 const clearCell = async (ctx: { row: number; col: number }) => {
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
@@ -132,6 +127,25 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 
 const { copy } = useClipboard()
 
+const makeEditable = (row: Row, col: ColumnType) => {
+  if (isPublicView || editEnabled || isView) {
+    return
+  }
+  if (!isPkAvail.value && !row.rowMeta.new) {
+    message.info("Update not allowed for table which doesn't have primary Key")
+    return
+  }
+  if (col.ai) {
+    message.info('Auto Increment field is not editable')
+    return
+  }
+  if (col.pk && !row.rowMeta.new) {
+    message.info('Editing primary key not supported')
+    return
+  }
+  return (editEnabled = true)
+}
+
 /** handle keypress events */
 const onKeyDown = async (e: KeyboardEvent) => {
   if (selected.row === null || selected.col === null) return
@@ -158,7 +172,7 @@ const onKeyDown = async (e: KeyboardEvent) => {
     /** on enter key press make cell editable */
     case 'Enter':
       e.preventDefault()
-      editEnabled = true
+      makeEditable(data.value[selected.row], fields.value[selected.col])
       break
     /** on delete key press clear cell */
     case 'Delete':
@@ -205,8 +219,10 @@ const onKeyDown = async (e: KeyboardEvent) => {
           if (!isPkAvail && !rowObj.rowMeta.new) {
             return message.info("Update not allowed for table which doesn't have primary Key")
           }
-          rowObj.row[columnObj.title] = ''
-          editEnabled = true
+          if (makeEditable(rowObj, columnObj)) {
+            rowObj.row[columnObj.title] = ''
+          }
+          // editEnabled = true
         }
       }
       break
@@ -319,7 +335,7 @@ const onNavigate = (dir: NavigateDir) => {
                 :data-col="columnObj.id"
                 :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"
-                @dblclick="editEnabled = true"
+                @dblclick="makeEditable(row, columnObj)"
                 @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
               >
                 <div class="w-full h-full">
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 082b027807..24038cde3b 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -18,6 +18,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
 
   // getters
   const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
+  const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
   const xWhere = computed(() => {
     let where
     const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
@@ -41,6 +42,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
     $api,
     search,
     xWhere,
+    isPkAvail,
   }
 })
 

From ac046a24a941c975ec36aa303fe0624d9a1021ab Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 14:29:03 +0530
Subject: [PATCH 16/34] filter(gui-v2): correction in filter delete

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 -
 .../smartsheet-toolbar/ColumnFilter.vue       |  2 +-
 .../nc-gui-v2/composables/useViewFilters.ts   | 27 +++++++++++--------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 1b71a9a17f..0e5864cd54 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    '(fix(gui-v2)': block user from editing pk and ai values)
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 87d4bb03c8..8cc8d66b30 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -124,7 +124,7 @@ defineExpose({
               v-if="!filter.readOnly"
               :key="i"
               small
-              class="nc-filter-item-remove-btn text-grey"
+              class="nc-filter-item-remove-btn cursor-pointer text-grey"
               @click.stop="deleteFilter(filter, i)"
             />
             <span v-else :key="`${i}dummy`" />
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 11b633fd7e..1007b3ba92 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -43,19 +43,24 @@ export function useViewFilters(
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
+    // if shared or sync permission not allowed simply remove it from array
     if (shared || !isUIAllowed('filterSync')) {
-      const _filters = unref(filters.value)
-      _filters.splice(i, 1)
-      filters.value = _filters
-    } else if (filter.id) {
-      if (!autoApply?.value) {
-        filter.status = 'delete'
+      filters.value.splice(i, 1)
+      reloadData?.()
+    } else {
+      if (filter.id) {
+        // if auto-apply disabled mark it as disabled
+        if (!autoApply?.value) {
+          filter.status = 'delete'
+          // if auto-apply enabled invoke delete api and remove from array
+        } else {
+          await $api.dbTableFilter.delete(filter.id)
+          reloadData?.()
+          filters.value.splice(i, 1)
+        }
+        // if not synced yet remove it from array
       } else {
-        await $api.dbTableFilter.delete(filter.id)
-        const _filters = unref(filters.value)
-        _filters.splice(i, 1)
-        filters.value = _filters
-        reloadData?.()
+        filters.value.splice(i, 1)
       }
     }
   }

From bf96039c5e665a46ab858c9924674274ad93dff7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 14:48:08 +0530
Subject: [PATCH 17/34] fix(gui-v2): handle renaming of active tab

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useTabs.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index 8498b6d975..449abc7897 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -26,7 +26,7 @@ export function useTabs() {
   const tabs = useState<TabItem[]>('tabs', () => [])
 
   const route = useRoute()
-
+  const router = useRouter()
   const { tables } = useProject()
 
   const activeTabIndex: WritableComputedRef<number> = computed({
@@ -36,6 +36,8 @@ export function useTabs() {
 
         const id = tables.value?.find((t) => t.title === tab.title)?.id
 
+        if (!id) return -1
+
         tab.id = id as string
 
         let index = tabs.value.findIndex((t) => t.id === tab.id)
@@ -108,7 +110,14 @@ export function useTabs() {
   const updateTab = (key: number | Partial<TabItem>, newTabItemProps: Partial<TabItem>) => {
     const tab = typeof key === 'number' ? tabs.value[key] : tabs.value.find(getPredicate(key))
     if (tab) {
+      const isActive = tabs.value.indexOf(tab) === activeTabIndex.value
       Object.assign(tab, newTabItemProps)
+      if (isActive && tab.title)
+        router.replace({
+          params: {
+            title: tab.title,
+          },
+        })
     }
   }
 

From 22b91cfafc8dc53d2b627ee0b76f4e0118519b17 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 15:36:26 +0530
Subject: [PATCH 18/34] wip(gui-v2): virtual column header tooltip

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-header/VirtualCell.vue         | 206 +++++++-----------
 scripts/sdk/swagger.json                      |   5 +-
 2 files changed, 79 insertions(+), 132 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 018ad1d8c6..d3ae873a9d 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,143 +1,82 @@
 <script setup lang="ts">
+import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { toRef } from 'vue'
-import type { ColumnType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import { $computed } from 'vue/macros'
+import { useMetas } from '~/composables'
 import { ColumnInj, MetaInj } from '~/context'
-import { provide } from '#imports'
+import type { TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { provide, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any } }>()
 const column = toRef(props, 'column')
-
 provide(ColumnInj, column)
-
+const { metas } = useMetas()
 const meta = inject(MetaInj)
 
-useProvideColumnCreateStore(meta as Ref<TableType>, column)
+const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
+
+const colOptions = $computed(() => column.value?.colOptions)
+const tableTile = $computed(() => meta?.value?.title)
+const relationColumn = $computed<LinkToAnotherRecordType | null>(() => {
+  if (isMm || isHm || isBt) {
+    return column.value?.colOptions as LinkToAnotherRecordType
+  } else if ((column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id) {
+    return meta?.value?.columns?.find(
+      (c) => c.id === (column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id,
+    )?.colOptions as LinkToAnotherRecordType
+  }
+  return null
+})
 
-// import { UITypes } from 'nocodb-sdk'
-// import { getUIDTIcon } from '../helpers/uiTypes'
-// import EditVirtualColumn from '~/components/project/spreadsheet/components/EditVirtualColumn'
-//
-// export default {
-//   name: 'VirtualHeaderCell',
-//   components: { EditVirtualColumn },
-//   props: ['column', 'nodes', 'meta', 'isForm', 'isPublicView', 'sqlUi', 'required', 'isLocked', 'isVirtual'],
-//   data: () => ({
-//     columnDeleteDialog: false,
-//     editColumnMenu: false,
-//     rollupIcon: getUIDTIcon('Rollup'),
-//     rels: ['bt', 'hm', 'mm']
-//   }),
-//   computed: {
-//     alias() {
-//       // return this.column.lk ? `${this.column.lk._lcn} <small class="grey--text text--darken-1">(from ${this.column.lk._ltn})</small>` : this.column.title
-//       return this.column.title
-//     },
-//     type() {
-//       if (this.column?.colOptions?.type) {
-//         return this.column.colOptions.type
-//       }
-//       if (this.column?.colOptions?.formula) {
-//         return 'formula'
-//       }
-//       if (this.column.uidt === UITypes.Lookup) {
-//         return 'lk'
-//       }
-//       if (this.column.uidt === UITypes.Rollup) {
-//         return 'rl'
-//       }
-//       return ''
-//     },
-//     relation() {
-//       if (this.rels.includes(this.type)) {
-//         return this.column
-//       } else if (this.column.colOptions?.fk_relation_column_id) {
-//         return this.meta.columns.find(c => c.id === this.column.colOptions?.fk_relation_column_id)
-//       }
-//       return undefined
-//     },
-//     relationType() {
-//       return this.relation?.colOptions?.type
-//     },
-//     relationMeta() {
-//       if (this.rels.includes(this.type)) {
-//         return this.getMeta(this.column.colOptions.fk_related_model_id)
-//       } else if (this.relation) {
-//         return this.getMeta(this.relation.colOptions.fk_related_model_id)
-//       }
-//       return undefined
-//     },
-//     childColumn() {
-//       if (this.relationMeta?.columns) {
-//         if (this.type === 'rl') {
-//           const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_rollup_column_id)
-//           return ch
-//         }
-//         if (this.type === 'lk') {
-//           const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_lookup_column_id)
-//           return ch
-//         }
-//       }
-//       return ''
-//     },
-//     childTable() {
-//       if (this.relationMeta?.title) {
-//         return this.relationMeta.title
-//       }
-//       return ''
-//     },
-//     parentTable() {
-//       if (this.rels.includes(this.type)) {
-//         return this.meta.title
-//       }
-//       return ''
-//     },
-//     parentColumn() {
-//       if (this.rels.includes(this.type)) {
-//         return this.column.title
-//       }
-//       return ''
-//     },
-//     tooltipMsg() {
-//       if (!this.column) {
-//         return ''
-//       }
-//       if (this.type === 'hm') {
-//         return `'${this.parentTable}' has many '${this.childTable}'`
-//       } else if (this.type === 'mm') {
-//         return `'${this.childTable}' & '${this.parentTable}' have <br>many to many relation`
-//       } else if (this.type === 'bt') {
-//         return `'${this.column.title}' belongs to '${this.childTable}'`
-//       } else if (this.type === 'lk') {
-//         return `'${this.childColumn.title}' from '${this.childTable}' (${this.childColumn.uidt})`
-//       } else if (this.type === 'formula') {
-//         return `Formula - ${this.column.colOptions.formula}`
-//       } else if (this.type === 'rl') {
-//         return `'${this.childColumn.title}' of '${this.childTable}' (${this.childColumn.uidt})`
-//       }
-//       return ''
-//     }
-//   },
-//   methods: {
-//     getMeta(id) {
-//       return this.$store.state.meta.metas[id] || {}
-//     },
-//     async deleteColumn() {
-//       try {
-//         await this.$api.dbTableColumn.delete(this.column.id)
-//
-//         if (this.column.uidt === UITypes.LinkToAnotherRecord && this.column.colOptions) {
-//           this.$store.dispatch('meta/ActLoadMeta', { force: true, id: this.column.colOptions.fk_related_model_id }).then(() => {})
-//         }
-//
-//         this.$emit('saved')
-//         this.columnDeleteDialog = false
-//       } catch (e) {
-//         this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
-//       }
-//     }
-//   }
-// }
+const relatedTableMeta = $computed(
+  () => relationColumn && relationColumn?.fk_related_model_id && metas.value?.[relationColumn?.fk_related_model_id as string],
+)
+
+const relatedTableTitle = $computed(() => relatedTableMeta?.title)
+
+const childColumn = $computed(() => {
+  if (relatedTableMeta?.columns) {
+    if (isRollup) {
+      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
+      return ch
+    }
+    if (isLookup) {
+      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
+      return ch
+    }
+  }
+  return ''
+})
+
+const tooltipMsg = computed(() => {
+  if (!column.value) {
+    return ''
+  }
+  if (isHm.value) {
+    return `'${tableTile}' has many '${relatedTableTitle}'`
+  } else if (isMm.value) {
+    return `'${tableTile}' & '${relatedTableTitle}' have many to many relation`
+  } else if (isBt.value) {
+    return `'${column?.value?.title}' belongs to '${relatedTableTitle}'`
+  } else if (isLookup.value) {
+    return `'${childColumn.title}' from '${relatedTableTitle}' (${childColumn.uidt})`
+  } else if (isFormula.value) {
+    const formula = substituteColumnIdWithAliasInFormula(
+      (column.value?.colOptions as FormulaType)?.formula,
+      meta?.value?.columns as ColumnType[],
+      (column.value?.colOptions as any)?.formula_raw,
+    )
+    return `Formula - ${formula}`
+  } else if (isRollup.value) {
+    return `'${childColumn.title}' of '${relatedTableTitle}' (${childColumn.uidt})`
+  }
+  return ''
+})
+
+
+useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
 
 <template>
@@ -147,7 +86,12 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
           todo: bring tooltip
           -->
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
-    <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+    <a-tooltip placement="bottom">
+      <template #title>
+        {{ tooltipMsg }}
+      </template>
+      <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+    </a-tooltip>
     <span v-if="column.rqd" class="error--text text--lighten-1">&nbsp;*</span>
 
     <!--    <span class="caption" v-html="tooltipMsg" /> -->
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 5bd209698c..741f09f841 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6778,7 +6778,7 @@
         }
       },
       "Formula": {
-        "title": "Lookup",
+        "title": "Formula",
         "type": "object",
         "properties": {
           "id": {
@@ -6796,6 +6796,9 @@
           "formula": {
             "type": "string"
           },
+          "formula_raw": {
+            "type": "string"
+          },
           "deleted": {
             "type": "string"
           },

From d6b9a77d5924fbbe5bc787c1ac3b862a4e89ece6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:33:08 +0530
Subject: [PATCH 19/34] fix(gui-v2): virtual column header tooltip correction -
 lookup/rollup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/VirtualCell.vue       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index d3ae873a9d..9b9cdfc801 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -19,8 +19,8 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 
 const colOptions = $computed(() => column.value?.colOptions)
 const tableTile = $computed(() => meta?.value?.title)
-const relationColumn = $computed<LinkToAnotherRecordType | null>(() => {
-  if (isMm || isHm || isBt) {
+const relationColumnOptions = $computed<LinkToAnotherRecordType | null>(() => {
+  if (isMm.value || isHm.value || isBt.value) {
     return column.value?.colOptions as LinkToAnotherRecordType
   } else if ((column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id) {
     return meta?.value?.columns?.find(
@@ -31,18 +31,18 @@ const relationColumn = $computed<LinkToAnotherRecordType | null>(() => {
 })
 
 const relatedTableMeta = $computed(
-  () => relationColumn && relationColumn?.fk_related_model_id && metas.value?.[relationColumn?.fk_related_model_id as string],
+  () => relationColumnOptions?.fk_related_model_id && metas.value?.[relationColumnOptions?.fk_related_model_id as string],
 )
 
 const relatedTableTitle = $computed(() => relatedTableMeta?.title)
 
 const childColumn = $computed(() => {
   if (relatedTableMeta?.columns) {
-    if (isRollup) {
+    if (isRollup.value) {
       const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
       return ch
     }
-    if (isLookup) {
+    if (isLookup.value) {
       const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
       return ch
     }

From 7f3e92d63f9f14478315197dd6b2e51817923d2b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:40:10 +0530
Subject: [PATCH 20/34] fix(gui-v2): reload data after system field toggle

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useViewColumns.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 44d62505c8..4bfe8e52c0 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -99,10 +99,12 @@ export function useViewColumns(
     },
     set(v) {
       if (view?.value?.id) {
-        $api.dbView.update(view.value.id, {
-          // todo: update swagger
-          show_system_fields: v,
-        } as any)
+        $api.dbView
+          .update(view.value.id, {
+            // todo: update swagger
+            show_system_fields: v,
+          } as any)
+          .finally(() => reloadData?.())
         ;(view.value as any).show_system_fields = v
       }
     },

From 0c61a273a665a78b1dc60f192af74e41d9b03c30 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:42:31 +0530
Subject: [PATCH 21/34] refactor(gui-v2): show search option in uidt

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index cfdf4cf23e..35dd0fd9fc 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -107,7 +107,13 @@ watch(
         />
       </a-form-item>
       <a-form-item :label="$t('labels.columnType')">
-        <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input" @change="onUidtOrIdTypeChange">
+        <a-select
+          v-model:value="formState.uidt"
+          show-search
+          size="small"
+          class="nc-column-name-input"
+          @change="onUidtOrIdTypeChange"
+        >
           <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
             <div class="flex gap-1 align-center text-xs">
               <component :is="opt.icon" class="text-grey" />

From b9eafb04e7a68c126f3dd2fbff16e117458b8788 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:50:36 +0530
Subject: [PATCH 22/34] refactor(gui-v2): enter key navigation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index e9547fc51f..01ed8dd11b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -5,7 +5,6 @@ import { isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
-  onKeyStroke,
   onMounted,
   onUnmounted,
   provide,
@@ -18,7 +17,6 @@ import type { Row } from '~/composables'
 import {
   ActiveViewInj,
   ChangePageInj,
-  EditModeInj,
   FieldsInj,
   IsFormInj,
   IsGridInj,
@@ -247,19 +245,13 @@ const onNavigate = (dir: NavigateDir) => {
   if (selected.row === null || selected.col === null) return
   switch (dir) {
     case NavigateDir.NEXT:
-      if (selected.col < visibleColLength - 1) {
-        selected.col++
-      } else if (selected.row < data.value.length - 1) {
+      if (selected.row < data.value.length - 1) {
         selected.row++
-        selected.col = 0
       }
       break
     case NavigateDir.PREV:
-      if (selected.col > 0) {
-        selected.col--
-      } else if (selected.row > 0) {
+      if (selected.row > 0) {
         selected.row--
-        selected.col = visibleColLength - 1
       }
       break
   }

From e1c208d42d56568df50ae9a53c408247964cbc57 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:53:40 +0530
Subject: [PATCH 23/34] refactor(gui-v2): keep loading in navbar static

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/app.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 5ae49b4f84..6f6c80b80e 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -30,20 +30,21 @@ const toggleSidebar = () => {
 
       <div class="flex-1" />
 
-      <div class="ml-4 flex justify-center flex-1">
+      <div class="ml-4 flex justify-center flex-shrink">
         <div class="flex items-center gap-2 cursor-pointer nc-noco-brand-icon" @click="navigateTo('/')">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl">NocoDB</span>
         </div>
 
+      </div>
+
+      <div class="flex-1 text-left">
         <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
           {{ $t('general.loading') }}
           <mdi-reload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
         </div>
       </div>
 
-      <div class="flex-1" />
-
       <div class="flex justify-end gap-4">
         <general-language class="mr-3" />
 

From af9cf09baa32600586edd72f8832ec81b966ccc5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 00:05:12 +0530
Subject: [PATCH 24/34] fix(gui-v2): exclude deleted fields from fields list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useViewColumns.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 4bfe8e52c0..5f4fb26b7d 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -135,7 +135,7 @@ export function useViewColumns(
         ) {
           return false
         }
-        return c.show
+        return c.show && metaColumnById?.value?.[c.fk_column_id!]
       })
       ?.sort((a, b) => a.order - b.order)
       ?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]

From f335d3d418db837eeb6c482750e1fc7e2cb270d5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 11:37:47 +0530
Subject: [PATCH 25/34] fix(gui-v2): hide share view from gallery

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/app.vue                           | 1 -
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 9 ++++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 6f6c80b80e..791784ddca 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -35,7 +35,6 @@ const toggleSidebar = () => {
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl">NocoDB</span>
         </div>
-
       </div>
 
       <div class="flex-1 text-left">
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 93135792eb..49b4eac4bc 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { IsFormInj, IsGridInj } from '~/context'
+
+const isForm = inject(IsFormInj)
+const isGrid = inject(IsGridInj)
+</script>
+
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
     <SmartsheetToolbarSearchData class="flex-shrink" />
@@ -8,7 +15,7 @@
 
     <SmartsheetToolbarSortListMenu />
 
-    <SmartsheetToolbarShareView />
+    <SmartsheetToolbarShareView v-if="isForm || isGrid" />
 
     <SmartsheetToolbarMoreActions />
 

From 15a382ef4d555bb5dd0f54bf02f68958f9c410e4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 11:46:03 +0530
Subject: [PATCH 26/34] fix(gui-v2): hide share view from gallery

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Toolbar.vue     |  5 ++---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue   |  8 ++++----
 .../nc-gui-v2/composables/useSmartsheetStore.ts     | 13 ++++++++++---
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 49b4eac4bc..0fde0f591b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { IsFormInj, IsGridInj } from '~/context'
+import { useSmartsheetStoreOrThrow } from '~/composables'
 
-const isForm = inject(IsFormInj)
-const isGrid = inject(IsGridInj)
+const { isGrid, isForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 57ed384d0b..7882ed2a5f 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -37,7 +37,7 @@ provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
 provide(RightSidebarInj, ref(true))
 
-useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
   if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)
@@ -52,11 +52,11 @@ watch(tabMeta, async (newTabMeta, oldTabMeta) => {
       <template v-if="meta">
         <div class="flex flex-1 min-h-0">
           <div v-if="activeView" class="h-full flex-grow min-w-0 min-h-0">
-            <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" />
+            <SmartsheetGrid v-if="isGrid" :ref="el" />
 
-            <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
+            <SmartsheetGallery v-else-if="isGallery" />
 
-            <SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
+            <SmartsheetForm v-else-if="isForm" />
           </div>
         </div>
 
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 24038cde3b..87f999c6f5 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -1,11 +1,12 @@
 import { computed } from '@vue/reactivity'
-import { createInjectionState } from '@vueuse/core'
+import { ViewTypes } from 'nocodb-sdk'
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
+import { useInjectionState } from '~/composables/useInjectionState'
 
-const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
+const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
   const { $api } = useNuxtApp()
   const { sqlUi } = useProject()
 
@@ -19,6 +20,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
   // getters
   const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
   const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
+  const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
+  const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
+  const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
   const xWhere = computed(() => {
     let where
     const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
@@ -43,8 +47,11 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
     search,
     xWhere,
     isPkAvail,
+    isForm,
+    isGrid,
+    isGallery,
   }
-})
+}, 'smartsheet-store')
 
 export { useProvideSmartsheetStore }
 

From 598f1abf49a140df95657ac759587aa1da1c260d Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 8 Aug 2022 11:49:19 +0530
Subject: [PATCH 27/34] fix: email/url validation error handling

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/composables/useViewData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 9ee4a5b735..0fc55ae203 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -85,7 +85,7 @@ export function useViewData(
         .map((c) => row[c.title as string])
         .join('___') as string
 
-      return $api.dbViewRow.update(
+      return await $api.dbViewRow.update(
         NOCO,
         project?.value.id as string,
         meta?.value.id as string,

From bc1de4be2d59f1acf25f9601880859b74c0df1c8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 11:56:18 +0530
Subject: [PATCH 28/34] fix(gui-v2): on delete remove tab from state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useTabs.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index 449abc7897..384e20e15f 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -18,8 +18,8 @@ export interface TabItem {
 function getPredicate(key: Partial<TabItem>) {
   return (tab: TabItem) =>
     (!('id' in key) || tab.id === key.id) &&
-    (!('title' in key) || tab.title === key.id) &&
-    (!('type' in key) || tab.type === key.id)
+    (!('title' in key) || tab.title === key.title) &&
+    (!('type' in key) || tab.type === key.type)
 }
 
 export function useTabs() {

From 26eec067308b1630ffab0463d8c0faa75a1b6b63 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:03:26 +0530
Subject: [PATCH 29/34] fix(gui-v2): use windicss utility classes

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/app.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 791784ddca..3fe585a1a1 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -30,7 +30,7 @@ const toggleSidebar = () => {
 
       <div class="flex-1" />
 
-      <div class="ml-4 flex justify-center flex-shrink">
+      <div class="ml-4 flex justify-center shrink">
         <div class="flex items-center gap-2 cursor-pointer nc-noco-brand-icon" @click="navigateTo('/')">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl">NocoDB</span>

From 40041b863658bab9f9a81f744f819f720c864e5b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:07:21 +0530
Subject: [PATCH 30/34] refactor(gui-v2): remove unnecessary optional chaining

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/EditOrAdd.vue        | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 35dd0fd9fc..e941476439 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -37,12 +37,13 @@ const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const uiTypesOptions = computed<typeof uiTypes>(() => {
   return [
-    ...uiTypes.filter((t) => !isEdit || !t.virtual),
-    ...(!isEdit?.value && meta?.value?.columns?.every((c) => !c.pk)
+    ...uiTypes.filter((t) => !isEdit.value || !t.virtual),
+    ...(!isEdit.value && meta?.value?.columns?.every((c) => !c.pk)
       ? [
           {
-            name: 'ID',
-            icon: 'mdi-identifier',
+            name: UITypes.ID,
+            icon: MdiIdentifierIcon,
+            virtual: 0,
           },
         ]
       : []),
@@ -65,7 +66,7 @@ function onCancel() {
 
 // create column meta if it's a new column
 watchEffect(() => {
-  if (!isEdit?.value) {
+  if (!isEdit.value) {
     generateNewColumnMeta()
   }
 })

From 62c83c3c8d00b7af8f45a2f31000c0524e7517de Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:09:22 +0530
Subject: [PATCH 31/34] refactor(gui-v2): replace comma separated statement
 with inline function

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index e941476439..03160906da 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -167,7 +167,12 @@ watch(
             html-type="submit"
             type="primary"
             size="small"
-            @click="addOrUpdate(reloadMetaAndData), (advancedOptions = false)"
+            @click="
+              () => {
+                addOrUpdate(reloadMetaAndData)
+                advancedOptions = false
+              }
+            "
           >
             <!-- Save -->
             {{ $t('general.save') }}

From 49fe82546bd078aee8313af4235f7aaf0e97da9b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:10:01 +0530
Subject: [PATCH 32/34] refactor(gui-v2): remove unused event args

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 01ed8dd11b..d74590f500 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -236,7 +236,7 @@ onUnmounted(() => {
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
-onClickOutside(smartTable, (event) => {
+onClickOutside(smartTable, () => {
   selected.row = null
   selected.col = null
 })

From 91565b0ce7aa895d7ffdab93f299d7a6346dd8d5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:13:03 +0530
Subject: [PATCH 33/34] refactor(gui-v2): use `useEventListener` for binding
 event handler

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index d74590f500..542e0b8bd9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useEventListener } from '@vueuse/core'
 import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
   onMounted,
-  onUnmounted,
   provide,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
@@ -227,12 +226,7 @@ const onKeyDown = async (e: KeyboardEvent) => {
   }
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', onKeyDown)
-})
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeyDown)
-})
+useEventListener(document, 'keydown', onKeyDown)
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)

From f454422d39a8cd4158fcabc74417f296bce40dba Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:22:16 +0530
Subject: [PATCH 34/34] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 9b9cdfc801..5ecb20bbab 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
-import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType, TableType } from 'nocodb-sdk'
 import { toRef } from 'vue'
 import { $computed } from 'vue/macros'
+import type { Ref } from 'vue'
 import { useMetas } from '~/composables'
 import { ColumnInj, MetaInj } from '~/context'
-import type { TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
 import { provide, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any } }>()
@@ -75,7 +74,6 @@ const tooltipMsg = computed(() => {
   return ''
 })
 
-
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>