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

Convert IntegrationForm to use Layout component

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

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

@ -1,19 +1,17 @@
<script> <script>
import { Label, Input, Spacer } from "@budibase/bbui" import { Label, Input, Layout } from "@budibase/bbui"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import { capitalise } from "../../../../helpers" import { capitalise } from "../../../../helpers"
export let integration export let integration
export let schema export let schema
let unsaved = false
</script> </script>
<form> <form>
<Layout gap="S">
{#each Object.keys(schema) as configKey} {#each Object.keys(schema) as configKey}
{#if schema[configKey].type === "object"} {#if schema[configKey].type === "object"}
<Label>{capitalise(configKey)}</Label> <Label>{capitalise(configKey)}</Label>
<Spacer small />
<KeyValueBuilder <KeyValueBuilder
defaults={schema[configKey].default} defaults={schema[configKey].default}
bind:object={integration[configKey]} bind:object={integration[configKey]}
@ -29,6 +27,7 @@
</div> </div>
{/if} {/if}
{/each} {/each}
</Layout>
</form> </form>
<style> <style>
@ -37,6 +36,5 @@
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;
margin-bottom: var(--spacing-m);
} }
</style> </style>

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

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

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

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