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

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

This commit is contained in:
Andrew Kingston 2021-03-19 14:05:28 +00:00
parent 5a891054cb
commit b4f9def495
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>