budibase/packages/builder/src/components/integration/index.svelte

71 lines
1.7 KiB
Svelte
Raw Normal View History

2020-12-18 19:19:43 +01:00
<script>
2021-01-14 21:51:03 +01:00
import Editor from "./QueryEditor.svelte"
2021-01-13 15:11:53 +01:00
import FieldsBuilder from "./QueryFieldsBuilder.svelte"
import { Label, Input } from "@budibase/bbui"
2021-01-06 13:28:51 +01:00
2020-12-18 19:19:43 +01:00
const QueryTypes = {
SQL: "sql",
2021-01-11 22:01:21 +01:00
JSON: "json",
FIELDS: "fields",
2020-12-18 19:19:43 +01:00
}
export let query
2021-02-18 19:55:08 +01:00
export let datasource
2021-01-13 15:11:53 +01:00
export let schema
2021-01-14 15:22:24 +01:00
export let editable = true
export let height = 500
2021-01-11 18:18:22 +01:00
2021-02-19 15:31:07 +01:00
$: urlDisplay =
schema.urlDisplay &&
`${datasource.config.url}${
query.fields.path ? "/" + query.fields.path : ""
}${query.fields.queryString ? "?" + query.fields.queryString : ""}`
2021-02-18 19:55:08 +01:00
2021-01-11 18:18:22 +01:00
function updateQuery({ detail }) {
2021-01-13 17:39:47 +01:00
query.fields[schema.type] = detail.value
2021-01-11 18:18:22 +01:00
}
2020-12-18 19:19:43 +01:00
</script>
2021-01-13 17:39:47 +01:00
{#if schema}
2021-01-18 16:37:32 +01:00
{#key query._id}
{#if schema.type === QueryTypes.SQL}
<Editor
editorHeight={height}
2021-01-18 16:37:32 +01:00
label="Query"
mode="sql"
on:change={updateQuery}
readOnly={!editable}
2021-02-01 12:51:53 +01:00
value={query.fields.sql}
parameters={query.parameters}
/>
2021-01-18 16:37:32 +01:00
{:else if schema.type === QueryTypes.JSON}
<Editor
editorHeight={height}
2021-01-18 16:37:32 +01:00
label="Query"
mode="json"
on:change={updateQuery}
readOnly={!editable}
2021-02-01 12:51:53 +01:00
value={query.fields.json}
parameters={query.parameters}
/>
2021-01-18 16:37:32 +01:00
{:else if schema.type === QueryTypes.FIELDS}
<FieldsBuilder bind:fields={query.fields} {schema} {editable} />
2021-02-18 19:55:08 +01:00
{#if schema.urlDisplay}
<div class="url-row">
<Label small>URL</Label>
<Input thin outline disabled value={urlDisplay} />
</div>
{/if}
2021-01-18 16:37:32 +01:00
{/if}
{/key}
2021-01-12 11:28:41 +01:00
{/if}
2021-02-18 19:55:08 +01:00
<style>
2021-02-19 15:31:07 +01:00
.url-row {
display: grid;
grid-template-columns: 20% 1fr;
grid-gap: var(--spacing-l);
align-items: center;
}
2021-02-18 19:55:08 +01:00
</style>