fix(gui-v2): LTAR and other virtual column rename

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

packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@@ -106,15 +106,10 @@ if (!formState.value?.column_name) {
 <template>
   <div class="min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
     <a-form v-model="formState" name="column-create-or-edit" layout="vertical">
-      <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
-        <a-input
-          ref="antInput"
-          v-model:value="formState.column_name"
-          size="small"
-          class="nc-column-name-input"
-          @input="onAlter(8)"
-        />
+      <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.title">
+        <a-input ref="antInput" v-model:value="formState.title" size="small" class="nc-column-name-input" @input="onAlter(8)" />
       </a-form-item>
+
       <a-form-item
         v-if="!(editColumnDropdown && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
         :label="$t('labels.columnType')"

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

@@ -43,7 +43,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
     const validators = computed(() => {
       return {
-        column_name: [
+        title: [
           {
             required: true,
             message: 'Column name is required',
@@ -88,6 +88,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const generateNewColumnMeta = () => {
       setAdditionalValidations({})
       formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
+      formState.value.title = formState.value.title || formState.value.column_name
     }
 
     const onUidtOrIdTypeChange = () => {
@@ -180,7 +181,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
         if (!(await validate())) return
 
         formState.value.table_name = meta.value.table_name
-        formState.value.title = formState.value.column_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')
@@ -210,6 +211,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
     }
 
+    /** set column name same as title which is actual name in db */
+    watch(
+      () => formState.value?.title,
+      (newTitle) => (formState.value.column_name = newTitle),
+    )
+
     return {
       formState,
       resetFields,