MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update UI of JSON schema editor

This commit is contained in:
Andrew Kingston 2021-12-13 12:25:01 +00:00
parent ab1e5abd5e
commit f5dba692e5
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import Editor from "../../../integration/QueryEditor.svelte" import Editor from "components/integration/QueryEditor.svelte"
import { import {
ModalContent, ModalContent,
Tabs, Tabs,
@ -7,6 +7,8 @@
Button, Button,
Input, Input,
Select, Select,
Body,
Layout,
} from "@budibase/bbui" } from "@budibase/bbui"
import { onMount, createEventDispatcher } from "svelte" import { onMount, createEventDispatcher } from "svelte"
import { FIELDS } from "constants/backend" import { FIELDS } from "constants/backend"
@ -16,7 +18,7 @@
export let json export let json
let dispatcher = createEventDispatcher() let dispatcher = createEventDispatcher()
let mode = "Key/Value" let mode = "Form"
let fieldCount = 0 let fieldCount = 0
let fieldKeys = {}, let fieldKeys = {},
fieldTypes = {} fieldTypes = {}
@ -84,7 +86,7 @@
size="L" size="L"
> >
<Tabs selected={mode} noPadding> <Tabs selected={mode} noPadding>
<Tab title="Key/Value"> <Tab title="Form">
{#each Array(fieldCount) as _, i} {#each Array(fieldCount) as _, i}
<div class="horizontal"> <div class="horizontal">
<Input outline label="Key" bind:value={fieldKeys[i]} /> <Input outline label="Key" bind:value={fieldKeys[i]} />
@ -102,7 +104,13 @@
</div> </div>
</Tab> </Tab>
<Tab title="JSON"> <Tab title="JSON">
<Editor mode="json" on:change={onJsonUpdate} value={json} /> <Layout noPadding gap="XS">
<Body size="S">
Provide a sample JSON blob here to automatically determine your
schema.
</Body>
<Editor mode="json" on:change={onJsonUpdate} value={json} />
</Layout>
</Tab> </Tab>
</Tabs> </Tabs>
</ModalContent> </ModalContent>