diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index cb09b33970..b36613fbc5 100644 --- a/packages/builder/src/builderStore/dataBinding.js +++ b/packages/builder/src/builderStore/dataBinding.js @@ -61,7 +61,7 @@ export const getComponentBindableProperties = (asset, componentId) => { /** * Gets all data provider components above a component. */ -export const getContextProviderComponents = (asset, componentId) => { +export const getContextProviderComponents = (asset, componentId, type) => { if (!asset || !componentId) { return [] } @@ -74,7 +74,18 @@ export const getContextProviderComponents = (asset, componentId) => { // Filter by only data provider components return path.filter(component => { const def = store.actions.components.getDefinition(component._component) - return def?.context != null + if (!def?.context) { + return false + } + + // If no type specified, return anything that exposes context + if (!type) { + return true + } + + // Otherwise only match components with the specific context type + const contexts = Array.isArray(def.context) ? def.context : [def.context] + return contexts.find(context => context.type === type) != null }) } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte index d444f233db..55aac87cfd 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte @@ -11,13 +11,54 @@ export let parameters export let bindings = [] - $: dataProviderComponents = getContextProviderComponents( + $: formComponents = getContextProviderComponents( $currentAsset, - $store.selectedComponentId + $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 }) return Object.values(schema || {}) @@ -39,10 +80,8 @@