mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
2 changed files with 200 additions and 172 deletions
@ -0,0 +1,185 @@ |
|||
<script> |
|||
import { setContext, getContext, onMount } from "svelte" |
|||
import { writable, get } from "svelte/store" |
|||
import { createValidatorFromConstraints } from "./validation" |
|||
import { generateID } from "../helpers" |
|||
|
|||
export let dataSource |
|||
export let theme |
|||
export let size |
|||
export let disabled = false |
|||
export let actionType = "Create" |
|||
export let initialValues |
|||
|
|||
const component = getContext("component") |
|||
const context = getContext("context") |
|||
const { styleable, API, Provider, ActionTypes } = getContext("sdk") |
|||
|
|||
let loaded = false |
|||
let schema |
|||
let table |
|||
let fieldMap = {} |
|||
|
|||
// Form state contains observable data about the form |
|||
const formState = writable({ values: initialValues, errors: {}, valid: true }) |
|||
|
|||
// Form API contains functions to control the form |
|||
const formApi = { |
|||
registerField: (field, defaultValue = null, fieldDisabled = false) => { |
|||
if (!field) { |
|||
return |
|||
} |
|||
|
|||
// Auto columns are always disabled |
|||
const isAutoColumn = !!schema?.[field]?.autocolumn |
|||
|
|||
// Create validation function based on field schema |
|||
const constraints = schema?.[field]?.constraints |
|||
const validate = createValidatorFromConstraints(constraints, field, table) |
|||
|
|||
// Construct field object |
|||
fieldMap[field] = { |
|||
fieldState: makeFieldState( |
|||
field, |
|||
defaultValue, |
|||
disabled || fieldDisabled || isAutoColumn |
|||
), |
|||
fieldApi: makeFieldApi(field, defaultValue, validate), |
|||
fieldSchema: schema?.[field] ?? {}, |
|||
} |
|||
|
|||
// Set initial value |
|||
const initialValue = get(fieldMap[field].fieldState).value |
|||
formState.update(state => ({ |
|||
...state, |
|||
values: { |
|||
...state.values, |
|||
[field]: initialValue, |
|||
}, |
|||
})) |
|||
|
|||
return fieldMap[field] |
|||
}, |
|||
validate: () => { |
|||
const fields = Object.keys(fieldMap) |
|||
fields.forEach(field => { |
|||
const { fieldApi } = fieldMap[field] |
|||
fieldApi.validate() |
|||
}) |
|||
return get(formState).valid |
|||
}, |
|||
} |
|||
|
|||
// Provide both form API and state to children |
|||
setContext("form", { formApi, formState, dataSource }) |
|||
|
|||
// Action context to pass to children |
|||
const actions = [ |
|||
{ type: ActionTypes.ValidateForm, callback: formApi.validate }, |
|||
] |
|||
|
|||
// Creates an API for a specific field |
|||
const makeFieldApi = (field, defaultValue, validate) => { |
|||
const setValue = (value, skipCheck = false) => { |
|||
const { fieldState } = fieldMap[field] |
|||
|
|||
// Skip if the value is the same |
|||
if (!skipCheck && get(fieldState).value === value) { |
|||
return |
|||
} |
|||
|
|||
const newValue = value == null ? defaultValue : value |
|||
const newError = validate ? validate(newValue) : null |
|||
|
|||
// Update field state |
|||
fieldState.update(state => { |
|||
state.value = newValue |
|||
state.error = newError |
|||
return state |
|||
}) |
|||
|
|||
// Update form state |
|||
formState.update(state => { |
|||
state.values = { ...state.values, [field]: newValue } |
|||
if (newError) { |
|||
state.errors = { ...state.errors, [field]: newError } |
|||
} else { |
|||
delete state.errors[field] |
|||
} |
|||
state.valid = Object.keys(state.errors).length === 0 |
|||
return state |
|||
}) |
|||
|
|||
return !newError |
|||
} |
|||
return { |
|||
setValue, |
|||
validate: () => { |
|||
const { fieldState } = fieldMap[field] |
|||
setValue(get(fieldState).value, true) |
|||
}, |
|||
} |
|||
} |
|||
|
|||
// Creates observable state data about a specific field |
|||
const makeFieldState = (field, defaultValue, fieldDisabled) => { |
|||
return writable({ |
|||
field, |
|||
fieldId: `id-${generateID()}`, |
|||
value: initialValues[field] ?? defaultValue, |
|||
error: null, |
|||
disabled: fieldDisabled, |
|||
}) |
|||
} |
|||
|
|||
// Fetches the form schema from this form's dataSource, if one exists |
|||
const fetchSchema = async () => { |
|||
if (!dataSource?.tableId) { |
|||
schema = {} |
|||
table = null |
|||
} else { |
|||
table = await API.fetchTableDefinition(dataSource?.tableId) |
|||
if (table) { |
|||
if (dataSource?.type === "query") { |
|||
schema = {} |
|||
const params = table.parameters || [] |
|||
params.forEach(param => { |
|||
schema[param.name] = { ...param, type: "string" } |
|||
}) |
|||
} else { |
|||
schema = table.schema || {} |
|||
} |
|||
} |
|||
} |
|||
loaded = true |
|||
} |
|||
|
|||
// Load the form schema on mount |
|||
onMount(fetchSchema) |
|||
</script> |
|||
|
|||
<Provider |
|||
{actions} |
|||
data={{ ...$formState.values, tableId: dataSource?.tableId }} |
|||
> |
|||
<div |
|||
lang="en" |
|||
dir="ltr" |
|||
use:styleable={$component.styles} |
|||
class={`spectrum ${size || "spectrum--medium"} ${ |
|||
theme || "spectrum--light" |
|||
}`} |
|||
> |
|||
{#if loaded} |
|||
<slot /> |
|||
{/if} |
|||
</div> |
|||
</Provider> |
|||
|
|||
<style> |
|||
div { |
|||
padding: 20px; |
|||
position: relative; |
|||
background-color: var(--spectrum-alias-background-color-secondary); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue