Update builder to support new block definitions with JSON schema
This commit is contained in:
Andrew Kingston
parent
4fed6c05d3
commit
7ef5d8a9b8
|
|
@ -2,19 +2,10 @@
|
|||
import { backendUiStore } from "builderStore"
|
||||
|
||||
export let value
|
||||
$: modelId = value ? value._id : ""
|
||||
|
||||
function onChange(e) {
|
||||
value = $backendUiStore.models.find(model => model._id === e.target.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="block-field">
|
||||
<select
|
||||
class="budibase__input"
|
||||
value={modelId}
|
||||
on:blur={onChange}
|
||||
on:change={onChange}>
|
||||
<select class="budibase__input" bind:value>
|
||||
<option value="">Choose an option</option>
|
||||
{#each $backendUiStore.models as model}
|
||||
<option value={model._id}>{model.name}</option>
|
||||
|
|
|
|||
|
|
@ -3,31 +3,24 @@
|
|||
import { Input, Label } from "@budibase/bbui"
|
||||
|
||||
export let value
|
||||
$: modelId = value && value.model ? value.model._id : ""
|
||||
$: schemaFields = Object.keys(value && value.model ? value.model.schema : {})
|
||||
|
||||
function onChangeModel(e) {
|
||||
value.model = $backendUiStore.models.find(
|
||||
model => model._id === e.target.value
|
||||
)
|
||||
}
|
||||
$: value = value || {}
|
||||
$: model = $backendUiStore.models.find(model => model._id === value?.modelId)
|
||||
$: schemaFields = Object.keys(model?.schema ?? {})
|
||||
|
||||
function setParsedValue(evt, field) {
|
||||
const fieldSchema = value.model.schema[field]
|
||||
if (fieldSchema.type === "number") {
|
||||
value[field] = parseInt(evt.target.value)
|
||||
return
|
||||
const fieldSchema = model?.schema[field]
|
||||
if (fieldSchema) {
|
||||
if (fieldSchema.type === "number") {
|
||||
value[field] = parseInt(evt.target.value)
|
||||
return
|
||||
}
|
||||
}
|
||||
value[field] = evt.target.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="block-field">
|
||||
<select
|
||||
class="budibase__input"
|
||||
value={modelId}
|
||||
on:blur={onChangeModel}
|
||||
on:change={onChangeModel}>
|
||||
<select class="budibase__input" bind:value={value.modelId}>
|
||||
<option value="">Choose an option</option>
|
||||
{#each $backendUiStore.models as model}
|
||||
<option value={model._id}>{model.name}</option>
|
||||
|
|
@ -37,9 +30,8 @@
|
|||
|
||||
{#if schemaFields.length}
|
||||
<div class="bb-margin-xl block-field">
|
||||
<Label small forAttr={'fields'}>Fields</Label>
|
||||
{#each schemaFields as field}
|
||||
<div class="bb-margin-xl">
|
||||
<div class="bb-margin-xl capitalise">
|
||||
<Input
|
||||
thin
|
||||
value={value[field]}
|
||||
|
|
@ -49,3 +41,9 @@
|
|||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.capitalise :global(label) {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,36 @@
|
|||
<script>
|
||||
import ModelSelector from "./ParamInputs/ModelSelector.svelte"
|
||||
import RecordSelector from "./ParamInputs/RecordSelector.svelte"
|
||||
import { Input, TextArea, Select } from "@budibase/bbui"
|
||||
import { Input, TextArea, Select, Label } from "@budibase/bbui"
|
||||
|
||||
export let block
|
||||
$: params = block.params ? Object.entries(block.params) : []
|
||||
$: inputs = Object.entries(block.schema?.inputs?.properties || {})
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="selected-label">{block.name}</div>
|
||||
{#each params as [parameter, type]}
|
||||
<div class="block-field">
|
||||
<label class="label">{parameter}</label>
|
||||
{#if Array.isArray(type)}
|
||||
<Select bind:value={block.args[parameter]} thin secondary>
|
||||
<div class="block-label">{block.name}</div>
|
||||
{#each inputs as [key, value]}
|
||||
<div class="bb-margin-xl block-field">
|
||||
<div class="field-label">{value.title}</div>
|
||||
{#if value.type === 'string' && value.enum}
|
||||
<Select bind:value={block.inputs[key]} thin secondary>
|
||||
<option value="">Choose an option</option>
|
||||
{#each type as option}
|
||||
{#each value.enum as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
{:else if type === 'accessLevel'}
|
||||
<Select bind:value={block.args[parameter]} thin secondary>
|
||||
<option value="ADMIN">Admin</option>
|
||||
<option value="POWER_USER">Power User</option>
|
||||
</Select>
|
||||
{:else if type === 'password'}
|
||||
<Input type="password" thin bind:value={block.args[parameter]} />
|
||||
{:else if type === 'number'}
|
||||
<Input type="number" thin bind:value={block.args[parameter]} />
|
||||
{:else if type === 'longText'}
|
||||
<TextArea type="text" thin bind:value={block.args[parameter]} />
|
||||
{:else if type === 'model'}
|
||||
<ModelSelector bind:value={block.args[parameter]} />
|
||||
{:else if type === 'record'}
|
||||
<RecordSelector bind:value={block.args[parameter]} />
|
||||
{:else if type === 'string'}
|
||||
<Input type="text" thin bind:value={block.args[parameter]} />
|
||||
{:else if value.customType === 'password'}
|
||||
<Input type="password" thin bind:value={block.inputs[key]} />
|
||||
{:else if value.type === 'number'}
|
||||
<Input type="number" thin bind:value={block.inputs[key]} />
|
||||
{:else if value.customType === 'longText'}
|
||||
<TextArea type="text" thin bind:value={block.inputs[key]} />
|
||||
{:else if value.customType === 'model'}
|
||||
<ModelSelector bind:value={block.inputs[key]} />
|
||||
{:else if value.customType === 'record'}
|
||||
<RecordSelector bind:value={block.inputs[key]} />
|
||||
{:else if value.type === 'string'}
|
||||
<Input type="text" thin bind:value={block.inputs[key]} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -46,17 +41,16 @@
|
|||
display: grid;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 500;
|
||||
.field-label {
|
||||
color: var(--ink);
|
||||
margin-bottom: 12px;
|
||||
text-transform: capitalize;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.selected-label {
|
||||
.block-label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: var(--grey-7);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import mustache from "mustache"
|
||||
import { workflowStore } from "builderStore"
|
||||
import { workflowStore, backendUiStore } from "builderStore"
|
||||
|
||||
export let onSelect
|
||||
export let block
|
||||
|
|
@ -13,6 +13,22 @@
|
|||
function selectBlock() {
|
||||
onSelect(block)
|
||||
}
|
||||
|
||||
function enrichInputs(inputs) {
|
||||
let enrichedInputs = { ...inputs, enriched: {} }
|
||||
const modelId = inputs.modelId || inputs.record?.modelId
|
||||
if (modelId) {
|
||||
enrichedInputs.enriched.model = $backendUiStore.models.find(
|
||||
model => model._id === modelId
|
||||
)
|
||||
}
|
||||
return enrichedInputs
|
||||
}
|
||||
|
||||
$: inputs = enrichInputs(block.inputs)
|
||||
$: tagline = block.tagline
|
||||
.replaceAll("{{", "<b>{{")
|
||||
.replaceAll("}}", "}}</b>")
|
||||
</script>
|
||||
|
||||
<div class={`${block.type} hoverable`} class:selected on:click={selectBlock}>
|
||||
|
|
@ -30,7 +46,7 @@
|
|||
</header>
|
||||
<hr />
|
||||
<p>
|
||||
{@html mustache.render(block.tagline, block.args)}
|
||||
{@html mustache.render(tagline, { inputs })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue