Fix editor

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-28 15:46:11 +02:00
parent 0be7cb55b2
commit c1af7a7d93
2 changed files with 29 additions and 28 deletions

View File

@ -166,6 +166,7 @@
{#if label} {#if label}
<Label small>{label}</Label> <Label small>{label}</Label>
<Spacer medium />
{/if} {/if}
<div style={`--code-mirror-height: ${editorHeight}px`}> <div style={`--code-mirror-height: ${editorHeight}px`}>
<textarea tabindex="0" bind:this={refs.editor} readonly {value} /> <textarea tabindex="0" bind:this={refs.editor} readonly {value} />

View File

@ -4,6 +4,7 @@
Icon, Icon,
Select, Select,
Button, Button,
ButtonGroup,
Body, Body,
Label, Label,
Layout, Layout,
@ -149,29 +150,26 @@
</div> </div>
<div class="viewer-controls"> <div class="viewer-controls">
<Heading s>Results</Heading> <Heading s>Results</Heading>
<div class="button-container"> <ButtonGroup>
<Button <Button
secondary cta
thin
disabled={data.length === 0 || !query.name} disabled={data.length === 0 || !query.name}
on:click={saveQuery} on:click={saveQuery}
> >
Save Query Save Query
</Button> </Button>
<Spacer medium /> <Button secondary on:click={previewQuery}>Run Query</Button>
<Button thin secondary on:click={previewQuery}>Run Query</Button> </ButtonGroup>
</div>
</div> </div>
<Body s> <Body s>
Below, you can preview the results from your query and change the Below, you can preview the results from your query and change the schema.
schema. </Body>
</Body> <section class="viewer">
<section class="viewer"> {#if data}
{#if data} <Tabs selected="JSON">
<Tabs selected="JSON"> <Tab title="JSON">
<Tab title="JSON"> <pre
<pre class="preview">
class="preview">
<!-- prettier-ignore --> <!-- prettier-ignore -->
{#if !data[0]} {#if !data[0]}
Please run your query to fetch some data. Please run your query to fetch some data.
@ -179,25 +177,27 @@
{JSON.stringify(data[0], undefined, 2)} {JSON.stringify(data[0], undefined, 2)}
{/if} {/if}
</pre> </pre>
</Tab> </Tab>
<Tab title="Schema"> <Tab title="Schema">
<Layout gap="S">
{#each fields as field, idx} {#each fields as field, idx}
<Spacer small />
<div class="field"> <div class="field">
<Input placeholder="Field Name" bind:value={field.name} /> <Input placeholder="Field Name" bind:value={field.name} />
<Select bind:value={field.type} options={typeOptions} /> <Select bind:value={field.type} options={typeOptions} />
<Icon name="bleClose" on:click={() => deleteField(idx)} /> <Icon name="bleClose" on:click={() => deleteField(idx)} />
</div> </div>
{/each} {/each}
<Spacer extraLarge /> <div>
<Button thin secondary on:click={newField}>Add Field</Button> <Button secondary on:click={newField}>Add Field</Button>
</Tab> </div>
<Tab title="Preview"> </Layout>
<ExternalDataSourceTable {query} {data} /> </Tab>
</Tab> <Tab title="Preview">
</Tabs> <ExternalDataSourceTable {query} {data} />
{/if} </Tab>
</section> </Tabs>
{/if}
</section>
{/if} {/if}
</Layout> </Layout>