forked from tsai/budibase
Andrew Kingston
5 years ago
3 changed files with 179 additions and 0 deletions
@ -0,0 +1,152 @@ |
|||||
|
<script> |
||||
|
import { Select, Label, Body, Checkbox, Input } from "@budibase/bbui" |
||||
|
import { store, currentAsset } from "builderStore" |
||||
|
import { tables } from "stores/backend" |
||||
|
import { |
||||
|
getContextProviderComponents, |
||||
|
getSchemaForDatasource, |
||||
|
} from "builderStore/dataBinding" |
||||
|
import SaveFields from "./SaveFields.svelte" |
||||
|
|
||||
|
export let parameters |
||||
|
export let bindings = [] |
||||
|
|
||||
|
$: formComponents = getContextProviderComponents( |
||||
|
$currentAsset, |
||||
|
$store.selectedComponentId, |
||||
|
"form" |
||||
|
) |
||||
|
$: schemaComponents = getContextProviderComponents( |
||||
|
$currentAsset, |
||||
|
$store.selectedComponentId, |
||||
|
"schema" |
||||
|
) |
||||
|
$: providerOptions = getProviderOptions(formComponents, schemaComponents) |
||||
|
$: schemaFields = getSchemaFields($currentAsset, parameters?.tableId) |
||||
|
$: tableOptions = $tables.list || [] |
||||
|
|
||||
|
// Gets a context definition of a certain type from a component definition |
||||
|
const extractComponentContext = (component, contextType) => { |
||||
|
const def = store.actions.components.getDefinition(component?._component) |
||||
|
if (!def) { |
||||
|
return null |
||||
|
} |
||||
|
const contexts = Array.isArray(def.context) ? def.context : [def.context] |
||||
|
return contexts.find(context => context?.type === contextType) |
||||
|
} |
||||
|
|
||||
|
// Gets options for valid context keys which provide valid data to submit |
||||
|
const getProviderOptions = (formComponents, schemaComponents) => { |
||||
|
const formContexts = formComponents.map(component => ({ |
||||
|
component, |
||||
|
context: extractComponentContext(component, "form"), |
||||
|
})) |
||||
|
const schemaContexts = schemaComponents.map(component => ({ |
||||
|
component, |
||||
|
context: extractComponentContext(component, "schema"), |
||||
|
})) |
||||
|
const allContexts = formContexts.concat(schemaContexts) |
||||
|
|
||||
|
return allContexts.map(({ component, context }) => { |
||||
|
let runtimeBinding = component._id |
||||
|
if (context.suffix) { |
||||
|
runtimeBinding += `-${context.suffix}` |
||||
|
} |
||||
|
return { |
||||
|
label: component._instanceName, |
||||
|
value: runtimeBinding, |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const getSchemaFields = (asset, tableId) => { |
||||
|
const { schema } = getSchemaForDatasource(asset, { type: "table", tableId }) |
||||
|
delete schema._id |
||||
|
delete schema._rev |
||||
|
return Object.values(schema || {}) |
||||
|
} |
||||
|
|
||||
|
const onFieldsChanged = e => { |
||||
|
parameters.fields = e.detail |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div class="root"> |
||||
|
<Body size="S"> |
||||
|
Choose the data source that provides the row you would like to duplicate. |
||||
|
<br /> |
||||
|
You can always add or override fields manually. |
||||
|
</Body> |
||||
|
|
||||
|
<div class="params"> |
||||
|
<Label small>Data Source</Label> |
||||
|
<Select |
||||
|
bind:value={parameters.providerId} |
||||
|
options={providerOptions} |
||||
|
placeholder="None" |
||||
|
/> |
||||
|
|
||||
|
<Label small>Duplicate to Table</Label> |
||||
|
<Select |
||||
|
bind:value={parameters.tableId} |
||||
|
options={tableOptions} |
||||
|
getOptionLabel={option => option.name} |
||||
|
getOptionValue={option => option._id} |
||||
|
/> |
||||
|
|
||||
|
<Label small /> |
||||
|
<Checkbox text="Require confirmation" bind:value={parameters.confirm} /> |
||||
|
|
||||
|
{#if parameters.confirm} |
||||
|
<Label small>Confirm text</Label> |
||||
|
<Input |
||||
|
placeholder="Are you sure you want to duplicate this row?" |
||||
|
bind:value={parameters.confirmText} |
||||
|
/> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
{#if parameters.tableId} |
||||
|
<div class="fields"> |
||||
|
<SaveFields |
||||
|
parameterFields={parameters.fields} |
||||
|
{schemaFields} |
||||
|
on:change={onFieldsChanged} |
||||
|
{bindings} |
||||
|
/> |
||||
|
</div> |
||||
|
{/if} |
||||
|
</div> |
||||
|
|
||||
|
<style> |
||||
|
.root { |
||||
|
width: 100%; |
||||
|
max-width: 800px; |
||||
|
margin: 0 auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-start; |
||||
|
align-items: stretch; |
||||
|
gap: var(--spacing-xl); |
||||
|
} |
||||
|
|
||||
|
.root :global(p) { |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.params { |
||||
|
display: grid; |
||||
|
column-gap: var(--spacing-l); |
||||
|
row-gap: var(--spacing-s); |
||||
|
grid-template-columns: 100px 1fr; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.fields { |
||||
|
display: grid; |
||||
|
column-gap: var(--spacing-l); |
||||
|
row-gap: var(--spacing-s); |
||||
|
grid-template-columns: 100px 1fr auto 1fr auto; |
||||
|
align-items: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue