converts QueryViewer to use new Layout component
This commit is contained in:
Keviin Åberg Kultalahti
parent
f940cf5a39
commit
ca775d8a80
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
Button,
|
||||
Body,
|
||||
Label,
|
||||
Layout,
|
||||
Input,
|
||||
Heading,
|
||||
Spacer,
|
||||
|
|
@ -110,46 +111,33 @@
|
|||
}
|
||||
</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-field">
|
||||
<Label>Query Name</Label>
|
||||
<Input bind:value={query.name} />
|
||||
</div>
|
||||
<Spacer medium />
|
||||
{#if queryConfig}
|
||||
<div class="config">
|
||||
<div class="config-field">
|
||||
<Label>Function</Label>
|
||||
<Select
|
||||
bind:value={query.queryVerb}
|
||||
options={Object.keys(queryConfig)}
|
||||
getOptionLabel={(verb) =>
|
||||
queryConfig[verb]?.displayName || capitalise(verb)}
|
||||
/>
|
||||
<Label>Query Name</Label>
|
||||
<Input bind:value={query.name} />
|
||||
</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 />
|
||||
<Spacer extraLarge />
|
||||
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
|
||||
<Spacer extraLarge />
|
||||
<Divider />
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#if shouldShowQueryConfig}
|
||||
<section>
|
||||
<Spacer extraLarge />
|
||||
<div class="config">
|
||||
<Heading s>Fields</Heading>
|
||||
<Body s>Fill in the fields specific to this query.</Body>
|
||||
<Spacer medium />
|
||||
<IntegrationQueryEditor
|
||||
{datasource}
|
||||
{query}
|
||||
|
|
@ -157,30 +145,27 @@
|
|||
schema={queryConfig[query.queryVerb]}
|
||||
bind:parameters
|
||||
/>
|
||||
<Spacer extraLarge />
|
||||
<Divider />
|
||||
<Spacer extraLarge />
|
||||
<div class="viewer-controls">
|
||||
<Heading s>Results</Heading>
|
||||
<div class="button-container">
|
||||
<Button
|
||||
secondary
|
||||
thin
|
||||
disabled={data.length === 0 || !query.name}
|
||||
on:click={saveQuery}
|
||||
>
|
||||
Save Query
|
||||
</Button>
|
||||
<Spacer medium />
|
||||
<Button thin secondary on:click={previewQuery}>Run Query</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="viewer-controls">
|
||||
<Heading s>Results</Heading>
|
||||
<div class="button-container">
|
||||
<Button
|
||||
secondary
|
||||
thin
|
||||
disabled={data.length === 0 || !query.name}
|
||||
on:click={saveQuery}
|
||||
>
|
||||
Save Query
|
||||
</Button>
|
||||
<Spacer medium />
|
||||
<Button thin secondary on:click={previewQuery}>Run Query</Button>
|
||||
</div>
|
||||
<Spacer small />
|
||||
</div>
|
||||
<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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue