Validation observe

This commit is contained in:
Adria Navarro 2023-06-13 12:42:30 +01:00
parent 32dde23728
commit 7cfb47c287
2 changed files with 60 additions and 11 deletions

View File

@ -13,18 +13,10 @@
let includeInternalTablesRows = true let includeInternalTablesRows = true
let encypt = true let encypt = true
let password let password = null
const validation = createValidationStore() const validation = createValidationStore()
validation.addValidatorType("password", "password", "true") validation.addValidatorType("password", "password", "true")
$: validation.observe("password", password)
function validate() {
return validation.check({ password })
}
$: {
if ($validation.errors.length) {
validate()
}
}
const Step = { CONFIG: "config", SET_PASSWORD: "set_password" } const Step = { CONFIG: "config", SET_PASSWORD: "set_password" }
let currentStep = Step.SET_PASSWORD let currentStep = Step.SET_PASSWORD
@ -42,17 +34,19 @@
return false return false
} }
}, },
isValid: true,
}, },
[Step.SET_PASSWORD]: { [Step.SET_PASSWORD]: {
title: "Add password to encrypt your export", title: "Add password to encrypt your export",
confirmText: exportButtonText, confirmText: exportButtonText,
onConfirm: async () => { onConfirm: async () => {
await validate() await validation.check({ password })
if (!$validation.valid) { if (!$validation.valid) {
return false return false
} }
exportApp() exportApp()
}, },
isValid: $validation.valid,
}, },
} }
@ -67,6 +61,7 @@
title={stepConfig[currentStep].title} title={stepConfig[currentStep].title}
confirmText={stepConfig[currentStep].confirmText} confirmText={stepConfig[currentStep].confirmText}
onConfirm={stepConfig[currentStep].onConfirm} onConfirm={stepConfig[currentStep].onConfirm}
disabled={!stepConfig[currentStep].isValid}
> >
{#if currentStep === Step.CONFIG} {#if currentStep === Step.CONFIG}
<Body> <Body>

View File

@ -5,6 +5,7 @@ import { notifications } from "@budibase/bbui"
export const createValidationStore = () => { export const createValidationStore = () => {
const DEFAULT = { const DEFAULT = {
values: {},
errors: {}, errors: {},
touched: {}, touched: {},
valid: false, valid: false,
@ -44,6 +45,58 @@ export const createValidationStore = () => {
validator[propertyName] = propertyValidator validator[propertyName] = propertyValidator
} }
const observe = async (propertyName, value) => {
const values = get(validation).values
let fieldIsValid
if (!values.hasOwnProperty(propertyName)) {
// Initial setup
values[propertyName] = value
return
}
if (value === values[propertyName]) {
return
}
const obj = object().shape(validator)
try {
validation.update(store => {
store.errors[propertyName] = null
return store
})
await obj.validateAt(propertyName, { [propertyName]: value })
fieldIsValid = true
} catch (error) {
const [fieldError] = error.errors
if (fieldError) {
validation.update(store => {
store.errors[propertyName] = capitalise(fieldError)
store.valid = false
return store
})
}
}
if (fieldIsValid) {
// Validate the rest of the fields
try {
await obj.validate(
{ ...values, [propertyName]: value },
{ abortEarly: false }
)
validation.update(store => {
store.valid = true
return store
})
} catch {
validation.update(store => {
store.valid = false
return store
})
}
}
}
const check = async values => { const check = async values => {
const obj = object().shape(validator) const obj = object().shape(validator)
// clear the previous errors // clear the previous errors
@ -87,5 +140,6 @@ export const createValidationStore = () => {
check, check,
addValidator, addValidator,
addValidatorType, addValidatorType,
observe,
} }
} }