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