diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js index 9a41ad2afc..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 getDataProviderComponents = (asset, componentId) => { +export const getContextProviderComponents = (asset, componentId, type) => { if (!asset || !componentId) { return [] } @@ -74,7 +74,18 @@ export const getDataProviderComponents = (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 }) } @@ -143,7 +154,7 @@ export const getDatasourceForProvider = (asset, component) => { */ const getContextBindings = (asset, componentId) => { // Extract any components which provide data contexts - const dataProviders = getDataProviderComponents(asset, componentId) + const dataProviders = getContextProviderComponents(asset, componentId) // Generate bindings for all matching components return getProviderContextBindings(asset, dataProviders) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte index bc15110c09..8f5f7ef807 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte @@ -1,5 +1,5 @@ -Define actions +Define actions Define what actions to run. - + 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 791380643f..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 @@ -3,7 +3,7 @@ import { store, currentAsset } from "builderStore" import { tables } from "stores/backend" import { - getDataProviderComponents, + getContextProviderComponents, getSchemaForDatasource, } from "builderStore/dataBinding" import SaveFields from "./SaveFields.svelte" @@ -11,13 +11,54 @@ export let parameters export let bindings = [] - $: dataProviderComponents = getDataProviderComponents( + $: 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 @@