多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

396 lines
13 KiB

import rfdc from 'rfdc'
import type { ColumnReqType, ColumnType, TableType } from 'nocodb-sdk'
import { UITypes, isLinksOrLTAR } from 'nocodb-sdk'
import type { Ref } from 'vue'
import type { RuleObject } from 'ant-design-vue/es/form'
import { generateUniqueColumnName } from '~/helpers/parsers/parserHelpers'
const clone = rfdc()
const useForm = Form.useForm
const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
interface ValidationsObj {
[key: string]: RuleObject[]
}
const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
(
meta: Ref<TableType | undefined>,
column: Ref<ColumnType | undefined>,
tableExplorerColumns?: Ref<ColumnType[] | undefined>,
fromTableExplorer?: Ref<boolean | undefined>,
isColumnValid?: Ref<((value: Partial<ColumnType>) => boolean) | undefined>,
) => {
const baseStore = useBase()
const { isMysql: isMysqlFunc, isPg: isPgFunc, isMssql: isMssqlFunc, isXcdbBase: isXcdbBaseFunc } = baseStore
const { sqlUis } = storeToRefs(baseStore)
const { $api } = useNuxtApp()
const { getMeta } = useMetas()
const { t } = useI18n()
const { $e } = useNuxtApp()
const sqlUi = ref(meta.value?.source_id ? sqlUis.value[meta.value?.source_id] : Object.values(sqlUis.value)[0])
const { activeView } = storeToRefs(useViewsStore())
const disableSubmitBtn = ref(false)
const isEdit = computed(() => !!column?.value?.id)
const isMysql = computed(() => isMysqlFunc(meta.value?.source_id ? meta.value?.source_id : Object.keys(sqlUis.value)[0]))
const isPg = computed(() => isPgFunc(meta.value?.source_id ? meta.value?.source_id : Object.keys(sqlUis.value)[0]))
const isMssql = computed(() => isMssqlFunc(meta.value?.source_id ? meta.value?.source_id : Object.keys(sqlUis.value)[0]))
const isXcdbBase = computed(() =>
isXcdbBaseFunc(meta.value?.source_id ? meta.value?.source_id : Object.keys(sqlUis.value)[0]),
)
let postSaveOrUpdateCbk:
| ((params: { update?: boolean; colId: string; column?: ColumnType | undefined }) => Promise<void>)
| null
const idType = null
const additionalValidations = ref<ValidationsObj>({})
const setAdditionalValidations = (validations: ValidationsObj) => {
additionalValidations.value = { ...additionalValidations.value, ...validations }
}
const setPostSaveOrUpdateCbk = (cbk: typeof postSaveOrUpdateCbk) => {
postSaveOrUpdateCbk = cbk
}
const formState = ref<Record<string, any>>({
title: '',
uidt: fromTableExplorer?.value ? UITypes.SingleLineText : null,
...clone(column.value || {}),
})
// actions
const generateNewColumnMeta = (ignoreUidt = false) => {
setAdditionalValidations({})
formState.value = {
meta: {},
...sqlUi.value.getNewColumn(1),
}
formState.value.title = ''
formState.value.column_name = ''
if (ignoreUidt && !fromTableExplorer?.value) {
formState.value.uidt = null
}
}
const validators = computed(() => {
return {
title: [
...(isEdit.value
? [
{
required: true,
message: t('msg.error.columnNameRequired'),
},
]
: []),
// validation for unique column name
{
validator: (rule: any, value: any) => {
return new Promise<void>((resolve, reject) => {
if (
value !== '' &&
(tableExplorerColumns?.value || 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()) &&
c.system,
)
) {
return reject(new Error(t('msg.error.duplicateSystemColumnName')))
}
if (
value !== '' &&
(tableExplorerColumns?.value || 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(t('msg.error.duplicateColumnName')))
}
resolve()
})
},
},
fieldLengthValidator(),
],
uidt: [
{
required: true,
message: t('msg.error.uiDataTypeRequired'),
},
],
...(additionalValidations?.value || {}),
}
})
const { resetFields, validate, validateInfos } = useForm(formState, validators)
const onUidtOrIdTypeChange = () => {
disableSubmitBtn.value = false
const newTitle = updateFieldName(false)
const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
formState.value = {
...(!isEdit.value && {
// only take title, column_name and uidt when creating a column
// to avoid the extra props from being taken (e.g. SingleLineText -> LTAR -> SingleLineText)
// to mess up the column creation
title: newTitle || formState.value.title,
column_name: newTitle || formState.value.column_name,
uidt: formState.value.uidt,
temp_id: formState.value.temp_id,
userHasChangedTitle: !!formState.value?.userHasChangedTitle,
}),
...(isEdit.value && {
// take the existing formState.value when editing a column
// LTAR is not available in this case
...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)
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
}
if (columnToValidate.includes(formState.value.uidt)) {
formState.value.meta = {
validate: formState.value.meta && formState.value.meta.validate,
}
}
// keep length and scale for same datatype
if (column.value && formState.value.uidt === column.value?.uidt) {
formState.value.dtxp = column.value.dtxp
formState.value.dtxs = column.value.dtxs
} else {
// default length and scale for currency
if (formState.value?.uidt === UITypes.Currency) {
formState.value.dtxp = 19
formState.value.dtxs = 2
}
}
formState.value.altered = formState.value.altered || 2
}
const onDataTypeChange = () => {
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.dtx = 'specificType'
// use enum response as dtxp for select columns
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
}
// keep length and scale for same datatype
if (column.value && formState.value.uidt === column.value?.uidt) {
formState.value.dtxp = column.value.dtxp
formState.value.dtxs = column.value.dtxs
} else {
// default length and scale for currency
if (formState.value?.uidt === UITypes.Currency) {
formState.value.dtxp = 19
formState.value.dtxs = 2
}
}
// this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
formState.value.altered = formState.value.altered || 2
}
// todo: type of onAlter is wrong, the first argument is `CheckboxChangeEvent` not a number.
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: () => Promise<void>, columnPosition?: Pick<ColumnReqType, 'column_order'>) => {
try {
if (!(await validate())) return
} catch (e: any) {
const errorMsgs = e.errorFields
?.map((e: any) => e.errors?.join(', '))
.filter(Boolean)
.join(', ')
if (errorMsgs) {
message.error(errorMsgs)
} else {
message.error(t('msg.error.formValidationFailed'))
}
return
}
try {
formState.value.table_name = meta.value?.table_name
// formState.value.title = formState.value.column_name
if (column.value) {
// reset column validation if column is not to be validated
if (!columnToValidate.includes(formState.value.uidt)) {
formState.value.validate = ''
}
await $api.dbTableColumn.update(column.value?.id as string, formState.value)
await postSaveOrUpdateCbk?.({ update: true, colId: column.value?.id })
// Column updated
// message.success(t('msg.success.columnUpdated'))
} else {
// set default field title
if (!formState.value.title.trim()) {
const columnName = generateUniqueColumnName({
formState: formState.value,
tableExplorerColumns: tableExplorerColumns?.value,
metaColumns: meta.value?.columns || [],
})
formState.value.title = columnName
formState.value.column_name = columnName
}
// 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 tableMeta = await $api.dbTableColumn.create(meta.value?.id as string, {
...formState.value,
...columnPosition,
view_id: activeView.value!.id as string,
})
const savedColumn = tableMeta.columns?.find(
(c) => c.title === formState.value.title || c.column_name === formState.value.column_name,
)
await postSaveOrUpdateCbk?.({ update: false, colId: savedColumn?.id as string, column: savedColumn })
/** if LTAR column then force reload related table meta */
if (isLinksOrLTAR(formState.value) && meta.value?.id !== formState.value.childId) {
getMeta(formState.value.childId, true).then(() => {})
}
// Column created
// message.success(t('msg.success.columnCreated'))
$e('a:column:add', { datatype: formState.value.uidt })
}
await onSuccess?.()
return true
} catch (e: any) {
message.error(await extractSdkResponseErrorMsg(e))
}
}
function updateFieldName(updateFormState: boolean = true) {
if (
isEdit.value ||
!fromTableExplorer?.value ||
formState.value?.userHasChangedTitle ||
!isColumnValid?.value?.(formState.value)
) {
return
}
const defaultColumnName = generateUniqueColumnName({
formState: formState.value,
tableExplorerColumns: tableExplorerColumns?.value || [],
metaColumns: meta.value?.columns || [],
})
if (updateFormState) {
formState.value.title = defaultColumnName
formState.value.column_name = defaultColumnName
} else {
return defaultColumnName
}
}
/** set column name same as title which is actual name in db */
watch(
() => formState.value?.title,
(newTitle) => (formState.value.column_name = newTitle),
)
return {
formState,
generateNewColumnMeta,
addOrUpdate,
onAlter,
onDataTypeChange,
onUidtOrIdTypeChange,
setAdditionalValidations,
resetFields,
validate,
validateInfos,
isEdit,
column,
sqlUi,
isMssql,
isPg,
isMysql,
isXcdbBase,
disableSubmitBtn,
setPostSaveOrUpdateCbk,
updateFieldName,
}
},
)
export { useProvideColumnCreateStore }
export function useColumnCreateStoreOrThrow() {
const columnCreateStore = useColumnCreateStore()
if (columnCreateStore == null) throw new Error('Please call `useProvideColumnCreateStore` on the appropriate parent component')
return columnCreateStore
}