2020-12-19 07:19:43 +13:00
|
|
|
<script>
|
|
|
|
import { onMount } from "svelte"
|
|
|
|
import {
|
|
|
|
Select,
|
|
|
|
Button,
|
|
|
|
Label,
|
|
|
|
Input,
|
|
|
|
TextArea,
|
|
|
|
Heading,
|
|
|
|
Spacer,
|
|
|
|
Switcher,
|
|
|
|
} from "@budibase/bbui"
|
|
|
|
import { notifier } from "builderStore/store/notifications"
|
|
|
|
import api from "builderStore/api"
|
|
|
|
import { FIELDS } from "constants/backend"
|
|
|
|
import IntegrationQueryEditor from "components/integration/index.svelte"
|
2021-01-08 02:13:46 +13:00
|
|
|
import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
|
2020-12-19 07:19:43 +13:00
|
|
|
import { backendUiStore } from "builderStore"
|
|
|
|
|
|
|
|
const PREVIEW_HEADINGS = [
|
|
|
|
{
|
2021-01-08 02:13:46 +13:00
|
|
|
title: "JSON",
|
|
|
|
key: "JSON",
|
2020-12-19 07:19:43 +13:00
|
|
|
},
|
|
|
|
{
|
|
|
|
title: "Schema",
|
|
|
|
key: "SCHEMA",
|
|
|
|
},
|
2021-01-08 02:13:46 +13:00
|
|
|
{
|
|
|
|
title: "Preview",
|
|
|
|
key: "PREVIEW",
|
|
|
|
},
|
2020-12-19 07:19:43 +13:00
|
|
|
]
|
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
const QueryVerb = ["create", "read", "update", "delete"]
|
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
export let query
|
|
|
|
export let fields = []
|
|
|
|
|
|
|
|
let config = {}
|
2021-01-08 02:13:46 +13:00
|
|
|
let tab = "JSON"
|
|
|
|
let parameters
|
|
|
|
let data
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-01-07 01:28:51 +13:00
|
|
|
$: datasource = $backendUiStore.datasources.find(
|
|
|
|
ds => ds._id === query.datasourceId
|
|
|
|
)
|
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
$: query.schema = fields.reduce(
|
|
|
|
(acc, next) => ({
|
|
|
|
...acc,
|
|
|
|
[next.name]: {
|
|
|
|
name: next.name,
|
|
|
|
type: "string",
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
{}
|
|
|
|
)
|
|
|
|
|
2021-01-08 02:13:46 +13:00
|
|
|
$: datasourceType = datasource.source
|
|
|
|
$: datasourceType && fetchQueryConfig()
|
|
|
|
|
2020-12-19 07:19:43 +13:00
|
|
|
function newField() {
|
|
|
|
fields = [...fields, {}]
|
|
|
|
}
|
|
|
|
|
|
|
|
function deleteField(idx) {
|
|
|
|
fields.splice(idx, 1)
|
|
|
|
fields = fields
|
|
|
|
}
|
|
|
|
|
|
|
|
async function fetchQueryConfig() {
|
|
|
|
try {
|
|
|
|
const response = await api.get(`/api/integrations/${datasource.source}`)
|
|
|
|
const json = await response.json()
|
|
|
|
config = json.query
|
|
|
|
} catch (err) {
|
|
|
|
// TODO: Error fetching integration config
|
|
|
|
// notifier.danger()
|
|
|
|
console.error(err)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
async function previewQuery() {
|
|
|
|
try {
|
2021-01-07 01:28:51 +13:00
|
|
|
const response = await api.post(`/api/queries/preview`, {
|
2021-01-13 05:49:11 +13:00
|
|
|
queryVerb: query.queryVerb,
|
2021-01-09 01:06:37 +13:00
|
|
|
parameters: query.parameters.reduce(
|
|
|
|
(acc, next) => ({
|
|
|
|
...acc,
|
|
|
|
[next.name]: next.default,
|
|
|
|
}),
|
|
|
|
{}
|
|
|
|
),
|
2021-01-07 01:28:51 +13:00
|
|
|
datasourceId: datasource._id,
|
2020-12-19 07:19:43 +13:00
|
|
|
query: query.queryString,
|
|
|
|
})
|
|
|
|
const json = await response.json()
|
2021-01-08 02:13:46 +13:00
|
|
|
|
|
|
|
if (response.status !== 200) throw new Error(json.message)
|
|
|
|
|
|
|
|
data = json || []
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-01-09 01:06:37 +13:00
|
|
|
// Assume all the fields are strings and create a basic schema
|
|
|
|
// from the first record returned by the query
|
2021-01-08 02:13:46 +13:00
|
|
|
fields = Object.keys(json[0]).map(field => ({
|
2020-12-19 07:19:43 +13:00
|
|
|
name: field,
|
|
|
|
type: "STRING",
|
|
|
|
}))
|
|
|
|
} catch (err) {
|
|
|
|
notifier.danger(`Query Error: ${err.message}`)
|
|
|
|
console.error(err)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-01-08 02:13:46 +13:00
|
|
|
async function saveQuery() {
|
|
|
|
try {
|
|
|
|
await backendUiStore.actions.queries.save(query.datasourceId, query)
|
2021-01-12 09:17:56 +13:00
|
|
|
notifier.success(`Query saved successfully.`)
|
2021-01-08 02:13:46 +13:00
|
|
|
} catch (err) {
|
|
|
|
console.error(err)
|
|
|
|
notifier.danger(`Error creating query. ${err.message}`)
|
|
|
|
}
|
|
|
|
}
|
2020-12-19 07:19:43 +13:00
|
|
|
</script>
|
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
<header>
|
|
|
|
<Heading small>{query.name}</Heading>
|
|
|
|
<div class="queryVerbs">
|
|
|
|
{#each QueryVerb as queryVerb}
|
|
|
|
<div
|
|
|
|
class="queryVerb"
|
|
|
|
class:selected={queryVerb === query.queryVerb}
|
|
|
|
on:click={() => {
|
|
|
|
query.queryVerb = queryVerb
|
|
|
|
}}>
|
|
|
|
{queryVerb}
|
|
|
|
</div>
|
|
|
|
{/each}
|
|
|
|
</div>
|
|
|
|
<Select thin secondary bind:value={query.queryType}>
|
|
|
|
<option value={''}>Select an option</option>
|
|
|
|
{#each Object.keys(config) as queryType}
|
|
|
|
<option value={config[queryType].type}>{queryType}</option>
|
|
|
|
{/each}
|
|
|
|
</Select>
|
|
|
|
</header>
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
<Spacer large />
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
{#if query.queryVerb && query.queryType}
|
|
|
|
<section>
|
|
|
|
<div class="config">
|
|
|
|
<Label extraSmall grey>Query Name</Label>
|
|
|
|
<Input thin bind:value={query.name} />
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
<Spacer medium />
|
2020-12-19 07:19:43 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
<IntegrationQueryEditor {query} bind:parameters />
|
2021-01-08 02:13:46 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
<Spacer medium />
|
2021-01-08 02:13:46 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
<div class="viewer-controls">
|
|
|
|
<Button wide thin blue disabled={!data} on:click={saveQuery}>
|
|
|
|
Save
|
|
|
|
</Button>
|
|
|
|
<Button wide thin primary on:click={previewQuery}>Run</Button>
|
|
|
|
</div>
|
2021-01-08 02:13:46 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
<section class="viewer">
|
|
|
|
{#if data}
|
|
|
|
<Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
|
|
|
|
{#if tab === 'JSON'}
|
|
|
|
<pre class="preview">{JSON.stringify(data[0], undefined, 2)}</pre>
|
|
|
|
{:else if tab === 'PREVIEW'}
|
|
|
|
<ExternalDataSourceTable {query} {data} />
|
|
|
|
{:else if tab === 'SCHEMA'}
|
|
|
|
{#each fields as field, idx}
|
|
|
|
<div class="field">
|
|
|
|
<Input thin type={'text'} bind:value={field.name} />
|
|
|
|
<Select secondary thin bind:value={field.type}>
|
|
|
|
<option value={''}>Select an option</option>
|
|
|
|
<option value={'STRING'}>Text</option>
|
|
|
|
<option value={'NUMBER'}>Number</option>
|
|
|
|
<option value={'BOOLEAN'}>Boolean</option>
|
|
|
|
<option value={'DATETIME'}>Datetime</option>
|
|
|
|
</Select>
|
|
|
|
<i
|
|
|
|
class="ri-close-circle-line delete"
|
|
|
|
on:click={() => deleteField(idx)} />
|
|
|
|
</div>
|
|
|
|
{/each}
|
|
|
|
<Button thin secondary on:click={newField}>Add Field</Button>
|
|
|
|
{/if}
|
|
|
|
</Switcher>
|
|
|
|
{/if}
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
{/if}
|
2020-12-19 07:19:43 +13:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.field {
|
|
|
|
display: grid;
|
|
|
|
grid-gap: 10px;
|
|
|
|
grid-template-columns: 1fr 1fr 50px;
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
}
|
|
|
|
|
|
|
|
.config {
|
|
|
|
margin-bottom: var(--spacing-s);
|
|
|
|
}
|
|
|
|
|
|
|
|
.delete {
|
|
|
|
align-self: center;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.preview {
|
|
|
|
width: 800px;
|
2021-01-08 02:13:46 +13:00
|
|
|
height: 100%;
|
|
|
|
overflow-y: auto;
|
2020-12-19 07:19:43 +13:00
|
|
|
overflow-wrap: break-word;
|
|
|
|
white-space: pre-wrap;
|
|
|
|
}
|
2021-01-08 02:13:46 +13:00
|
|
|
|
2021-01-13 05:49:11 +13:00
|
|
|
header {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.queryVerbs {
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
font-size: var(--font-size-m);
|
|
|
|
align-items: center;
|
|
|
|
margin-left: var(--spacing-l);
|
|
|
|
}
|
|
|
|
|
|
|
|
.queryVerb {
|
|
|
|
text-transform: capitalize;
|
|
|
|
margin-right: var(--spacing-m);
|
|
|
|
color: var(--grey-5);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.selected {
|
|
|
|
color: var(--white);
|
|
|
|
font-weight: 500;
|
2021-01-08 02:13:46 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
.viewer-controls {
|
|
|
|
display: grid;
|
|
|
|
grid-gap: var(--spacing-m);
|
|
|
|
grid-auto-flow: column;
|
2021-01-12 09:17:56 +13:00
|
|
|
direction: rtl;
|
|
|
|
grid-template-columns: 10% 10% 1fr;
|
|
|
|
margin-bottom: var(--spacing-m);
|
2021-01-08 02:13:46 +13:00
|
|
|
}
|
2020-12-19 07:19:43 +13:00
|
|
|
</style>
|