2020-10-09 10:06:44 +13:00
|
|
|
<script>
|
2021-03-20 03:05:28 +13:00
|
|
|
import { Select, Label, Body } from "@budibase/bbui"
|
2021-04-02 06:00:46 +13:00
|
|
|
import { store, currentAsset } from "builderStore"
|
|
|
|
|
import { tables } from "stores/backend"
|
2021-01-20 06:38:24 +13:00
|
|
|
import {
|
|
|
|
|
getDataProviderComponents,
|
|
|
|
|
getSchemaForDatasource,
|
|
|
|
|
} from "builderStore/dataBinding"
|
2020-10-09 10:06:44 +13:00
|
|
|
import SaveFields from "./SaveFields.svelte"
|
|
|
|
|
|
|
|
|
|
export let parameters
|
|
|
|
|
|
2021-01-20 06:38:24 +13:00
|
|
|
$: dataProviderComponents = getDataProviderComponents(
|
2021-02-16 09:03:29 +13:00
|
|
|
$currentAsset,
|
2021-01-20 04:39:04 +13:00
|
|
|
$store.selectedComponentId
|
|
|
|
|
)
|
2021-03-20 03:05:28 +13:00
|
|
|
$: schemaFields = getSchemaFields(parameters?.tableId)
|
2021-04-02 06:00:46 +13:00
|
|
|
$: tableOptions = $tables || []
|
2020-10-09 10:06:44 +13:00
|
|
|
|
2021-03-20 03:05:28 +13:00
|
|
|
const getSchemaFields = tableId => {
|
|
|
|
|
const { schema } = getSchemaForDatasource({ type: "table", tableId })
|
2021-01-20 06:38:24 +13:00
|
|
|
return Object.values(schema || {})
|
2020-10-09 10:06:44 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const onFieldsChanged = e => {
|
|
|
|
|
parameters.fields = e.detail
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="root">
|
2021-03-20 03:05:28 +13:00
|
|
|
<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>
|
2021-02-19 06:44:56 +13:00
|
|
|
<Select thin secondary bind:value={parameters.providerId}>
|
2021-03-20 03:05:28 +13:00
|
|
|
<option value="">None</option>
|
2021-01-20 06:38:24 +13:00
|
|
|
{#each dataProviderComponents as provider}
|
|
|
|
|
<option value={provider._id}>{provider._instanceName}</option>
|
2020-10-09 10:06:44 +13:00
|
|
|
{/each}
|
|
|
|
|
</Select>
|
|
|
|
|
|
2021-03-20 03:05:28 +13:00
|
|
|
<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}
|
2021-01-20 07:51:51 +13:00
|
|
|
<SaveFields
|
|
|
|
|
parameterFields={parameters.fields}
|
|
|
|
|
{schemaFields}
|
2021-02-19 06:44:56 +13:00
|
|
|
on:change={onFieldsChanged} />
|
2021-01-20 07:51:51 +13:00
|
|
|
{/if}
|
2021-03-20 03:05:28 +13:00
|
|
|
</div>
|
2020-10-09 10:06:44 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.root {
|
2021-03-20 03:05:28 +13:00
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.root :global(p) {
|
|
|
|
|
line-height: 1.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fields {
|
2020-10-09 10:06:44 +13:00
|
|
|
display: grid;
|
2021-02-19 06:44:56 +13:00
|
|
|
column-gap: var(--spacing-l);
|
2020-10-09 10:06:44 +13:00
|
|
|
row-gap: var(--spacing-s);
|
|
|
|
|
grid-template-columns: auto 1fr auto 1fr auto;
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-20 03:05:28 +13:00
|
|
|
.fields :global(> div:nth-child(2)),
|
|
|
|
|
.fields :global(> div:nth-child(4)) {
|
2020-10-09 10:06:44 +13:00
|
|
|
grid-column-start: 2;
|
|
|
|
|
grid-column-end: 6;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
