CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-02 02:25:17 +12:00
Code Issues Projects Releases Wiki Activity

6538 - add validation to datasource config modal

Browse source
This commit is contained in:
Maurits Lourens 2022-07-07 23:06:57 +02:00 committed by Mel O'Hagan
parent c737168718
commit c1ac00840c
3 changed files with 50 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View file

@ -10,10 +10,14 @@
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import { capitalise } from "helpers"
import { IntegrationTypes } from "constants/backend"
import { createValidationStore } from "helpers/validation/yup"
import { createEventDispatcher } from "svelte"
export let datasource
export let schema
export let creating
const validation = createValidationStore()
const dispatch = createEventDispatcher()
function filter([key, value]) {
if (!value) {
@ -31,6 +35,17 @@
.filter(el => filter(el))
.map(([key]) => key)
// setup the validation for each required field
$: configKeys.forEach(key => {
if (schema[key].required) {
validation.addValidatorType(key, schema[key].type, schema[key].required)
}
})
// run the validation whenever the config changes
$: validation.check(config)
// dispatch the validation result
$: dispatch("valid", $validation.valid)
let addButton
function getDisplayName(key) {
@ -79,6 +94,9 @@
type={schema[configKey].type}
on:change
bind:value={config[configKey]}
on:blur={($validation.touched[configKey] = true)}
error={$validation.touched[configKey] &&
$validation.errors[configKey]}
/>
</div>
{:else}
@ -88,6 +106,9 @@
type={schema[configKey].type}
on:change
bind:value={config[configKey]}
on:blur={($validation.touched[configKey] = true)}
error={$validation.touched[configKey] &&
$validation.errors[configKey]}
/>
</div>
{/if}

3
packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
View file

@ -13,6 +13,7 @@
// kill the reference so the input isn't saved
let datasource = cloneDeep(integration)
let skipFetch = false
let isValid = false
$: name =
IntegrationNames[datasource.type] || datasource.name || datasource.type
@ -53,6 +54,7 @@
return true
}}
size="L"
disabled={!isValid}
>
<Layout noPadding>
<Body size="XS"
@ -63,5 +65,6 @@
schema={datasource.schema}
bind:datasource
creating={true}
on:valid={e => (isValid = e.detail)}
/>
</ModalContent>

27
packages/builder/src/helpers/validation/yup/index.js
View file

@ -1,5 +1,5 @@
import { capitalise } from "helpers"
import { object } from "yup"
import { object, string, number } from "yup"
import { writable, get } from "svelte/store"
import { notifications } from "@budibase/bbui"
@ -20,6 +20,30 @@ export const createValidationStore = () => {
validator[propertyName] = propertyValidator
}
const addValidatorType = (propertyName, type, required) => {
if (!type || !propertyName) {
return
}
let propertyValidator
switch (type) {
case "number":
propertyValidator = number()
break
case "email":
propertyValidator = string().email()
break
default:
propertyValidator = string()
}
if (required) {
propertyValidator = propertyValidator.required()
}
validator[propertyName] = propertyValidator
}
const check = async values => {
const obj = object().shape(validator)
// clear the previous errors
@ -62,5 +86,6 @@ export const createValidationStore = () => {
set: validation.set,
check,
addValidator,
addValidatorType,
}
}