Update button actions to support suffixed actions from blocks
This commit is contained in:
parent
1f3e56fdc1
commit
28208550c6
7 changed files with 101 additions and 43 deletions
|
@ -228,7 +228,12 @@ export const getContextProviderComponents = (
|
|||
/**
|
||||
* Gets all data provider components above a component.
|
||||
*/
|
||||
export const getActionProviderComponents = (asset, componentId, actionType) => {
|
||||
export const getActionProviders = (
|
||||
asset,
|
||||
componentId,
|
||||
actionType,
|
||||
options = { includeSelf: false }
|
||||
) => {
|
||||
if (!asset || !componentId) {
|
||||
return []
|
||||
}
|
||||
|
@ -236,13 +241,30 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
|
|||
// Get the component tree leading up to this component, ignoring the component
|
||||
// itself
|
||||
const path = findComponentPath(asset.props, componentId)
|
||||
if (!options?.includeSelf) {
|
||||
path.pop()
|
||||
}
|
||||
|
||||
// Filter by only data provider components
|
||||
return path.filter(component => {
|
||||
// Find matching contexts and generate bindings
|
||||
let providers = []
|
||||
path.forEach(component => {
|
||||
const def = store.actions.components.getDefinition(component._component)
|
||||
return def?.actions?.includes(actionType)
|
||||
const actions = (def?.actions || []).map(action => {
|
||||
return typeof action === "string" ? { type: action } : action
|
||||
})
|
||||
const action = actions.find(x => x.type === actionType)
|
||||
if (action) {
|
||||
let runtimeBinding = component._id
|
||||
if (action.suffix) {
|
||||
runtimeBinding += `-${action.suffix}`
|
||||
}
|
||||
providers.push({
|
||||
readableBinding: component._instanceName,
|
||||
runtimeBinding,
|
||||
})
|
||||
}
|
||||
})
|
||||
return providers
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1,17 +1,19 @@
|
|||
<script>
|
||||
import { Select, Label } from "@budibase/bbui"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
||||
import { getActionProviders } from "builderStore/dataBinding"
|
||||
import { onMount } from "svelte"
|
||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||
|
||||
export let parameters
|
||||
export let bindings = []
|
||||
export let nested
|
||||
|
||||
$: actionProviders = getActionProviderComponents(
|
||||
$: actionProviders = getActionProviders(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId,
|
||||
"ChangeFormStep"
|
||||
"ChangeFormStep",
|
||||
{ includeSelf: nested }
|
||||
)
|
||||
|
||||
const typeOptions = [
|
||||
|
@ -46,8 +48,8 @@
|
|||
placeholder={null}
|
||||
bind:value={parameters.componentId}
|
||||
options={actionProviders}
|
||||
getOptionLabel={x => x._instanceName}
|
||||
getOptionValue={x => x._id}
|
||||
getOptionLabel={x => x.readableBinding}
|
||||
getOptionValue={x => x.runtimeBinding}
|
||||
/>
|
||||
<Label small>Step</Label>
|
||||
<Select bind:value={parameters.type} options={typeOptions} />
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
<script>
|
||||
import { Select, Label } from "@budibase/bbui"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
||||
import { getActionProviders } from "builderStore/dataBinding"
|
||||
|
||||
export let parameters
|
||||
export let nested
|
||||
|
||||
$: actionProviders = getActionProviderComponents(
|
||||
$: actionProviders = getActionProviders(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId,
|
||||
"ClearForm"
|
||||
"ClearForm",
|
||||
{ includeSelf: nested }
|
||||
)
|
||||
</script>
|
||||
|
||||
|
@ -17,8 +19,8 @@
|
|||
<Select
|
||||
bind:value={parameters.componentId}
|
||||
options={actionProviders}
|
||||
getOptionLabel={x => x._instanceName}
|
||||
getOptionValue={x => x._id}
|
||||
getOptionLabel={x => x.readableBinding}
|
||||
getOptionValue={x => x.runtimeBinding}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
<script>
|
||||
import { Select, Label } from "@budibase/bbui"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
||||
import { getActionProviders } from "builderStore/dataBinding"
|
||||
|
||||
export let parameters
|
||||
export let nested
|
||||
|
||||
$: actionProviders = getActionProviderComponents(
|
||||
$: actionProviders = getActionProviders(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId,
|
||||
"RefreshDatasource"
|
||||
"RefreshDatasource",
|
||||
{ includeSelf: nested }
|
||||
)
|
||||
</script>
|
||||
|
||||
|
@ -17,8 +19,8 @@
|
|||
<Select
|
||||
bind:value={parameters.componentId}
|
||||
options={actionProviders}
|
||||
getOptionLabel={x => x._instanceName}
|
||||
getOptionValue={x => x._id}
|
||||
getOptionLabel={x => x.readableBinding}
|
||||
getOptionValue={x => x.runtimeBinding}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -1,22 +1,36 @@
|
|||
<script>
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import { Label, Combobox, Select } from "@budibase/bbui"
|
||||
import {
|
||||
getActionProviderComponents,
|
||||
buildFormSchema,
|
||||
} from "builderStore/dataBinding"
|
||||
import { getActionProviders, buildFormSchema } from "builderStore/dataBinding"
|
||||
import { findComponent } from "builderStore/componentUtils"
|
||||
|
||||
export let parameters
|
||||
export let nested
|
||||
|
||||
$: formComponent = findComponent($currentAsset.props, parameters.componentId)
|
||||
$: formComponent = getFormComponent(
|
||||
$currentAsset.props,
|
||||
parameters.componentId
|
||||
)
|
||||
$: formSchema = buildFormSchema(formComponent)
|
||||
$: fieldOptions = Object.keys(formSchema || {})
|
||||
$: actionProviders = getActionProviderComponents(
|
||||
$: actionProviders = getActionProviders(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId,
|
||||
"ScrollTo"
|
||||
"ScrollTo",
|
||||
{ includeSelf: nested }
|
||||
)
|
||||
|
||||
const getFormComponent = (asset, id) => {
|
||||
let component = findComponent(asset, id)
|
||||
if (component) {
|
||||
return component
|
||||
}
|
||||
// Check for block component IDs, and use the block itself instead
|
||||
if (id?.includes("-")) {
|
||||
return findComponent(asset, id.split("-")[0])
|
||||
}
|
||||
return null
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
|
@ -24,8 +38,8 @@
|
|||
<Select
|
||||
bind:value={parameters.componentId}
|
||||
options={actionProviders}
|
||||
getOptionLabel={x => x._instanceName}
|
||||
getOptionValue={x => x._id}
|
||||
getOptionLabel={x => x.readableBinding}
|
||||
getOptionValue={x => x.runtimeBinding}
|
||||
/>
|
||||
<Label small>Field</Label>
|
||||
<Combobox bind:value={parameters.field} options={fieldOptions} />
|
||||
|
|
|
@ -3,14 +3,12 @@
|
|||
import { onMount } from "svelte"
|
||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import {
|
||||
getActionProviderComponents,
|
||||
buildFormSchema,
|
||||
} from "builderStore/dataBinding"
|
||||
import { getActionProviders, buildFormSchema } from "builderStore/dataBinding"
|
||||
import { findComponent } from "builderStore/componentUtils"
|
||||
|
||||
export let parameters
|
||||
export let bindings = []
|
||||
export let nested
|
||||
|
||||
const typeOptions = [
|
||||
{
|
||||
|
@ -23,15 +21,31 @@
|
|||
},
|
||||
]
|
||||
|
||||
$: formComponent = findComponent($currentAsset.props, parameters.componentId)
|
||||
$: formComponent = getFormComponent(
|
||||
$currentAsset.props,
|
||||
parameters.componentId
|
||||
)
|
||||
$: formSchema = buildFormSchema(formComponent)
|
||||
$: fieldOptions = Object.keys(formSchema || {})
|
||||
$: actionProviders = getActionProviderComponents(
|
||||
$: actionProviders = getActionProviders(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId,
|
||||
"ValidateForm"
|
||||
"ValidateForm",
|
||||
{ includeSelf: nested }
|
||||
)
|
||||
|
||||
const getFormComponent = (asset, id) => {
|
||||
let component = findComponent(asset, id)
|
||||
if (component) {
|
||||
return component
|
||||
}
|
||||
// Check for block component IDs, and use the block itself instead
|
||||
if (id?.includes("-")) {
|
||||
return findComponent(asset, id.split("-")[0])
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!parameters.type) {
|
||||
parameters.type = "set"
|
||||
|
@ -44,8 +58,8 @@
|
|||
<Select
|
||||
bind:value={parameters.componentId}
|
||||
options={actionProviders}
|
||||
getOptionLabel={x => x._instanceName}
|
||||
getOptionValue={x => x._id}
|
||||
getOptionLabel={x => x.readableBinding}
|
||||
getOptionValue={x => x.runtimeBinding}
|
||||
/>
|
||||
<Label small>Type</Label>
|
||||
<Select
|
||||
|
|
|
@ -1,14 +1,16 @@
|
|||
<script>
|
||||
import { Select, Label } from "@budibase/bbui"
|
||||
import { currentAsset, store } from "builderStore"
|
||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
||||
import { getActionProviders } from "builderStore/dataBinding"
|
||||
|
||||
export let parameters
|
||||
export let nested
|
||||
|
||||
$: actionProviders = getActionProviderComponents(
|
||||
$: actionProviders = getActionProviders(
|
||||
$currentAsset,
|
||||
$store.selectedComponentId,
|
||||
"ValidateForm"
|
||||
"ValidateForm",
|
||||
{ includeSelf: nested }
|
||||
)
|
||||
</script>
|
||||
|
||||
|
@ -17,8 +19,8 @@
|
|||
<Select
|
||||
bind:value={parameters.componentId}
|
||||
options={actionProviders}
|
||||
getOptionLabel={x => x._instanceName}
|
||||
getOptionValue={x => x._id}
|
||||
getOptionLabel={x => x.readableBinding}
|
||||
getOptionValue={x => x.runtimeBinding}
|
||||
/>
|
||||
<div />
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue