data form component date picker aware, form component refactor
This commit is contained in:
Martin McKeaveney
parent
b9f1d64975
commit
1b63042ca8
|
|
@ -21,7 +21,7 @@
|
|||
"publishdev": "lerna run publishdev",
|
||||
"publishnpm": "yarn build && lerna publish --force-publish",
|
||||
"clean": "lerna clean",
|
||||
"dev": "node ./scripts/symlinkDev.js && lerna run --parallel --stream dev:builder",
|
||||
"dev": "node ./scripts/symlinkDev.js && lerna run --parallel dev:builder",
|
||||
"test": "lerna run test",
|
||||
"lint": "eslint packages",
|
||||
"lint:fix": "eslint --fix packages",
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
"d3-selection": "^1.4.2",
|
||||
"fast-sort": "^2.2.0",
|
||||
"fusioncharts": "^3.15.1-sr.1",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"svelte-flatpickr": "^2.4.0",
|
||||
"svelte-fusioncharts": "^1.0.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,52 @@
|
|||
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
|
||||
}
|
||||
$: console.log(record)
|
||||
|
||||
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 = 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 +72,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 +85,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
|
||||
}
|
||||
if (response.status === 400) {
|
||||
errors = json.errors
|
||||
}
|
||||
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]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 +113,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:value={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 />
|
||||
|
|
@ -302,4 +256,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>
|
||||
|
|
|
|||
|
|
@ -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,52 @@
|
|||
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
|
||||
}
|
||||
$: console.log(record)
|
||||
|
||||
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 = 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 +72,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 +85,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
|
||||
}
|
||||
if (response.status === 400) {
|
||||
errors = json.errors
|
||||
}
|
||||
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]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 +113,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 +247,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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue