多维表格
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.

166 lines
4.6 KiB

Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
7 months ago
import type { RuleObject } from 'ant-design-vue/es/form'
import isMobilePhone from 'validator/lib/isMobilePhone'
import { StringValidationType, UITypes } from 'nocodb-sdk'
import type { ColumnType, Validation } from 'nocodb-sdk'
import { getI18n } from '../plugins/a.i18n'
export const formEmailValidator = (val: Validation) => {
return {
validator: (_rule: RuleObject, value: any) => {
return new Promise((resolve, reject) => {
const { t } = getI18n().global
if (value && !validateEmail(value)) {
return reject(val.message || t('msg.error.invalidEmail'))
}
return resolve(true)
})
},
}
}
export const formPhoneNumberValidator = (val: Validation) => {
return {
validator: (_rule: RuleObject, value: any) => {
return new Promise((resolve, reject) => {
const { t } = getI18n().global
if (value && !isMobilePhone(value)) {
return reject(val.message || t('msg.invalidPhoneNumber'))
}
return resolve(true)
})
},
}
}
export const formUrlValidator = (val: Validation) => {
return {
validator: (_rule: RuleObject, value: any) => {
return new Promise((resolve, reject) => {
const { t } = getI18n().global
if (value && !isValidURL(value)) {
return reject(val.message || t('msg.error.invalidURL'))
}
return resolve(true)
})
},
}
}
export const formNumberInputValidator = (cal: ColumnType) => {
return {
validator: (_rule: RuleObject, value: any) => {
return new Promise((resolve, reject) => {
const { t } = getI18n().global
if (value && value !== '-' && !(cal.uidt === UITypes.Number ? /^-?\d+$/.test(value) : /^-?\d*\.?\d+$/.test(value))) {
return reject(t('msg.plsEnterANumber'))
}
return resolve(true)
})
},
}
}
export const requiredFieldValidatorFn = (value: unknown) => {
value = unref(value)
if (Array.isArray(value)) return !!value.length
if (value === undefined || value === null) {
return false
}
if (value === false) {
return true
}
if (typeof value === 'object') {
Nc feat/new date time cell UI (#8546) * feat(nc-gui): new date picker setup * feat(nc-gui): new date picker * fix(nc-gui): date cell form view validation issue * fix(nc-gui): disable date cell type support in mobile view * fix(nc-gui): small changes * feat(nc-gui): new cell year and month picker * fix(nc-gui): add updated date time picker setup * feat: update date time cell picker * fix(nc-gui): add now option in time picker * fix(nc-gui): small changes * fix(nc-gui): add support to update month, year from date picker * fix(nc-gui): update date picker select mont/year flow * fix(test): date selector test case * fix(nc-gui): update dateTime cell time picker * fix(test): update time picker test case * chore(nc-gui): lint * fix(nc-gui): invalid date issue * fix(nc-gui): date time picker tab issue * fix(nc-gui): year cell test fail issue * fix(nc-gui): date picker filter test fail issue * fix(test): survey form test fail issue * fix(test): update year field fill handler test case * fix(test): update bulk update test * fix(nc-gui): datetime multiple api call issue * fix(test): update timezone related test * fix(test): timezone related test update * fix(nc-gui): tab focus issue * fix(test): filter datetime test udpate * fix(test): ai review changes * fix(nc-gui): date picker font weight issue * fix(nc-gui): update year picker font weight * fix(nc-gui): show full date from date time cell instead of truncate * fix(nc-gui): date time picker ui changes * fix(nc-gui): date time cell width issue * fix(nc-gui): update datetime time option width according to time format * fix(nc-gui): disable datetime input if cell is readonly * fic(nc-gui): add new time picker * feat(nc-gui): update time picker * chore(nc-gui): cleanup unwanted code * fix(test): update time cell test cases * fix(nc-gui): multiple api calls * fix(test): update time cell filter & bulk update test cases * fix(test): revert unrelated changes * fix(nc-gui): pr review changes * fix(nc-gui): add clear datetime cell icon in non grid view
6 months ago
if (Object.keys(value).length > 0) {
return true
}
return false
}
return !!String(value).length
}
export const isEmptyValidatorValue = (v: Validation) => {
if (v.type === StringValidationType.Regex) {
return v.type && typeof v.regex === 'string' ? !v.regex.trim() : v.regex === null
} else if (v.type && v.value !== undefined) {
return v.type && typeof v.value === 'string' ? !v.value.trim() : v.value === null
}
return false
}
Nc feat/form validation (#8409) * feat(nc-gui): custom validation setup * fix(nc-gui): custom validation table rounded issue * fix: add custom field validation type * fix(nc-gui): updated custom validator * feat(nc-gui): custom validation working state * fix(nc-gui): udpate default warning msg * chore(nc-gui): lint * fix(nc-gui): grayed out errors if input is focused * fix(nc-gui): input ring issue * fix(nc-gui): increase max height of validator select dropdown * fix(nc-gui): validator select dropdown item text color * fix(nc-gui): regex validation condition update * fix(nc-gui): add missing string validation types * fix(nc-gui): remove unwanted code * fix(nc-gui): move custom validation to ee * refacor(nc-gui): form view code * refactor(nc-gui): separate out formviewstore for ce & ee * fix(nc-gui): move all validations to another file * feat(nc-gui): add validation input component * feat(nc-gui): add time, month types * fix(nc-gui): add form field limit validations * fix(nc-gui): add limit link record validation * fix(nc-gui): add phonenumber & url validation type * feat(nc-gui): add email, url & phone number validators * fix(nc-gui): non working phone, email, url validation * chore(nc-giu): lint * feat(nc-gui): add attchment type validation * chore(nc-gui): lint * fix(nc-gui): add form field validation in shared form * fix(nc-gui): add form field validation in shared form oss * fix(nc-gui): oss validation conflict * fix(nc-gui): enter number validation function * fix(nc-gui): add config validators * fix(nc-gui): validation config error handling * fix(nc-gui): placeholder issue * fix(nc-gui): custom validation config error handling * fix(nc-gui): allow negative value validation * fix(nc-gui): add tooltip for required field switch * fix(nc-gui): refactor field validation from builder side * chore(nc-gui): lint * fix(nc-gui): update number validation logic * fix(nc-gui): rating field alignment issue * fix(nc-gui): small changes * fix(nc-gui): required field validation issue * fix(nc-gui): allow click on title to enable field config * feat(nc-gui): business email validation support * fix(nc-gui): add remove image btn in cell itself * fix(nc-gui): small changes * fix(nc-gui): survey form required field validation issue * fix(nc-gui): error field border issue * fix(nc-gui): currency validation input cell prefix issue * fix(nc-gui): remove console * chore(nc-gui): lint * fix: information text * fix(nc-gui): remove contains & doesn't contain option from phone number custom validation * fix(nc-gui): attachment merge conflict * fix(nc-gui): attachment cell expand btn size * fix(nc-gui): PR review changes * fix(nc-gui): lint * fix(nc-gui): updated form config heading text color * fix(nc-gui): small changes --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
7 months ago
export const extractFieldValidator = (_validators: Validation[], element: ColumnType) => {
const rules: RuleObject[] = []
// Add column default validators
if ([UITypes.Number, UITypes.Currency, UITypes.Percent].includes(element.uidt)) {
rules.push(formNumberInputValidator(element))
}
switch (element.uidt) {
case UITypes.Email: {
if (parseProp(element.meta).validate) {
rules.push(
formEmailValidator({
type: StringValidationType.Email,
}),
)
}
break
}
case UITypes.PhoneNumber: {
if (parseProp(element.meta).validate) {
rules.push(
formPhoneNumberValidator({
type: StringValidationType.PhoneNumber,
}),
)
}
break
}
case UITypes.URL: {
if (parseProp(element.meta).validate) {
rules.push(
formUrlValidator({
type: StringValidationType.Url,
}),
)
}
break
}
}
return rules
}
/**
* @description:
* This function sanitizes field names to ensure they are valid for form validation and avoid issues with nested object notation.
* - Replaces dots ('.') with underscores ('_') because dot notation is used to access object properties in many form validation libraries (e.g., useForm),
* and having dots can cause the field to be treated as a nested object rather than a simple property.
* - Replaces square brackets ('[]') with underscores ('_') to avoid the field being interpreted as an array or nested structure.
*
* This ensures the field names are flat, unique, and compatible with form validation libraries.
* If the sanitized name already exists, a counter is appended to make it unique.
*/
export const getValidFieldName = (title: string, uniqueFieldNames: Set<string>) => {
title = title.replace(/\./g, '_').replace(/\[|\]/g, '_')
let counter = 1
let newTitle = title
while (uniqueFieldNames.has(newTitle)) {
newTitle = `${title}_${counter}`
counter++
}
uniqueFieldNames.add(newTitle)
return newTitle
Nc Refactor: Gallery view (#8674) * fix(nc-gui): introduce header icon in gallery view card and update style * fix(nc-gui): field modal width issue if it is rich text * fix(nc-gui): hide longtext expanded icon on gallery & kanban view card hove * fix(nc-gui): date field alignment issue * fix(nc-gui): udpate kanban view card * fix(nc-gui): udpate gallery & kanban view card display value style * fix(nocodb): hide cover image in new gallery, kanban view if it is not pv column * feat(nc-gui): change cover image object fit property change support * fix(nc-gui): virtual cell card value alignment issue * fix(nc-gui): gallery view card image navigation issue * fix(nc-gui): gallerym, kanban card cover image dots navigation overflow issue * fix(nocodb): use optional chaining to access nested variable * chore(nc-gui): lint * fix(nc-gui): long text max line shuld be 4 in card * test: update open expanded form in gallery test * fix(nc-gui): add empty card in gallery view if cards length is less than 4 * fix(nc-gui): update gallery view card min width * fix(nocodb): small changes * fix(nc-gui): review changes * fix(nc-gui): add input shadow effect * fix(nc-gui): update card image navigation buttons icon * fix(nc-gui): udpate gallery view bg color * fix(nc-gui): update email, url, phone cell height from card * fix(nc-gui): update isEmptyRow function logic * fix(nc-gui): some review changes * fix(nc-gui): card display value color * fix(nc-gui): udpate gallery view card min width * fix(nc-gui): update card shadow & border on hover * fix(nc-gui): update gallery loader card width * fix(nc-gui): add min height for card image * chore(nc-gui): lint * fix(nc-gui): card rich text height * fix(nc-gui): align record count in right side in gallery view * fix(nc-gui): review changes * fix(nc-gui): shared view show & hide field issue * chore(nc-gui): lint * fix(nc-gui): link record test fail issue
6 months ago
}