|
|
|
@ -1,7 +1,8 @@ |
|
|
|
<script> |
|
|
|
import { onMount } from "svelte" |
|
|
|
import { fade } from "svelte/transition" |
|
|
|
import { Label } from "@budibase/bbui" |
|
|
|
import { Label, DatePicker } from "@budibase/bbui" |
|
|
|
import debounce from "lodash.debounce" |
|
|
|
|
|
|
|
export let _bb |
|
|
|
export let model |
|
|
|
@ -14,60 +15,50 @@ |
|
|
|
number: "number", |
|
|
|
} |
|
|
|
|
|
|
|
const DEFAULTS_FOR_TYPE = { |
|
|
|
string: "", |
|
|
|
boolean: false, |
|
|
|
number: null, |
|
|
|
link: [], |
|
|
|
} |
|
|
|
|
|
|
|
let record |
|
|
|
let store = _bb.store |
|
|
|
let schema = {} |
|
|
|
let modelDef = {} |
|
|
|
let saved = false |
|
|
|
let saving = false |
|
|
|
let recordId |
|
|
|
let isNew = true |
|
|
|
|
|
|
|
let inputElements = {} |
|
|
|
let errors = {} |
|
|
|
|
|
|
|
$: if (model && model.length !== 0) { |
|
|
|
fetchModel() |
|
|
|
} |
|
|
|
|
|
|
|
$: fields = Object.keys(schema) |
|
|
|
$: fields = schema ? Object.keys(schema) : [] |
|
|
|
|
|
|
|
$: Object.values(inputElements).length && setForm(record) |
|
|
|
$: errorMessages = Object.entries(errors).map( |
|
|
|
([field, message]) => `${field} ${message}` |
|
|
|
) |
|
|
|
|
|
|
|
const createBlankRecord = () => { |
|
|
|
if (!schema) return |
|
|
|
const newrecord = { |
|
|
|
modelId: model, |
|
|
|
} |
|
|
|
for (let fieldName in schema) { |
|
|
|
const field = schema[fieldName] |
|
|
|
// defaulting to first one, as a blank value will fail validation |
|
|
|
if ( |
|
|
|
field.type === "string" && |
|
|
|
field.constraints && |
|
|
|
field.constraints.inclusion && |
|
|
|
field.constraints.inclusion.length > 0 |
|
|
|
) { |
|
|
|
newrecord[fieldName] = field.constraints.inclusion[0] |
|
|
|
} else if (field.type === "number") newrecord[fieldName] = null |
|
|
|
else if (field.type === "boolean") newrecord[fieldName] = false |
|
|
|
else if (field.type === "link") newrecord[fieldName] = [] |
|
|
|
else newrecord[fieldName] = "" |
|
|
|
} |
|
|
|
return newrecord |
|
|
|
} |
|
|
|
|
|
|
|
async function fetchModel() { |
|
|
|
const FETCH_MODEL_URL = `/api/models/${model}` |
|
|
|
const response = await _bb.api.get(FETCH_MODEL_URL) |
|
|
|
modelDef = await response.json() |
|
|
|
schema = modelDef.schema |
|
|
|
record = createBlankRecord() |
|
|
|
record = { |
|
|
|
modelId: model, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
async function save() { |
|
|
|
// prevent double clicking firing multiple requests |
|
|
|
if (saving) return |
|
|
|
saving = true |
|
|
|
const save = debounce(async () => { |
|
|
|
for (let field of fields) { |
|
|
|
// Assign defaults to empty fields to prevent validation issues |
|
|
|
if (!(field in record)) |
|
|
|
record[field] = DEFAULTS_FOR_TYPE[schema[field].type] |
|
|
|
} |
|
|
|
|
|
|
|
const SAVE_RECORD_URL = `/api/${model}/records` |
|
|
|
const response = await _bb.api.post(SAVE_RECORD_URL, record) |
|
|
|
|
|
|
|
@ -79,13 +70,11 @@ |
|
|
|
return state |
|
|
|
}) |
|
|
|
|
|
|
|
errors = {} |
|
|
|
|
|
|
|
// wipe form, if new record, otherwise update |
|
|
|
// model to get new _rev |
|
|
|
if (isNew) { |
|
|
|
resetForm() |
|
|
|
} else { |
|
|
|
record = json |
|
|
|
} |
|
|
|
record = isNew ? { modelId: model } : json |
|
|
|
|
|
|
|
// set saved, and unset after 1 second |
|
|
|
// i.e. make the success notifier appear, then disappear again after time |
|
|
|
@ -94,69 +83,27 @@ |
|
|
|
saved = false |
|
|
|
}, 1000) |
|
|
|
} |
|
|
|
saving = false |
|
|
|
} |
|
|
|
|
|
|
|
// we cannot use svelte bind on these inputs, as it does not allow |
|
|
|
// bind, when the input type is dynamic |
|
|
|
const resetForm = () => { |
|
|
|
for (let el of Object.values(inputElements)) { |
|
|
|
el.value = "" |
|
|
|
if (el.checked) { |
|
|
|
el.checked = false |
|
|
|
} |
|
|
|
} |
|
|
|
record = createBlankRecord() |
|
|
|
} |
|
|
|
|
|
|
|
const setForm = rec => { |
|
|
|
if (isNew || !rec) return |
|
|
|
for (let fieldName in inputElements) { |
|
|
|
if (typeof rec[fieldName] === "boolean") { |
|
|
|
inputElements[fieldName].checked = rec[fieldName] |
|
|
|
} else { |
|
|
|
inputElements[fieldName].value = rec[fieldName] |
|
|
|
} |
|
|
|
if (response.status === 400) { |
|
|
|
errors = json.errors |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handleInput = field => event => { |
|
|
|
let value |
|
|
|
|
|
|
|
if (event.target.type === "checkbox") { |
|
|
|
value = event.target.checked |
|
|
|
record[field] = value |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
if (event.target.type === "number") { |
|
|
|
value = parseInt(event.target.value) |
|
|
|
record[field] = value |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
value = event.target.value |
|
|
|
record[field] = value |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
onMount(() => { |
|
|
|
onMount(async () => { |
|
|
|
const routeParams = _bb.routeParams() |
|
|
|
recordId = |
|
|
|
Object.keys(routeParams).length > 0 && (routeParams.id || routeParams[0]) |
|
|
|
isNew = !recordId || recordId === "new" |
|
|
|
|
|
|
|
if (isNew) { |
|
|
|
record = createBlankRecord() |
|
|
|
} else { |
|
|
|
const GET_RECORD_URL = `/api/${model}/records/${recordId}` |
|
|
|
_bb.api |
|
|
|
.get(GET_RECORD_URL) |
|
|
|
.then(response => response.json()) |
|
|
|
.then(rec => { |
|
|
|
record = rec |
|
|
|
setForm(rec) |
|
|
|
}) |
|
|
|
record = { modelId: model } |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
const GET_RECORD_URL = `/api/${model}/records/${recordId}` |
|
|
|
const response = await _bb.api.get(GET_RECORD_URL) |
|
|
|
const json = await response.json() |
|
|
|
record = json |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -164,23 +111,28 @@ |
|
|
|
{#if title} |
|
|
|
<h1>{title}</h1> |
|
|
|
{/if} |
|
|
|
{#each errorMessages as error} |
|
|
|
<p class="error">{error}</p> |
|
|
|
{/each} |
|
|
|
<hr /> |
|
|
|
<div class="form-content"> |
|
|
|
{#each fields as field} |
|
|
|
<div class="form-item"> |
|
|
|
<Label small forAttr={'form-stacked-text'}>{field}</Label> |
|
|
|
{#if schema[field].type === 'string' && schema[field].constraints.inclusion} |
|
|
|
<select on:blur={handleInput(field)} bind:this={inputElements[field]}> |
|
|
|
<select bind:value={record[field]}> |
|
|
|
{#each schema[field].constraints.inclusion as opt} |
|
|
|
<option>{opt}</option> |
|
|
|
{/each} |
|
|
|
</select> |
|
|
|
{:else} |
|
|
|
<input |
|
|
|
bind:this={inputElements[field]} |
|
|
|
class="input" |
|
|
|
type={TYPE_MAP[schema[field].type]} |
|
|
|
on:change={handleInput(field)} /> |
|
|
|
{:else if schema[field].type === 'datetime'} |
|
|
|
<DatePicker bind:value={record[field]} /> |
|
|
|
{:else if schema[field].type === 'boolean'} |
|
|
|
<input class="input" type="checkbox" bind:checked={record[field]} /> |
|
|
|
{:else if schema[field].type === 'number'} |
|
|
|
<input class="input" type="number" bind:value={record[field]} /> |
|
|
|
{:else if schema[field].type === 'string'} |
|
|
|
<input class="input" type="text" bind:value={record[field]} /> |
|
|
|
{/if} |
|
|
|
</div> |
|
|
|
<hr /> |
|
|
|
@ -293,4 +245,9 @@ |
|
|
|
background-position: right 17px top 1.5em, right 10px top 1.5em; |
|
|
|
background-size: 7px 7px, 7px 7px; |
|
|
|
} |
|
|
|
|
|
|
|
.error { |
|
|
|
color: red; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
Michael Shanks
6 years ago