diff --git a/packages/nc-gui/components/dlg/ColumnUpdateConfirm.vue b/packages/nc-gui/components/dlg/ColumnUpdateConfirm.vue new file mode 100644 index 0000000000..5ed4bdd73b --- /dev/null +++ b/packages/nc-gui/components/dlg/ColumnUpdateConfirm.vue @@ -0,0 +1,46 @@ + + + diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue index d0d3410a07..62a70cf686 100644 --- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue +++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue @@ -2,6 +2,7 @@ import type { ColumnReqType, ColumnType } from 'nocodb-sdk' import { UITypes, UITypesName, isLinksOrLTAR, isSelfReferencingTableColumn, isSystemColumn, isVirtualCol } from 'nocodb-sdk' +import Icon from '../header/Icon.vue' import MdiPlusIcon from '~icons/mdi/plus-circle-outline' import MdiMinusIcon from '~icons/mdi/minus-circle-outline' import MdiIdentifierIcon from '~icons/mdi/identifier' @@ -25,7 +26,6 @@ const emit = defineEmits(['submit', 'cancel', 'mounted', 'add', 'update']) const { formState, - column, generateNewColumnMeta, addOrUpdate, onAlter, @@ -33,6 +33,7 @@ const { validateInfos, isEdit, disableSubmitBtn, + column, } = useColumnCreateStoreOrThrow() const { getMeta } = useMetas() @@ -95,6 +96,9 @@ const onlyNameUpdateOnEditColumns = [ UITypes.LastModifiedTime, UITypes.CreatedBy, UITypes.LastModifiedBy, + UITypes.Formula, + UITypes.QrCode, + UITypes.Barcode, ] // To close column type dropdown on escape and @@ -109,16 +113,20 @@ const geoDataToggleCondition = (t: { name: UITypes }) => { const showDeprecated = ref(false) +const isSystemField = (t: { name: UITypes }) => + [UITypes.CreatedBy, UITypes.CreatedTime, UITypes.LastModifiedBy, UITypes.LastModifiedTime].includes(t.name) + +const uiFilters = (t: { name: UITypes; virtual?: number }) => { + const systemFiledNotEdited = !isSystemField(t) || formState.value.uidt === t.name || !isEdit.value + const geoDataToggle = geoDataToggleCondition(t) && (!isEdit.value || !t.virtual || t.name === formState.value.uidt) + const specificDBType = t.name === UITypes.SpecificDBType && isXcdbBase(meta.value?.source_id) + + return systemFiledNotEdited && geoDataToggle && !specificDBType +} + const uiTypesOptions = computed(() => { return [ - ...uiTypes - .filter( - (t) => - geoDataToggleCondition(t) && - (!isEdit.value || !t.virtual || t.name === formState.value.uidt) && - (!t.deprecated || showDeprecated.value), - ) - .filter((t) => !(t.name === UITypes.SpecificDBType && isXcdbBase(meta.value?.source_id))), + ...uiTypes.filter(uiFilters), ...(!isEdit.value && meta?.value?.columns?.every((c) => !c.pk) ? [ { @@ -146,7 +154,9 @@ const reloadMetaAndData = async () => { const saving = ref(false) -async function onSubmit() { +const warningVisible = ref(false) + +const saveSubmitted = async () => { if (readOnly.value) return saving.value = true @@ -166,6 +176,25 @@ async function onSubmit() { } } +async function onSubmit() { + if (readOnly.value) return + + // Show warning message if user tries to change type of column + if (isEdit.value && formState.value.uidt !== column.value?.uidt) { + warningVisible.value = true + + const { close } = useDialog(resolveComponent('DlgColumnUpdateConfirm'), { + 'visible': warningVisible, + 'onUpdate:visible': (value) => (warningVisible.value = value), + 'saving': saving, + 'onSubmit': async () => { + close() + await saveSubmitted() + }, + }) + } else await saveSubmitted() +} + // focus and select the column name field const antInput = ref() watchEffect(() => { @@ -294,6 +323,7 @@ const filterOption = (input: string, option: { value: UITypes }) => {