2021-01-14 03:11:53 +13:00
|
|
|
<script>
|
2021-04-29 01:36:45 +12:00
|
|
|
import { Label, Layout, Input } from "@budibase/bbui"
|
2021-01-16 02:11:51 +13:00
|
|
|
import Editor from "./QueryEditor.svelte"
|
2021-02-16 07:41:56 +13:00
|
|
|
import KeyValueBuilder from "./KeyValueBuilder.svelte"
|
2021-12-02 02:11:35 +13:00
|
|
|
import { capitalise } from "helpers"
|
2021-01-14 03:11:53 +13:00
|
|
|
|
|
|
|
export let fields = {}
|
|
|
|
export let schema
|
2021-01-15 03:22:24 +13:00
|
|
|
export let editable
|
2021-01-14 03:11:53 +13:00
|
|
|
|
2021-12-02 02:11:35 +13:00
|
|
|
$: schemaKeys = Object.keys(schema?.fields || {})
|
2021-01-15 09:51:03 +13:00
|
|
|
|
2021-01-16 02:11:51 +13:00
|
|
|
function updateCustomFields({ detail }) {
|
|
|
|
fields.customData = detail.value
|
2021-01-15 09:51:03 +13:00
|
|
|
}
|
2021-12-02 02:11:35 +13:00
|
|
|
|
|
|
|
function getDisplayName(field) {
|
|
|
|
let name
|
|
|
|
if (schema.fields[field]?.display) {
|
|
|
|
name = schema.fields[field]?.display
|
|
|
|
} else {
|
|
|
|
name = field
|
|
|
|
}
|
|
|
|
return capitalise(name)
|
|
|
|
}
|
2021-01-14 03:11:53 +13:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<form on:submit|preventDefault>
|
2021-04-29 01:36:45 +12:00
|
|
|
<Layout noPadding gap="S">
|
2021-01-28 06:29:30 +13:00
|
|
|
{#each schemaKeys as field}
|
2021-04-29 01:36:45 +12:00
|
|
|
{#if schema.fields[field]?.type === "object"}
|
2021-12-02 02:11:35 +13:00
|
|
|
<Label small>{getDisplayName(field)}</Label>
|
2021-12-02 02:31:40 +13:00
|
|
|
<KeyValueBuilder
|
|
|
|
name={getDisplayName(field)}
|
|
|
|
readOnly={!editable}
|
|
|
|
bind:object={fields[field]}
|
|
|
|
/>
|
2021-04-29 01:36:45 +12:00
|
|
|
{:else if schema.fields[field]?.type === "json"}
|
2021-02-16 07:59:21 +13:00
|
|
|
<div>
|
2021-12-02 02:11:35 +13:00
|
|
|
<Label extraSmall grey>{getDisplayName(field)}</Label>
|
2021-02-16 07:59:21 +13:00
|
|
|
<Editor
|
|
|
|
mode="json"
|
2021-02-19 05:58:10 +13:00
|
|
|
on:change={({ detail }) => (fields[field] = detail.value)}
|
2021-02-16 07:59:21 +13:00
|
|
|
readOnly={!editable}
|
2021-04-29 01:36:45 +12:00
|
|
|
value={fields[field]}
|
|
|
|
/>
|
2021-02-16 07:59:21 +13:00
|
|
|
</div>
|
2021-02-16 06:05:53 +13:00
|
|
|
{:else}
|
2021-02-19 05:58:10 +13:00
|
|
|
<div class="horizontal">
|
2021-12-02 02:11:35 +13:00
|
|
|
<Label small>{getDisplayName(field)}</Label>
|
2021-02-19 05:58:10 +13:00
|
|
|
<Input
|
2021-12-02 02:11:35 +13:00
|
|
|
placeholder="Enter {getDisplayName(field)}"
|
2021-02-19 05:58:10 +13:00
|
|
|
outline
|
|
|
|
disabled={!editable}
|
|
|
|
type={schema.fields[field]?.type}
|
|
|
|
required={schema.fields[field]?.required}
|
2021-04-29 01:36:45 +12:00
|
|
|
bind:value={fields[field]}
|
|
|
|
/>
|
2021-02-19 05:58:10 +13:00
|
|
|
</div>
|
2021-02-16 06:05:53 +13:00
|
|
|
{/if}
|
2021-01-28 06:29:30 +13:00
|
|
|
{/each}
|
2021-04-29 01:36:45 +12:00
|
|
|
</Layout>
|
2021-01-14 03:11:53 +13:00
|
|
|
</form>
|
2021-01-16 02:11:51 +13:00
|
|
|
{#if schema.customisable}
|
|
|
|
<Editor
|
|
|
|
label="Query"
|
|
|
|
mode="json"
|
|
|
|
on:change={updateCustomFields}
|
|
|
|
readOnly={!editable}
|
2021-04-29 01:36:45 +12:00
|
|
|
value={fields.customData}
|
|
|
|
/>
|
2021-01-15 09:51:03 +13:00
|
|
|
{/if}
|
|
|
|
|
2021-01-14 03:11:53 +13:00
|
|
|
<style>
|
2021-02-19 05:58:10 +13:00
|
|
|
.horizontal {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 20% 1fr;
|
|
|
|
grid-gap: var(--spacing-l);
|
|
|
|
align-items: center;
|
|
|
|
}
|
2021-01-16 02:42:55 +13:00
|
|
|
</style>
|