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

lint

This commit is contained in:
Martin McKeaveney 2021-02-19 14:31:07 +00:00
parent 8a60131c7e
commit 1df1efe59b
8 changed files with 50 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View File

@ -3,6 +3,8 @@
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
export let integration export let integration
let unsaved = false
</script> </script>
<form> <form>
@ -10,13 +12,14 @@
{#if typeof integration[configKey] === 'object'} {#if typeof integration[configKey] === 'object'}
<Label small>{configKey}</Label> <Label small>{configKey}</Label>
<Spacer small /> <Spacer small />
<KeyValueBuilder bind:object={integration[configKey]} /> <KeyValueBuilder bind:object={integration[configKey]} on:change />
{:else} {:else}
<div class="form-row"> <div class="form-row">
<Label small>{configKey}</Label> <Label small>{configKey}</Label>
<Input <Input
outline outline
type={integration[configKey].type} type={integration[configKey].type}
on:change
bind:value={integration[configKey]} /> bind:value={integration[configKey]} />
</div> </div>
{/if} {/if}

16
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
View File

@ -50,22 +50,6 @@
</div> </div>
{/each} {/each}
</div> </div>
<!-- {#if schema}
{#each Object.keys(schema) as configKey}
{#if schema[configKey].type === 'object'}
<Label small>{configKey}</Label>
<KeyValueBuilder bind:object={integration[configKey]} />
{:else}
<Label small>{configKey}</Label>
<Input
outline
type={integration[configKey].type}
bind:value={integration[configKey]} />
{/if}
<Spacer medium />
{/each}
{/if} -->
</section> </section>
<style> <style>

35
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
View File

@ -1,35 +0,0 @@
<!--<script>
import { backendUiStore, store, allScreens } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { DropdownMenu, Button, Input, TextButton, Icon } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
export let bindable
export let parameters
let anchor
let dropdown
let confirmDeleteDialog
function hideEditor() {
dropdown?.hide()
}
</script><div on:click|stopPropagation bind:this={anchor}>
<TextButton text on:click={dropdown.show} active={false}>
<Icon name="add" />
Add Parameters
</TextButton>
<DropdownMenu align="right" {anchor} bind:this={dropdown}>
<div class="wrapper">
<ParameterBuilder bind:parameters {bindable} />
</div>
</DropdownMenu>
</div><style>
.wrapper {
padding: var(--spacing-xl);
min-width: 600px;
}
</style>-->

2
packages/builder/src/components/integration/QueryFieldsBuilder.svelte
View File

@ -6,7 +6,7 @@
Input, Input,
Heading, Heading,
Select, Select,
Spacer Spacer,
} from "@budibase/bbui" } from "@budibase/bbui"
import Editor from "./QueryEditor.svelte" import Editor from "./QueryEditor.svelte"
import KeyValueBuilder from "./KeyValueBuilder.svelte" import KeyValueBuilder from "./KeyValueBuilder.svelte"

3
packages/builder/src/components/integration/QueryParameterBuilder.svelte
View File

@ -31,7 +31,7 @@
<section> <section>
<div class="controls"> <div class="controls">
<Heading small>Parameters</Heading> <Heading small lh>Parameters</Heading>
{#if !bindable} {#if !bindable}
<Button secondary on:click={newQueryParameter}>Add Param</Button> <Button secondary on:click={newQueryParameter}>Add Param</Button>
{/if} {/if}
@ -79,6 +79,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 40px;
} }
.parameters { .parameters {

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

@ -131,10 +131,9 @@
</script> </script>
<section class="config"> <section class="config">
<Heading medium>Query {integrationInfo.friendlyName}</Heading> <Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
<hr /> <hr />
<Heading small>Config</Heading> <Heading small lh>Config</Heading>
<Spacer medium />
<Body small grey>Provide a name for your query and select its function.</Body> <Body small grey>Provide a name for your query and select its function.</Body>
<Spacer medium /> <Spacer medium />
<div class="config-field"> <div class="config-field">
@ -147,7 +146,9 @@
<Label small>Function</Label> <Label small>Function</Label>
<Select primary outline thin bind:value={query.queryVerb}> <Select primary outline thin bind:value={query.queryVerb}>
{#each Object.keys(queryConfig) as queryVerb} {#each Object.keys(queryConfig) as queryVerb}
<option value={queryVerb}>{queryConfig[queryVerb]?.displayName || queryVerb}</option> <option value={queryVerb}>
{queryConfig[queryVerb]?.displayName || queryVerb}
</option>
{/each} {/each}
</Select> </Select>
</div> </div>
@ -160,7 +161,8 @@
{#if shouldShowQueryConfig} {#if shouldShowQueryConfig}
<section> <section>
<div class="config"> <div class="config">
<Heading small>Fields</Heading> <Heading small lh>Fields</Heading>
<Body small grey>Fill in the fields specific to this query.</Body>
<Spacer medium /> <Spacer medium />
<IntegrationQueryEditor <IntegrationQueryEditor
{datasource} {datasource}
@ -171,7 +173,7 @@
<hr /> <hr />
<div class="viewer-controls"> <div class="viewer-controls">
<Heading small>Query Results</Heading> <Heading small lh>Query Results</Heading>
<div class="button-container"> <div class="button-container">
<Button <Button
secondary secondary
@ -198,8 +200,10 @@
<pre class="preview"> <pre class="preview">
{#if !data[0]} {#if !data[0]}
Please run your query to fetch some data. Please run your query to fetch some data.
{:else} {:else}
{JSON.stringify(data[0], undefined, 2)} {JSON.stringify(data[0], undefined, 2)}
{/if} {/if}
@ -283,5 +287,6 @@
justify-content: space-between; justify-content: space-between;
gap: var(--spacing-m); gap: var(--spacing-m);
min-width: 150px; min-width: 150px;
align-items: center;
} }
</style> </style>

18
packages/builder/src/components/integration/index.svelte
View File

@ -8,7 +8,7 @@
const QueryTypes = { const QueryTypes = {
SQL: "sql", SQL: "sql",
JSON: "json", JSON: "json",
FIELDS: "fields" FIELDS: "fields",
} }
export let query export let query
@ -16,7 +16,9 @@
export let schema export let schema
export let editable = true export let editable = true
$: urlDisplay = schema.urlDisplay && `${datasource.config.url}${query.fields.path}${query.fields.queryString}` $: urlDisplay =
schema.urlDisplay &&
`${datasource.config.url}${query.fields.path}${query.fields.queryString}`
function updateQuery({ detail }) { function updateQuery({ detail }) {
query.fields[schema.type] = detail.value query.fields[schema.type] = detail.value
@ -54,10 +56,10 @@
{/if} {/if}
<style> <style>
.url-row { .url-row {
display: grid; display: grid;
grid-template-columns: 20% 1fr; grid-template-columns: 20% 1fr;
grid-gap: var(--spacing-l); grid-gap: var(--spacing-l);
align-items: center; align-items: center;
} }
</style> </style>

25
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
View File

@ -1,11 +1,13 @@
<script> <script>
import { goto } from "@sveltech/routify" import { goto, beforeUrlChange } from "@sveltech/routify"
import { Button, Heading, Body, Spacer, Icon } from "@budibase/bbui" import { Button, Heading, Body, Spacer, Icon } from "@budibase/bbui"
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte" import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import ICONS from "components/backend/DatasourceNavigator/icons" import ICONS from "components/backend/DatasourceNavigator/icons"
let unsaved = false
$: datasource = $backendUiStore.datasources.find( $: datasource = $backendUiStore.datasources.find(
ds => ds._id === $backendUiStore.selectedDatasourceId ds => ds._id === $backendUiStore.selectedDatasourceId
) )
@ -14,6 +16,7 @@
// Create datasource // Create datasource
await backendUiStore.actions.datasources.save(datasource) await backendUiStore.actions.datasources.save(datasource)
notifier.success(`Datasource ${name} saved successfully.`) notifier.success(`Datasource ${name} saved successfully.`)
unsaved = false
} }
function onClickQuery(query) { function onClickQuery(query) {
@ -23,6 +26,21 @@
backendUiStore.actions.queries.select(query) backendUiStore.actions.queries.select(query)
$goto(`../${query._id}`) $goto(`../${query._id}`)
} }
function setUnsaved() {
unsaved = true
}
$beforeUrlChange((event, store) => {
if (unsaved) {
notifier.danger(
"Unsaved changes. Please save your datasource configuration before leaving."
)
return false
}
return true
})
</script> </script>
{#if datasource} {#if datasource}
@ -39,7 +57,6 @@
</header> </header>
<Spacer extraLarge /> <Spacer extraLarge />
<div class="container"> <div class="container">
<div class="config-header"> <div class="config-header">
<Heading small>Configuration</Heading> <Heading small>Configuration</Heading>
<Button secondary on:click={saveDatasource}>Save</Button> <Button secondary on:click={saveDatasource}>Save</Button>
@ -49,7 +66,9 @@
</Body> </Body>
<Spacer medium /> <Spacer medium />
<IntegrationConfigForm integration={datasource.config} /> <IntegrationConfigForm
integration={datasource.config}
on:change={setUnsaved} />
<Spacer medium /> <Spacer medium />
<hr /> <hr />