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

more design updates

This commit is contained in:
Martin McKeaveney 2021-02-18 18:55:08 +00:00
parent 6e121b6045
commit a834f17a80
8 changed files with 85 additions and 46 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

@ -7,18 +7,19 @@
<form>
{#each Object.keys(integration) as configKey}
<div class="form-row">
{#if typeof integration[configKey] === 'object'}
<Label small>{configKey}</Label>
<Spacer small />
<KeyValueBuilder bind:object={integration[configKey]} />
{:else}
<div class="form-row">
<Label small>{configKey}</Label>
<Input
outline
type={integration[configKey].type}
bind:value={integration[configKey]} />
{/if}
</div>
{/if}
{/each}
</form>

4
packages/builder/src/components/integration/KeyValueBuilder.svelte
View File

@ -23,8 +23,8 @@
<!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
<div class="container">
{#each fields as field, idx}
<Input placeholder="Key" outline thin bind:value={field.name} />
<Input placeholder="Value" outline thin bind:value={field.value} />
<Input placeholder="Key" thin outline bind:value={field.name} />
<Input placeholder="Value" thin outline bind:value={field.value} />
<i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
{/each}
</div>

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

@ -29,7 +29,7 @@
{#each schemaKeys as field}
{#if schema.fields[field]?.type === 'object'}
<div>
<Label extraSmall grey>{field}</Label>
<Label small>{field}</Label>
<KeyValueBuilder bind:object={fields[field]} />
</div>
{:else if schema.fields[field]?.type === 'json'}
@ -45,7 +45,7 @@
<div class="horizontal">
<Label small>{field}</Label>
<Input
placeholder="Enter {field} name"
placeholder="Enter {field}"
outline
disabled={!editable}
type={schema.fields[field]?.type}

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

@ -77,6 +77,7 @@
.controls {
display: flex;
align-items: center;
justify-content: space-between;
}

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

@ -64,7 +64,7 @@
$: integrationInfo = $backendUiStore.integrations[datasourceType]
$: queryConfig = integrationInfo?.query
$: shouldShowQueryConfig = config && query.queryVerb
$: shouldShowQueryConfig = queryConfig && query.queryVerb
function newField() {
fields = [...fields, {}]
@ -134,14 +134,13 @@
<section class="config">
<Heading medium>Query {integrationInfo.friendlyName}</Heading>
<hr />
<Spacer medium />
<Heading small>Config</Heading>
<Spacer medium />
<Body small grey>Provide a name for your query and select its function.</Body>
<Spacer medium />
<div class="config-field">
<Label small>Query Name</Label>
<Input thin bind:value={query.name} />
<Input thin outline bind:value={query.name} />
</div>
<Spacer medium />
{#if queryConfig}
@ -153,7 +152,6 @@
{/each}
</Select>
</div>
<Spacer medium />
<hr />
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
<hr />
@ -189,16 +187,16 @@
<Heading small>Fields</Heading>
<Spacer medium />
<IntegrationQueryEditor
{datasource}
{query}
schema={config[query.queryVerb]}
schema={queryConfig[query.queryVerb]}
bind:parameters />
<Spacer medium />
<hr />
<Spacer medium />
<div class="viewer-controls">
<Heading small>Query Results</Heading>
<div>
<Button
secondary
thin
@ -208,10 +206,14 @@
</Button>
<Button thin primary on:click={previewQuery}>Run Query</Button>
</div>
</div>
<Body small grey>
Below, you can preview the results from your query and change the
schema.
</Body>
<Spacer medium />
<section class="viewer">
{#if data}
<Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
@ -276,6 +278,11 @@
font-size: var(--font-size-s);
}
hr {
margin-top: var(--layout-m);
margin-bottom: var(--layout-m);
}
.config {
margin-bottom: var(--spacing-s);
}
@ -285,10 +292,6 @@
cursor: pointer;
}
.query-type-span {
text-transform: uppercase;
}
.preview {
width: 800px;
height: 100%;
@ -300,15 +303,8 @@
.viewer-controls {
display: flex;
flex-direction: row;
/* margin-left: auto; */
/* direction: rtl; */
/* z-index: 5; */
justify-content: space-between;
gap: var(--spacing-m);
min-width: 150px;
}
.viewer {
/* margin-top: -28px; */
/* z-index: -2; */
}
</style>

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

@ -8,13 +8,16 @@
const QueryTypes = {
SQL: "sql",
JSON: "json",
FIELDS: "fields",
FIELDS: "fields"
}
export let query
export let datasource
export let schema
export let editable = true
$: urlDisplay = schema.urlDisplay && `${datasource.config.url}${query.fields.path}${query.fields.queryString}`
function updateQuery({ detail }) {
query.fields[schema.type] = detail.value
}
@ -40,6 +43,27 @@
parameters={query.parameters} />
{:else if schema.type === QueryTypes.FIELDS}
<FieldsBuilder bind:fields={query.fields} {schema} {editable} />
{#if schema.urlDisplay}
<div class="url-row">
<Label small>URL</Label>
<Input thin outline disabled value={urlDisplay} />
</div>
{/if}
{/if}
{/key}
{/if}
<style>
.url-row {
display: grid;
grid-template-columns: 20% 1fr;
grid-gap: var(--spacing-l);
align-items: center;
}
pre {
background: var(--background);
border-radius: var(--border-radius-s);
margin: 0;
}
</style>

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

@ -50,6 +50,7 @@
<Spacer medium />
<IntegrationConfigForm integration={datasource.config} />
<Spacer medium />
<hr />

32
packages/server/src/integrations/rest.js
View File

@ -20,10 +20,14 @@ const SCHEMA = {
create: {
displayName: "POST",
type: QUERY_TYPES.FIELDS,
urlDisplay: true,
fields: {
path: {
type: FIELD_TYPES.STRING,
},
queryString: {
type: FIELD_TYPES.STRING,
},
headers: {
type: FIELD_TYPES.OBJECT,
},
@ -35,10 +39,14 @@ const SCHEMA = {
read: {
displayName: "GET",
type: QUERY_TYPES.FIELDS,
urlDisplay: true,
fields: {
path: {
type: FIELD_TYPES.STRING,
},
queryString: {
type: FIELD_TYPES.STRING,
},
headers: {
type: FIELD_TYPES.OBJECT,
},
@ -47,10 +55,14 @@ const SCHEMA = {
update: {
displayName: "PUT",
type: QUERY_TYPES.FIELDS,
urlDisplay: true,
fields: {
path: {
type: FIELD_TYPES.STRING,
},
queryString: {
type: FIELD_TYPES.STRING,
},
headers: {
type: FIELD_TYPES.OBJECT,
},
@ -62,10 +74,14 @@ const SCHEMA = {
delete: {
displayName: "DELETE",
type: QUERY_TYPES.FIELDS,
urlDisplay: true,
fields: {
path: {
type: FIELD_TYPES.STRING,
},
queryString: {
type: FIELD_TYPES.STRING,
},
headers: {
type: FIELD_TYPES.OBJECT,
},
@ -82,8 +98,8 @@ class RestIntegration {
this.config = config
}
async create({ path, headers = {}, json }) {
const response = await fetch(this.config.url + path, {
async create({ path, queryString, headers = {}, json }) {
const response = await fetch(this.config.url + path + queryString, {
method: "POST",
headers: {
...this.config.defaultHeaders,
@ -95,8 +111,8 @@ class RestIntegration {
return await response.json()
}
async read({ path, headers = {} }) {
const response = await fetch(this.config.url + path, {
async read({ path, queryString, headers = {} }) {
const response = await fetch(this.config.url + path + queryString, {
headers: {
...this.config.defaultHeaders,
...headers,
@ -106,8 +122,8 @@ class RestIntegration {
return await response.json()
}
async update({ path, headers = {}, json }) {
const response = await fetch(this.config.url + path, {
async update({ path, queryString, headers = {}, json }) {
const response = await fetch(this.config.url + path + queryString, {
method: "POST",
headers: {
...this.config.defaultHeaders,
@ -119,8 +135,8 @@ class RestIntegration {
return await response.json()
}
async delete({ path, headers = {} }) {
const response = await fetch(this.config.url + path, {
async delete({ path, queryString, headers = {} }) {
const response = await fetch(this.config.url + path + queryString, {
method: "DELETE",
headers: {
...this.config.defaultHeaders,