CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-05 22:40:39 +12:00
Code Issues Projects Releases Wiki Activity

converts QueryViewer to use new Layout component

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 15:26:03 +02:00
parent 3102b6de2c
commit f747f51db8
2 changed files with 56 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/builder/src/components/integration/QueryParameterBuilder.svelte
View file

@ -52,22 +52,32 @@
placeholder="Parameter Name" placeholder="Parameter Name"
thin thin
disabled={bindable} disabled={bindable}
bind:value={parameter.name} /> bind:value={parameter.name}
/>
<Input <Input
placeholder="Default" placeholder="Default"
thin thin
disabled={bindable} disabled={bindable}
bind:value={parameter.default} /> bind:value={parameter.default}
/>
{#if bindable} {#if bindable}
<DrawerBindableInput <DrawerBindableInput
title={`Query parameter "${parameter.name}"`} title={`Query parameter "${parameter.name}"`}
placeholder="Value" placeholder="Value"
thin thin
on:change={evt => onBindingChange(parameter.name, evt.detail)} on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])} value={runtimeToReadableBinding(
{bindings} /> bindings,
customParams?.[parameter.name]
)}
{bindings}
/>
{:else} {:else}
<Icon hoverable name="Close" on:click={() => deleteQueryParameter(idx)} /> <Icon
hoverable
name="Close"
on:click={() => deleteQueryParameter(idx)}
/>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -90,16 +100,5 @@
grid-template-columns: 1fr 1fr 5%; grid-template-columns: 1fr 1fr 5%;
grid-gap: 10px; grid-gap: 10px;
align-items: center; align-items: center;
margin-bottom: var(--spacing-xl);
}
.delete {
transition: all 0.2s;
}
.delete:hover {
transform: scale(1.1);
font-weight: 500;
cursor: pointer;
} }
</style> </style>

97
packages/builder/src/components/integration/QueryViewer.svelte
View file

@ -6,6 +6,7 @@
Button, Button,
Body, Body,
Label, Label,
Layout,
Input, Input,
Heading, Heading,
Spacer, Spacer,
@ -110,46 +111,33 @@
} }
</script> </script>
<section class="config"> <Layout gap="S" noPadding>
<Spacer extraLarge />
<Heading m>Query {integrationInfo?.friendlyName}</Heading> <Heading m>Query {integrationInfo?.friendlyName}</Heading>
<Spacer extraLarge />
<Divider /> <Divider />
<Spacer extraLarge />
<Heading s>Config</Heading> <Heading s>Config</Heading>
<Body s>Provide a name for your query and select its function.</Body> <div class="config">
<Spacer medium />
<div class="config-field">
<Label>Query Name</Label>
<Input bind:value={query.name} />
</div>
<Spacer medium />
{#if queryConfig}
<div class="config-field"> <div class="config-field">
<Label>Function</Label> <Label>Query Name</Label>
<Select <Input bind:value={query.name} />
bind:value={query.queryVerb}
options={Object.keys(queryConfig)}
getOptionLabel={(verb) =>
queryConfig[verb]?.displayName || capitalise(verb)}
/>
</div> </div>
<Spacer extraLarge /> {#if queryConfig}
<div class="config-field">
<Label>Function</Label>
<Select
bind:value={query.queryVerb}
options={Object.keys(queryConfig)}
getOptionLabel={(verb) =>
queryConfig[verb]?.displayName || capitalise(verb)}
/>
</div>
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
{/if}
</div>
{#if shouldShowQueryConfig}
<Divider /> <Divider />
<Spacer extraLarge />
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
<Spacer extraLarge />
<Divider />
{/if}
</section>
{#if shouldShowQueryConfig}
<section>
<Spacer extraLarge />
<div class="config"> <div class="config">
<Heading s>Fields</Heading> <Heading s>Fields</Heading>
<Body s>Fill in the fields specific to this query.</Body> <Body s>Fill in the fields specific to this query.</Body>
<Spacer medium />
<IntegrationQueryEditor <IntegrationQueryEditor
{datasource} {datasource}
{query} {query}
@ -157,30 +145,27 @@
schema={queryConfig[query.queryVerb]} schema={queryConfig[query.queryVerb]}
bind:parameters bind:parameters
/> />
<Spacer extraLarge />
<Divider /> <Divider />
<Spacer extraLarge /> </div>
<div class="viewer-controls"> <div class="viewer-controls">
<Heading s>Results</Heading> <Heading s>Results</Heading>
<div class="button-container"> <div class="button-container">
<Button <Button
secondary secondary
thin 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 /> <Spacer medium />
<Button thin secondary on:click={previewQuery}>Run Query</Button> <Button thin secondary on:click={previewQuery}>Run Query</Button>
</div>
</div> </div>
<Spacer small /> </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>
<Spacer medium />
<section class="viewer"> <section class="viewer">
{#if data} {#if data}
<Tabs selected="JSON"> <Tabs selected="JSON">
@ -213,12 +198,14 @@
</Tabs> </Tabs>
{/if} {/if}
</section> </section>
</div> {/if}
</section> </Layout>
{/if}
<Spacer extraLarge />
<style> <style>
.config {
display: grid;
grid-gap: var(--spacing-s);
}
.config-field { .config-field {
display: grid; display: grid;
grid-template-columns: 20% 1fr; grid-template-columns: 20% 1fr;
@ -236,10 +223,6 @@
display: flex; display: flex;
} }
.config {
margin-bottom: var(--spacing-s);
}
.delete { .delete {
align-self: center; align-self: center;
cursor: pointer; cursor: pointer;