2020-05-06 21:33:30 +12:00
|
|
|
<script>
|
2020-05-07 21:53:34 +12:00
|
|
|
import { onMount } from "svelte"
|
2020-05-06 21:33:30 +12:00
|
|
|
|
|
|
|
export let _bb
|
|
|
|
export let _instanceId
|
2020-05-08 09:15:09 +12:00
|
|
|
export let model
|
2020-05-06 21:33:30 +12:00
|
|
|
|
|
|
|
let username
|
|
|
|
let password
|
2020-05-08 09:15:09 +12:00
|
|
|
let newModel = {
|
2020-06-04 03:10:03 +12:00
|
|
|
modelId: model,
|
2020-05-08 09:15:09 +12:00
|
|
|
}
|
|
|
|
let store = _bb.store
|
2020-06-04 03:10:03 +12:00
|
|
|
let schema = {}
|
|
|
|
let modelDef = {}
|
2020-05-08 09:15:09 +12:00
|
|
|
|
2020-06-04 03:10:03 +12:00
|
|
|
$: if (model && model.length !== 0) {
|
|
|
|
fetchModel()
|
|
|
|
}
|
|
|
|
|
|
|
|
$: fields = Object.keys(schema)
|
|
|
|
|
|
|
|
async function fetchModel() {
|
|
|
|
const FETCH_MODEL_URL = `/api/${_instanceId}/models/${model}`
|
|
|
|
const response = await _bb.api.get(FETCH_MODEL_URL)
|
|
|
|
modelDef = await response.json()
|
|
|
|
schema = modelDef.schema
|
|
|
|
}
|
2020-05-08 09:15:09 +12:00
|
|
|
|
|
|
|
async function save() {
|
2020-06-04 03:10:03 +12:00
|
|
|
const SAVE_RECORD_URL = `/api/${_instanceId}/${model}/records`
|
2020-05-18 22:01:09 +12:00
|
|
|
const response = await _bb.api.post(SAVE_RECORD_URL, newModel)
|
|
|
|
const json = await response.json()
|
2020-05-08 09:15:09 +12:00
|
|
|
|
|
|
|
store.update(state => {
|
2020-06-04 03:10:03 +12:00
|
|
|
state[model._id] = [...state[model], json]
|
2020-05-08 09:15:09 +12:00
|
|
|
return state
|
2020-05-18 22:01:09 +12:00
|
|
|
})
|
2020-05-08 09:15:09 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
const handleInput = field => event => {
|
|
|
|
let value
|
|
|
|
|
|
|
|
if (event.target.type === "checkbox") {
|
|
|
|
value = event.target.checked
|
|
|
|
newModel[field] = value
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
if (event.target.type === "number") {
|
|
|
|
value = parseInt(event.target.value)
|
|
|
|
newModel[field] = value
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
value = event.target.value
|
|
|
|
newModel[field] = value
|
|
|
|
}
|
2020-05-06 21:33:30 +12:00
|
|
|
</script>
|
|
|
|
|
2020-05-08 09:15:09 +12:00
|
|
|
<form class="uk-form" on:submit|preventDefault>
|
2020-06-04 03:10:03 +12:00
|
|
|
<h4>{modelDef.name}</h4>
|
2020-05-06 21:33:30 +12:00
|
|
|
<div>
|
2020-05-08 09:15:09 +12:00
|
|
|
{#each fields as field}
|
|
|
|
<div class="uk-margin">
|
|
|
|
<label class="form-label" for="form-stacked-text">{field}</label>
|
2020-05-18 22:01:09 +12:00
|
|
|
<input
|
|
|
|
class="uk-input"
|
2020-06-04 03:10:03 +12:00
|
|
|
type={schema[field].type === 'string' ? 'text' : schema[field].type}
|
2020-05-18 22:01:09 +12:00
|
|
|
on:change={handleInput(field)} />
|
2020-05-08 09:15:09 +12:00
|
|
|
</div>
|
|
|
|
{/each}
|
2020-05-06 21:33:30 +12:00
|
|
|
</div>
|
2020-05-18 22:01:09 +12:00
|
|
|
<button on:click={save}>SAVE</button>
|
2020-05-06 21:33:30 +12:00
|
|
|
</form>
|
|
|
|
|
|
|
|
<style>
|
2020-05-08 09:15:09 +12:00
|
|
|
.form-label {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
2020-05-06 21:33:30 +12:00
|
|
|
</style>
|