2020-06-02 09:55:44 +12:00
|
|
|
<script>
|
|
|
|
import { backendUiStore } from "builderStore"
|
2020-09-17 01:38:18 +12:00
|
|
|
import { Input, Select, Label } from "@budibase/bbui"
|
2020-09-18 01:05:53 +12:00
|
|
|
import BindableInput from "../../../userInterface/BindableInput.svelte"
|
2020-06-02 09:55:44 +12:00
|
|
|
|
|
|
|
export let value
|
2020-09-18 01:05:53 +12:00
|
|
|
export let bindings
|
|
|
|
|
2020-09-17 00:55:28 +12:00
|
|
|
$: model = $backendUiStore.models.find(model => model._id === value?.modelId)
|
2020-09-17 01:38:18 +12:00
|
|
|
$: schemaFields = Object.entries(model?.schema ?? {})
|
2020-09-03 23:02:15 +12:00
|
|
|
|
2020-09-18 00:44:18 +12:00
|
|
|
// Ensure any nullish modelId values get set to empty string so
|
|
|
|
// that the select works
|
|
|
|
$: if (value?.modelId == null) value = { modelId: "" }
|
2020-06-02 09:55:44 +12:00
|
|
|
</script>
|
|
|
|
|
2020-09-10 18:46:01 +12:00
|
|
|
<div class="block-field">
|
2020-09-17 01:38:18 +12:00
|
|
|
<Select bind:value={value.modelId} thin secondary>
|
2020-09-12 08:14:58 +12:00
|
|
|
<option value="">Choose an option</option>
|
2020-08-31 01:49:25 +12:00
|
|
|
{#each $backendUiStore.models as model}
|
2020-09-12 08:14:58 +12:00
|
|
|
<option value={model._id}>{model.name}</option>
|
2020-08-31 01:49:25 +12:00
|
|
|
{/each}
|
2020-09-17 01:38:18 +12:00
|
|
|
</Select>
|
2020-06-02 09:55:44 +12:00
|
|
|
</div>
|
|
|
|
|
2020-09-14 22:51:52 +12:00
|
|
|
{#if schemaFields.length}
|
2020-08-23 08:34:46 +12:00
|
|
|
<div class="bb-margin-xl block-field">
|
2020-09-17 01:38:18 +12:00
|
|
|
{#each schemaFields as [field, schema]}
|
2020-09-17 00:55:28 +12:00
|
|
|
<div class="bb-margin-xl capitalise">
|
2020-09-17 01:38:18 +12:00
|
|
|
{#if schema.constraints?.inclusion?.length}
|
|
|
|
<div class="field-label">{field}</div>
|
|
|
|
<Select
|
|
|
|
thin
|
|
|
|
secondary
|
|
|
|
bind:value={value[field]}>
|
|
|
|
<option value="">Choose an option</option>
|
|
|
|
{#each schema.constraints.inclusion as option}
|
|
|
|
<option value={option}>{option}</option>
|
|
|
|
{/each}
|
|
|
|
</Select>
|
2020-09-19 07:31:18 +12:00
|
|
|
{:else if schema.type === "string" || schema.type === "number"}
|
2020-09-18 01:05:53 +12:00
|
|
|
<BindableInput
|
2020-09-17 01:38:18 +12:00
|
|
|
thin
|
2020-09-18 02:11:28 +12:00
|
|
|
bind:value={value[field]}
|
2020-09-17 01:38:18 +12:00
|
|
|
label={field}
|
2020-09-19 03:14:37 +12:00
|
|
|
type={schema.type}
|
2020-09-18 01:05:53 +12:00
|
|
|
{bindings} />
|
2020-09-17 01:38:18 +12:00
|
|
|
{/if}
|
2020-06-02 09:55:44 +12:00
|
|
|
</div>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2020-09-17 00:55:28 +12:00
|
|
|
|
|
|
|
<style>
|
2020-09-17 01:38:18 +12:00
|
|
|
.field-label {
|
|
|
|
color: var(--ink);
|
|
|
|
margin-bottom: 12px;
|
|
|
|
display: flex;
|
|
|
|
font-size: 14px;
|
|
|
|
font-weight: 500;
|
|
|
|
font-family: sans-serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
.capitalise :global(label), .field-label {
|
|
|
|
text-transform: capitalize;
|
2020-09-17 00:55:28 +12:00
|
|
|
}
|
|
|
|
</style>
|