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

QueryViewer now uses Tabs component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-21 13:41:44 +02:00
parent 72fc3ea6dd
commit 72d6b941d3
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/builder/src/components/integration/QueryViewer.svelte
View File

@ -9,6 +9,8 @@
Heading, Heading,
Spacer, Spacer,
Switcher, Switcher,
Tabs,
Tab
} from "@budibase/bbui" } from "@budibase/bbui"
import { notifications, Divider } from "@budibase/bbui" import { notifications, Divider } from "@budibase/bbui"
import api from "builderStore/api" import api from "builderStore/api"
@ -185,15 +187,15 @@
<Button thin secondary on:click={previewQuery}>Run Query</Button> <Button thin secondary on:click={previewQuery}>Run Query</Button>
</div> </div>
</div> </div>
<Body small grey> <Body s grey>
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>
<Spacer medium /> <Spacer medium />
<section class="viewer"> <section class="viewer">
{#if data} {#if data}
<Switcher headings={PREVIEW_HEADINGS} bind:value={tab}> <Tabs selected="JSON">
{#if tab === 'JSON'} <Tab title="JSON">
<pre <pre
class="preview"> class="preview">
<!-- prettier-ignore --> <!-- prettier-ignore -->
@ -202,10 +204,9 @@
{:else} {:else}
{JSON.stringify(data[0], undefined, 2)} {JSON.stringify(data[0], undefined, 2)}
{/if} {/if}
</pre> </pre>
{:else if tab === 'PREVIEW'} </Tab>
<ExternalDataSourceTable {query} {data} /> <Tab title="Schema">
{:else if tab === 'SCHEMA'}
{#each fields as field, idx} {#each fields as field, idx}
<Spacer small /> <Spacer small />
<div class="field"> <div class="field">
@ -218,8 +219,11 @@
{/each} {/each}
<Spacer extraLarge /> <Spacer extraLarge />
<Button thin secondary on:click={newField}>Add Field</Button> <Button thin secondary on:click={newField}>Add Field</Button>
{/if} </Tab>
</Switcher> <Tab title="Preview">
<ExternalDataSourceTable {query} {data} />
</Tab>
</Tabs>
{/if} {/if}
</section> </section>
</div> </div>