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

converts QueryViewer to use new Layout component

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"
thin
disabled={bindable}
bind:value={parameter.name} />
bind:value={parameter.name}
/>
<Input
placeholder="Default"
thin
disabled={bindable}
bind:value={parameter.default} />
bind:value={parameter.default}
/>
{#if bindable}
<DrawerBindableInput
title={`Query parameter "${parameter.name}"`}
placeholder="Value"
thin
on:change={evt => onBindingChange(parameter.name, evt.detail)}
value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}
{bindings} />
on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
value={runtimeToReadableBinding(
bindings,
customParams?.[parameter.name]
)}
{bindings}
/>
{:else}
<Icon hoverable name="Close" on:click={() => deleteQueryParameter(idx)} />
<Icon
hoverable
name="Close"
on:click={() => deleteQueryParameter(idx)}
/>
{/if}
{/each}
</div>
@ -90,16 +100,5 @@
grid-template-columns: 1fr 1fr 5%;
grid-gap: 10px;
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>

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

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