mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
6 years ago
25 changed files with 224 additions and 189 deletions
@ -1,15 +1,33 @@ |
|||||
<script> |
<script> |
||||
import { Input, TextArea, Spacer } from "@budibase/bbui" |
import { Label, Input, TextArea, Spacer } from "@budibase/bbui" |
||||
|
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" |
||||
|
|
||||
export let integration |
export let integration |
||||
</script> |
</script> |
||||
|
|
||||
<form> |
<form> |
||||
{#each Object.keys(integration) as configKey} |
{#each Object.keys(integration) as configKey} |
||||
<Input |
<div class="form-row"> |
||||
type={integration[configKey].type} |
{#if typeof integration[configKey] === 'object'} |
||||
label={configKey} |
<Label small>{configKey}</Label> |
||||
bind:value={integration[configKey]} /> |
<KeyValueBuilder bind:object={integration[configKey]} /> |
||||
<Spacer large /> |
{:else} |
||||
|
<Label small>{configKey}</Label> |
||||
|
<Input |
||||
|
outline |
||||
|
type={integration[configKey].type} |
||||
|
bind:value={integration[configKey]} /> |
||||
|
{/if} |
||||
|
</div> |
||||
{/each} |
{/each} |
||||
</form> |
</form> |
||||
|
|
||||
|
<style> |
||||
|
.form-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: 20% 1fr; |
||||
|
grid-gap: var(--spacing-l); |
||||
|
align-items: center; |
||||
|
margin-bottom: var(--spacing-m); |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -1,61 +0,0 @@ |
|||||
<script> |
|
||||
import { goto, params } from "@sveltech/routify" |
|
||||
import { backendUiStore, store } from "builderStore" |
|
||||
import { notifier } from "builderStore/store/notifications" |
|
||||
import { Input, Label, ModalContent, Button, Spacer } from "@budibase/bbui" |
|
||||
import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte" |
|
||||
import analytics from "analytics" |
|
||||
|
|
||||
let modal |
|
||||
let error = "" |
|
||||
|
|
||||
let name |
|
||||
let source |
|
||||
let integration |
|
||||
let datasource |
|
||||
|
|
||||
function checkValid(evt) { |
|
||||
const datasourceName = evt.target.value |
|
||||
if ( |
|
||||
$backendUiStore.datasources?.some( |
|
||||
datasource => datasource.name === datasourceName |
|
||||
) |
|
||||
) { |
|
||||
error = `Datasource with name ${tableName} already exists. Please choose another name.` |
|
||||
return |
|
||||
} |
|
||||
error = "" |
|
||||
} |
|
||||
|
|
||||
async function saveDatasource() { |
|
||||
const { type, ...config } = integration |
|
||||
|
|
||||
// Create datasource |
|
||||
await backendUiStore.actions.datasources.save({ |
|
||||
name, |
|
||||
source: type, |
|
||||
config, |
|
||||
}) |
|
||||
notifier.success(`Datasource ${name} created successfully.`) |
|
||||
analytics.captureEvent("Datasource Created", { name }) |
|
||||
|
|
||||
// Navigate to new datasource |
|
||||
$goto(`./datasource/${datasource._id}`) |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<ModalContent |
|
||||
title="Create Datasource" |
|
||||
confirmText="Create" |
|
||||
onConfirm={saveDatasource} |
|
||||
disabled={error || !name}> |
|
||||
<Input |
|
||||
data-cy="datasource-name-input" |
|
||||
thin |
|
||||
label="Datasource Name" |
|
||||
on:input={checkValid} |
|
||||
bind:value={name} |
|
||||
{error} /> |
|
||||
<Label grey extraSmall>Create Integrated Table from External Source</Label> |
|
||||
<TableIntegrationMenu bind:integration /> |
|
||||
</ModalContent> |
|
||||
Loading…
Reference in new issue