CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-29 08:41:16 +13:00
Code Issues Projects Releases Wiki Activity

Convert IntegrationForm to use Layout component

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-28 14:33:40 +02:00
parent 4c776f68f2
commit 6beb6c4f44
3 changed files with 58 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View file

@ -1,34 +1,33 @@
<script>
import { Label, Input, Spacer } from "@budibase/bbui"
import { Label, Input, Layout } from "@budibase/bbui"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import { capitalise } from "../../../../helpers"
export let integration
export let schema
let unsaved = false
</script>
<form>
{#each Object.keys(schema) as configKey}
{#if schema[configKey].type === "object"}
<Label>{capitalise(configKey)}</Label>
<Spacer small />
<KeyValueBuilder
defaults={schema[configKey].default}
bind:object={integration[configKey]}
/>
{:else}
<div class="form-row">
<Layout gap="S">
{#each Object.keys(schema) as configKey}
{#if schema[configKey].type === "object"}
<Label>{capitalise(configKey)}</Label>
<Input
type={schema[configKey].type}
on:change
bind:value={integration[configKey]}
<KeyValueBuilder
defaults={schema[configKey].default}
bind:object={integration[configKey]}
/>
</div>
{/if}
{/each}
{:else}
<div class="form-row">
<Label>{capitalise(configKey)}</Label>
<Input
type={schema[configKey].type}
on:change
bind:value={integration[configKey]}
/>
</div>
{/if}
{/each}
</Layout>
</form>
<style>
@ -37,6 +36,5 @@
grid-template-columns: 20% 1fr;
grid-gap: var(--spacing-l);
align-items: center;
margin-bottom: var(--spacing-m);
}
</style>

14
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

@ -1,7 +1,13 @@
<script>
import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action"
import { Icon, Button, Popover, Spacer } from "@budibase/bbui"
import {
Icon,
Button,
Popover,
Spacer,
DrawerContentWithSidebar,
} from "@budibase/bbui"
import actionTypes from "./actions"
import { generate } from "shortid"
@ -68,8 +74,8 @@
}
</script>
<div class="actions-container">
<div class="actions-list">
<DrawerContentWithSidebar>
<div class="actions-list" slot="sidebar">
<div>
<div bind:this={addActionButton}>
<Button wide secondary on:click={addActionDropdown.show}>
@ -127,6 +133,8 @@
</div>
{/if}
</div>
</DrawerContentWithSidebar>
<div class="actions-container">
<div class="action-config">
{#if selectedAction}
<div class="selected-action-container">

58
packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

@ -1,6 +1,6 @@
<script>
import { goto, beforeUrlChange } from "@roxi/routify"
import { Button, Heading, Body, Spacer, Divider } from "@budibase/bbui"
import { Button, Heading, Body, Divider, Layout } from "@budibase/bbui"
import { datasources, integrations, queries } from "stores/backend"
import { notifications } from "@budibase/bbui"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
@ -43,39 +43,36 @@
{#if datasource}
<section>
<Spacer extraLarge />
<header>
<svelte:component
this={ICONS[datasource.source]}
height="26"
width="26"
/>
<Heading m>{datasource.name}</Heading>
</header>
<Body small grey lh>{integration.description}</Body>
<Spacer extraLarge />
<Divider />
<Spacer extraLarge />
<div class="container">
<div class="config-header">
<Heading s>Configuration</Heading>
<Button secondary on:click={saveDatasource}>Save</Button>
</div>
<Body s>Connect your database to Budibase using the config below.</Body>
<Spacer extraLarge />
<IntegrationConfigForm
schema={integration.datasource}
integration={datasource.config}
on:change={setUnsaved}
/>
<Spacer extraLarge />
<Layout>
<header>
<svelte:component
this={ICONS[datasource.source]}
height="26"
width="26"
/>
<Heading m>{datasource.name}</Heading>
</header>
<Body small grey lh>{integration.description}</Body>
<Divider />
<div class="container">
<div class="config-header">
<Heading s>Configuration</Heading>
<Button secondary on:click={saveDatasource}>Save</Button>
</div>
<Body size="S"
>Connect your database to Budibase using the config below.</Body
>
<IntegrationConfigForm
schema={integration.datasource}
integration={datasource.config}
on:change={setUnsaved}
/>
</div>
<Divider />
<Spacer extraLarge />
<div class="query-header">
<Heading s>Queries</Heading>
<Button secondary on:click={() => $goto("./new")}>Add Query</Button>
</div>
<Spacer extraLarge />
<div class="query-list">
{#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
<div class="query-list-item" on:click={() => onClickQuery(query)}>
@ -85,7 +82,7 @@
</div>
{/each}
</div>
</div>
</Layout>
</section>
{/if}
@ -109,6 +106,7 @@
}
.container {
width: 100%;
border-radius: var(--border-radius-m);
margin: 0 auto;
}