nocodb · codegen-sh · Jun 7, 2025
diff --git a/packages/nc-gui/components/dlg/Column/UnsavedChangesConfirm.vue b/packages/nc-gui/components/dlg/Column/UnsavedChangesConfirm.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps<{
+  visible?: boolean
+  saving?: boolean
+}>();
+
+const emit = defineEmits(['save', 'cancel', 'update:visible']);
+
+const visible = useVModel(props, 'visible', emit);
+</script>
+
+<template>
+  <NcModal v-model:visible="visible" size="small" :show-separator="false" :centered="false">
+    <template #header>
+      <div class="flex flex-row items-center gap-x-2">Unsaved Changes</div>
+    </template>
+
+    <div class="flex flex-col" @click.stop>
+      <div class="text-gray-800 mb-3">
+        <div class="flex item-center gap-2">
+          <GeneralIcon id="nc-selected-item-icon" icon="alertTriangle" class="h-10 w-10 text-yellow-500" />
+          You have unsaved changes. Would you like to save them before closing?
+        </div>
+      </div>
+
+      <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">
+        <NcButton size="small" type="secondary" @click="emit('cancel')">
+          No, Cancel
+        </NcButton>
+
+        <NcButton
+          key="submit"
+          autofocus
+          size="small"
+          type="primary"
+          html-type="submit"
+          :loading="saving"
+          data-testid="nc-save-changes-btn"
+          @click="emit('save')"
+        >
+          Yes, Save Changes
+          <template #loading> Saving... </template>
+        </NcButton>
+      </div>
+    </div>
+  </NcModal>
+</template>
+
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -334,6 +334,14 @@ const reloadMetaAndData = async () => {
 const saving = ref(false)
 
 const warningVisible = ref(false)
+const unsavedChangesVisible = ref(false)
+const hasChanges = ref(false)
+
+// Track if form has changes
+watch(formState, () => {
+  if (!mounted.value) return
+  hasChanges.value = true
+}, { deep: true })
 
 const saveSubmitted = async () => {
   if (readOnly.value) return
@@ -378,159 +386,50 @@ async function onSubmit() {
 
     const { close } = useDialog(resolveComponent('DlgColumnUpdateConfirm'), {
       'visible': warningVisible,
-      'onUpdate:visible': (value) => (warningVisible.value = value),
+      'onUpdate:visible': (value) => {
+        warningVisible.value = value
+      },
       'saving': saving,
       'onSubmit': async () => {
         close()
+        await onAlter()
         await saveSubmitted()
       },
+      'onCancel': () => {
+        close()
+      },
     })
-  } else await saveSubmitted()
-}
-
-// focus and select the column name field
-const antInput = ref()
-watchEffect(() => {
-  if (antInput.value && formState.value && !readOnly.value) {
-    // todo: replace setTimeout
-    setTimeout(() => {
-      // focus and select input only if active element is not an input or textarea
-      if (
-        (document.activeElement === document.body ||
-          document.activeElement === null ||
-          ['BUTTON', 'DIV'].includes(document.activeElement?.tagName)) &&
-        !props.disableTitleFocus
-      ) {
-        antInput.value?.focus()
-        antInput.value?.select()
-      }
-    }, 300)
-  }
-  advancedOptions.value = false
-})
-
-const enableDescription = ref(false)
-
-const descInputEl = ref()
-
-const removeDescription = () => {
-  formState.value.description = ''
-  enableDescription.value = false
-}
-
-onMounted(() => {
-  if (column.value?.description?.length || editDescription.value) {
-    enableDescription.value = true
-  }
-  if (!isEdit.value) {
-    generateNewColumnMeta(true)
-  } else {
-    if (formState.value.pk) {
-      message.info(t('msg.info.editingPKnotSupported'))
-      emit('cancel')
-    } else if (isSystemColumn(formState.value) && !isSelfReferencingTableColumn(formState.value)) {
-      message.info(t('msg.info.editingSystemKeyNotSupported'))
-      emit('cancel')
-    }
-  }
-
-  if (props.preload) {
-    const { colOptions, ...others } = props.preload
-    formState.value = {
-      ...formState.value,
-      ...others,
-    }
-
-    if (colOptions) {
-      const meta = formState.value.meta || {}
-      onUidtOrIdTypeChange()
-      formState.value = {
-        ...formState.value,
-        colOptions: {
-          ...colOptions,
-        },
-        meta,
-      }
-    }
   } else {
-    formState.value.filters = undefined
-  }
-
-  // for cases like formula
-  if (formState.value && !formState.value.column_name && !isLinksOrLTAR(formState.value)) {
-    formState.value.column_name = formState.value?.title
+    await saveSubmitted()
   }
-
-  nextTick(() => {
-    mounted.value = true
-    emit('mounted')
-
-    handleScrollDebounce()
-
-    if (!isEdit.value) {
-      if (!formState.value?.temp_id) {
-        emit('add', formState.value)
-      }
-    }
-
-    if (isForm.value && !props.fromTableExplorer && !enableDescription.value) {
-      setTimeout(() => {
-        antInput.value?.focus()
-        antInput.value?.select()
-      }, 100)
-    } else if (props.editDescription) {
-      setTimeout(() => {
-        descInputEl.value?.focus()
-      }, 100)
-    }
-  })
-})
-
-const handleEscape = (event: KeyboardEvent): void => {
-  if (isColumnTypeOpen.value || isWebhookCreateModalOpen.value) return
-
-  if (event.key === 'Escape') emit('cancel')
 }
 
-const isFieldsTab = computed(() => {
-  return openedViewsTab.value === 'field'
-})
-
-const  boolean) => {
-  if (value) {
-    isColumnTypeOpen.value = value
+// Function to handle cancel with unsaved changes check
+function handleCancel() {
+  if (hasChanges.value) {
+    unsavedChangesVisible.value = true
+
+    const { close } = useDialog(resolveComponent('DlgColumnUnsavedChangesConfirm'), {
+      'visible': unsavedChangesVisible,
+      'onUpdate:visible': (value) => {
+        unsavedChangesVisible.value = value
+      },
+      'saving': saving,
+      'onSave': async () => {
+        close()
+        await onSubmit()
+      },
+      'onCancel': () => {
+        close()
+        hasChanges.value = false
+        emit('cancel')
+      },
+    })
   } else {
-    showHoverEffectOnSelectedType.value = true
-    setTimeout(() => {
-      isColumnTypeOpen.value = value
-    }, 100)
+    emit('cancel')
   }
 }
 
-const handleResetHoverEffect = () => {
-  if (!showHoverEffectOnSelectedType.value) return
-
-  showHoverEffectOnSelectedType.value = false
-}
-
-watch(
-  formState,
-  () => {
-    if (mounted.value) {
-      if (props.fromTableExplorer) {
-        emit('update', formState.value)
-      } else if (activeSelectedField.value === formState.value.ai_temp_id) {
-        const selectedField = predicted.value.find((f) => f.ai_temp_id === activeSelectedField.value)
-
-        if (!selectedField) return
-
-        selectedField.formState = clone(formState.value)
-      }
-    }
-  },
-  { deep: true },
-)
-
 const submitBtnLabel = computed(() => {
   const aiAutoSuggestModeLabel = `${t('general.create')} ${
     activeTabSelectedFields.value.length > 1
@@ -670,6 +569,12 @@ watch(activeAiTab, (newValue) => {
   }
   onSelectedTagClick()
 })
+
+const handleEscape = (event: KeyboardEvent): void => {
+  if (isColumnTypeOpen.value || isWebhookCreateModalOpen.value) return
+
+  if (event.key === 'Escape') handleCancel()
+}
 </script>
 
 <template>
@@ -999,7 +904,7 @@ watch(activeAiTab, (newValue) => {
           <a-form-item>
             <div class="flex gap-x-2 justify-end">
               <!-- Cancel -->
-              <NcButton size="small" html-type="button" type="secondary" :disabled="saving" @click="emit('cancel')">
+              <NcButton size="small" html-type="button" type="secondary" :disabled="saving" @click="handleCancel">
                 {{ $t('general.cancel') }}
               </NcButton>
 
@@ -1405,7 +1310,7 @@ watch(activeAiTab, (newValue) => {
                 }"
               >
                 <!-- Cancel -->
-                <NcButton size="small" html-type="button" type="secondary" :disabled="saving" @click="emit('cancel')">
+                <NcButton size="small" html-type="button" type="secondary" :disabled="saving" @click="handleCancel">
                   {{ $t('general.cancel') }}
                 </NcButton>
 

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
@@ -25,6 +25,8 @@ useProvideColumnCreateStore(meta, column, tableExplorerColumns, fromTableExplore
 
 const { isWebhookCreateModalOpen, isAiButtonConfigModalOpen } = useColumnCreateStoreOrThrow()
 
+const editOrAddRef = ref()
+
 /**
  * Determines whether the root dropdown should remain open.
  *
@@ -38,13 +40,24 @@ const shouldKeepModalOpen = (): boolean => {
   return isWebhookCreateModalOpen.value || isAiButtonConfigModalOpen.value
 }
 
+// Function to handle cancel with confirmation if needed
+const handleCancel = () => {
+  if (editOrAddRef.value) {
+    editOrAddRef.value.handleCancel()
+  } else {
+    emit('cancel')
+  }
+}
+
 defineExpose({
   shouldKeepModalOpen,
+  handleCancel,
 })
 </script>
 
 <template>
   <SmartsheetColumnEditOrAdd
+    ref="editOrAddRef"
     :preload="preload"
     :column-position="props.columnPosition"
     :edit-description="editDescription"

diff --git a/packages/nc-gui/components/smartsheet/grid/onVisibilityChange.js b/packages/nc-gui/components/smartsheet/grid/onVisibilityChange.js
@@ -0,0 +1,17 @@
+const  => {
+  if (visible) {
+    addColumnDropdown.value = true
+  } else {
+    const shouldKeepOpen = editOrAddProviderRef.value?.shouldKeepModalOpen()
+
+    if (!shouldKeepOpen) {
+      if (editOrAddProviderRef.value) {
+        editOrAddProviderRef.value.handleCancel()
+      } else {
+        addColumnDropdown.value = false
+      }
+    } else {
+      addColumnDropdown.value = true
+    }
+  }
+}