CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-03 02:55:14 +12:00
Code Issues Projects Releases Wiki Activity

Update SaveRow button action to take an explicit table ID, making it more much flexible. Fix massive width

Browse source
This commit is contained in:
Andrew Kingston 2021-03-19 14:05:28 +00:00
parent fecf35dc46
commit ea68885581
1 changed files with 35 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
View file

@ -1,9 +1,8 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import { Select, Label, Body } from "@budibase/bbui"
import { store, currentAsset, backendUiStore } from "builderStore"
import {
getDataProviderComponents,
getDatasourceForProvider,
getSchemaForDatasource,
} from "builderStore/dataBinding"
import SaveFields from "./SaveFields.svelte"
@ -14,14 +13,11 @@
$currentAsset,
$store.selectedComponentId
)
$: providerComponent = dataProviderComponents.find(
provider => provider._id === parameters.providerId
)
$: schemaFields = getSchemaFields($currentAsset, providerComponent)
$: schemaFields = getSchemaFields(parameters?.tableId)
$: tableOptions = $backendUiStore.tables || []
const getSchemaFields = (asset, component) => {
const datasource = getDatasourceForProvider(asset, component)
const { schema } = getSchemaForDatasource(datasource)
const getSchemaFields = tableId => {
const { schema } = getSchemaForDatasource({ type: "table", tableId })
return Object.values(schema || {})
}
@ -31,31 +27,48 @@
</script>
<div class="root">
{#if !dataProviderComponents.length}
<div class="cannot-use">
Save Row can only be used within a component that provides data, such as a
Repeater
</div>
{:else}
<Label small>Datasource</Label>
<Body small grey>
Choosing a Data Source will automatically use the data it provides, but it's
optional.<br />
You can always add or override fields manually.
</Body>
<div class="fields">
<Label small>Data Source</Label>
<Select thin secondary bind:value={parameters.providerId}>
<option value="" />
<option value="">None</option>
{#each dataProviderComponents as provider}
<option value={provider._id}>{provider._instanceName}</option>
{/each}
</Select>
{#if parameters.providerId}
<Label small>Table</Label>
<Select thin secondary bind:value={parameters.tableId}>
<option value="" />
{#each tableOptions as table}
<option value={table._id}>{table.name}</option>
{/each}
</Select>
{#if parameters.tableId}
<SaveFields
parameterFields={parameters.fields}
{schemaFields}
on:change={onFieldsChanged} />
{/if}
{/if}
</div>
</div>
<style>
.root {
max-width: 800px;
margin: 0 auto;
}
.root :global(p) {
line-height: 1.5;
}
.fields {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
@ -63,14 +76,9 @@
align-items: baseline;
}
.root :global(> div:nth-child(2)) {
.fields :global(> div:nth-child(2)),
.fields :global(> div:nth-child(4)) {
grid-column-start: 2;
grid-column-end: 6;
}
.cannot-use {
color: var(--red);
font-size: var(--font-size-s);
margin: auto;
}
</style>