feat(gui-v2): close create column dialog on cancel

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

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

@@ -77,12 +77,7 @@ formState.value.au = !!formState.value.au
       />
     </a-form-item>
     <a-form-item v-if="sqlUi.showScale(formState)" label="Scale">
-      <a-input
-        v-model="formState.dtxs"
-        :disabled="!sqlUi.columnEditable(formState)"
-        size="small"
-        @input="onAlter"
-      />
+      <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

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

@@ -6,6 +6,7 @@ import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
+const emit = defineEmits(['cancel'])
 const meta = inject(MetaInj)
 const advancedOptions = ref(false)
 
@@ -33,12 +34,7 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
   <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
     <a-form v-model="formState" layout="vertical">
       <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
-        <a-input
-          v-model:value="formState.column_name"
-          size="small"
-          class="nc-column-name-input"
-          @input="onAlter(8)"
-        />
+        <a-input v-model:value="formState.column_name" size="small" class="nc-column-name-input" @input="onAlter(8)" />
       </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">
@@ -65,7 +61,7 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
       </div>
 
       <div class="flex justify-end gap-1 mt-4">
-        <a-button html-type="button" size="small">
+        <a-button html-type="button" size="small" @click="emit('cancel')">
           <!-- Cancel -->
           {{ $t('general.cancel') }}
         </a-button>

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

@@ -11,7 +11,7 @@ const editColumnDropdown = $ref(false)
   <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']">
     <span />
     <template #overlay>
-      <SmartsheetColumnEditOrAdd @click.stop />
+      <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
     </template>
   </a-dropdown>
   <a-dropdown :trigger="['hover']">

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

@@ -106,7 +106,7 @@ useProvideColumnCreateStore()
                   <MdiPlusIcon class="text-sm" />
                 </div>
                 <template #overlay>
-                  <SmartsheetColumnEditOrAdd @click.stop />
+                  <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
                 </template>
               </a-dropdown>
             </th>

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

@@ -2,8 +2,6 @@ import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useProject } from '#imports'
 
-
-
 export default (column: ColumnType) => {
   const { project } = useProject()
 

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

@@ -133,8 +133,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
 
   const onAlter = (val = 2, cdf = false) => {
     formState.value.altered = formState.value.altered || val
-    if (cdf)
-      formState.value.cdf = formState.value.cdf || null
+    if (cdf) formState.value.cdf = formState.value.cdf || null
+  }
+
+  const addOrUpdate = () => {
+    // todo
+    console.log('To be done')
   }
 
   const { resetFields, validate, validateInfos } = useForm(formState, validators)
@@ -148,7 +152,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     onUidtOrIdTypeChange,
     sqlUi,
     onDataTypeChange,
-    onAlter
+    onAlter,
+    addOrUpdate,
   }
 })