2020-06-02 09:55:44 +12:00
|
|
|
<script>
|
|
|
|
import { backendUiStore } from "builderStore"
|
2021-01-14 22:45:09 +13:00
|
|
|
import { Select } from "@budibase/bbui"
|
2021-01-21 02:20:08 +13:00
|
|
|
import BindableInput from "../../common/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-10-28 04:28:13 +13:00
|
|
|
$: table = $backendUiStore.tables.find(table => table._id === value?.tableId)
|
2020-10-10 06:49:23 +13:00
|
|
|
$: schemaFields = Object.entries(table?.schema ?? {})
|
2020-09-03 23:02:15 +12:00
|
|
|
|
2020-10-10 06:49:23 +13:00
|
|
|
// Ensure any nullish tableId values get set to empty string so
|
2020-09-18 00:44:18 +12:00
|
|
|
// that the select works
|
2020-10-10 06:49:23 +13:00
|
|
|
$: if (value?.tableId == null) value = { tableId: "" }
|
2020-09-22 03:45:55 +12:00
|
|
|
|
|
|
|
function schemaHasOptions(schema) {
|
|
|
|
return !!schema.constraints?.inclusion?.length
|
|
|
|
}
|
2020-06-02 09:55:44 +12:00
|
|
|
</script>
|
|
|
|
|
2020-09-10 18:46:01 +12:00
|
|
|
<div class="block-field">
|
2020-10-27 01:18:34 +13:00
|
|
|
<Select bind:value={value.tableId} extraThin secondary>
|
2020-09-12 08:14:58 +12:00
|
|
|
<option value="">Choose an option</option>
|
2020-10-10 06:49:23 +13:00
|
|
|
{#each $backendUiStore.tables as table}
|
|
|
|
<option value={table._id}>{table.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-09-26 02:01:48 +12:00
|
|
|
<div class="schema-fields">
|
2020-09-17 01:38:18 +12:00
|
|
|
{#each schemaFields as [field, schema]}
|
2020-09-30 21:28:18 +13:00
|
|
|
{#if schemaHasOptions(schema)}
|
2020-10-27 01:18:34 +13:00
|
|
|
<Select label={field} extraThin secondary bind:value={value[field]}>
|
2020-09-30 21:28:18 +13:00
|
|
|
<option value="">Choose an option</option>
|
|
|
|
{#each schema.constraints.inclusion as option}
|
|
|
|
<option value={option}>{option}</option>
|
|
|
|
{/each}
|
|
|
|
</Select>
|
|
|
|
{:else if schema.type === 'string' || schema.type === 'number'}
|
|
|
|
<BindableInput
|
2020-10-27 01:18:34 +13:00
|
|
|
extraThin
|
2020-09-30 21:28:18 +13:00
|
|
|
bind:value={value[field]}
|
|
|
|
label={field}
|
|
|
|
type="string"
|
|
|
|
{bindings} />
|
|
|
|
{/if}
|
2020-06-02 09:55:44 +12:00
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2020-09-17 00:55:28 +12:00
|
|
|
|
|
|
|
<style>
|
2020-09-26 02:01:48 +12:00
|
|
|
.schema-fields {
|
|
|
|
display: grid;
|
|
|
|
grid-gap: var(--spacing-xl);
|
|
|
|
margin-top: var(--spacing-xl);
|
|
|
|
}
|
2020-09-30 21:28:18 +13:00
|
|
|
.schema-fields :global(label) {
|
|
|
|
text-transform: capitalize;
|
|
|
|
}
|
2020-09-17 00:55:28 +12:00
|
|
|
</style>
|