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.
|
* 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) {
|
if (!asset || !componentId) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
|
@ -236,13 +241,30 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
|
||||||
// Get the component tree leading up to this component, ignoring the component
|
// Get the component tree leading up to this component, ignoring the component
|
||||||
// itself
|
// itself
|
||||||
const path = findComponentPath(asset.props, componentId)
|
const path = findComponentPath(asset.props, componentId)
|
||||||
path.pop()
|
if (!options?.includeSelf) {
|
||||||
|
path.pop()
|
||||||
|
}
|
||||||
|
|
||||||
// Filter by only data provider components
|
// Find matching contexts and generate bindings
|
||||||
return path.filter(component => {
|
let providers = []
|
||||||
|
path.forEach(component => {
|
||||||
const def = store.actions.components.getDefinition(component._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>
|
<script>
|
||||||
import { Select, Label } from "@budibase/bbui"
|
import { Select, Label } from "@budibase/bbui"
|
||||||
import { currentAsset, store } from "builderStore"
|
import { currentAsset, store } from "builderStore"
|
||||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
import { getActionProviders } from "builderStore/dataBinding"
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
export let bindings = []
|
export let bindings = []
|
||||||
|
export let nested
|
||||||
|
|
||||||
$: actionProviders = getActionProviderComponents(
|
$: actionProviders = getActionProviders(
|
||||||
$currentAsset,
|
$currentAsset,
|
||||||
$store.selectedComponentId,
|
$store.selectedComponentId,
|
||||||
"ChangeFormStep"
|
"ChangeFormStep",
|
||||||
|
{ includeSelf: nested }
|
||||||
)
|
)
|
||||||
|
|
||||||
const typeOptions = [
|
const typeOptions = [
|
||||||
|
@ -46,8 +48,8 @@
|
||||||
placeholder={null}
|
placeholder={null}
|
||||||
bind:value={parameters.componentId}
|
bind:value={parameters.componentId}
|
||||||
options={actionProviders}
|
options={actionProviders}
|
||||||
getOptionLabel={x => x._instanceName}
|
getOptionLabel={x => x.readableBinding}
|
||||||
getOptionValue={x => x._id}
|
getOptionValue={x => x.runtimeBinding}
|
||||||
/>
|
/>
|
||||||
<Label small>Step</Label>
|
<Label small>Step</Label>
|
||||||
<Select bind:value={parameters.type} options={typeOptions} />
|
<Select bind:value={parameters.type} options={typeOptions} />
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
import { Select, Label } from "@budibase/bbui"
|
import { Select, Label } from "@budibase/bbui"
|
||||||
import { currentAsset, store } from "builderStore"
|
import { currentAsset, store } from "builderStore"
|
||||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
import { getActionProviders } from "builderStore/dataBinding"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
|
export let nested
|
||||||
|
|
||||||
$: actionProviders = getActionProviderComponents(
|
$: actionProviders = getActionProviders(
|
||||||
$currentAsset,
|
$currentAsset,
|
||||||
$store.selectedComponentId,
|
$store.selectedComponentId,
|
||||||
"ClearForm"
|
"ClearForm",
|
||||||
|
{ includeSelf: nested }
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -17,8 +19,8 @@
|
||||||
<Select
|
<Select
|
||||||
bind:value={parameters.componentId}
|
bind:value={parameters.componentId}
|
||||||
options={actionProviders}
|
options={actionProviders}
|
||||||
getOptionLabel={x => x._instanceName}
|
getOptionLabel={x => x.readableBinding}
|
||||||
getOptionValue={x => x._id}
|
getOptionValue={x => x.runtimeBinding}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
import { Select, Label } from "@budibase/bbui"
|
import { Select, Label } from "@budibase/bbui"
|
||||||
import { currentAsset, store } from "builderStore"
|
import { currentAsset, store } from "builderStore"
|
||||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
import { getActionProviders } from "builderStore/dataBinding"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
|
export let nested
|
||||||
|
|
||||||
$: actionProviders = getActionProviderComponents(
|
$: actionProviders = getActionProviders(
|
||||||
$currentAsset,
|
$currentAsset,
|
||||||
$store.selectedComponentId,
|
$store.selectedComponentId,
|
||||||
"RefreshDatasource"
|
"RefreshDatasource",
|
||||||
|
{ includeSelf: nested }
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -17,8 +19,8 @@
|
||||||
<Select
|
<Select
|
||||||
bind:value={parameters.componentId}
|
bind:value={parameters.componentId}
|
||||||
options={actionProviders}
|
options={actionProviders}
|
||||||
getOptionLabel={x => x._instanceName}
|
getOptionLabel={x => x.readableBinding}
|
||||||
getOptionValue={x => x._id}
|
getOptionValue={x => x.runtimeBinding}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,22 +1,36 @@
|
||||||
<script>
|
<script>
|
||||||
import { currentAsset, store } from "builderStore"
|
import { currentAsset, store } from "builderStore"
|
||||||
import { Label, Combobox, Select } from "@budibase/bbui"
|
import { Label, Combobox, Select } from "@budibase/bbui"
|
||||||
import {
|
import { getActionProviders, buildFormSchema } from "builderStore/dataBinding"
|
||||||
getActionProviderComponents,
|
|
||||||
buildFormSchema,
|
|
||||||
} from "builderStore/dataBinding"
|
|
||||||
import { findComponent } from "builderStore/componentUtils"
|
import { findComponent } from "builderStore/componentUtils"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
|
export let nested
|
||||||
|
|
||||||
$: formComponent = findComponent($currentAsset.props, parameters.componentId)
|
$: formComponent = getFormComponent(
|
||||||
|
$currentAsset.props,
|
||||||
|
parameters.componentId
|
||||||
|
)
|
||||||
$: formSchema = buildFormSchema(formComponent)
|
$: formSchema = buildFormSchema(formComponent)
|
||||||
$: fieldOptions = Object.keys(formSchema || {})
|
$: fieldOptions = Object.keys(formSchema || {})
|
||||||
$: actionProviders = getActionProviderComponents(
|
$: actionProviders = getActionProviders(
|
||||||
$currentAsset,
|
$currentAsset,
|
||||||
$store.selectedComponentId,
|
$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>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
|
@ -24,8 +38,8 @@
|
||||||
<Select
|
<Select
|
||||||
bind:value={parameters.componentId}
|
bind:value={parameters.componentId}
|
||||||
options={actionProviders}
|
options={actionProviders}
|
||||||
getOptionLabel={x => x._instanceName}
|
getOptionLabel={x => x.readableBinding}
|
||||||
getOptionValue={x => x._id}
|
getOptionValue={x => x.runtimeBinding}
|
||||||
/>
|
/>
|
||||||
<Label small>Field</Label>
|
<Label small>Field</Label>
|
||||||
<Combobox bind:value={parameters.field} options={fieldOptions} />
|
<Combobox bind:value={parameters.field} options={fieldOptions} />
|
||||||
|
|
|
@ -3,14 +3,12 @@
|
||||||
import { onMount } from "svelte"
|
import { onMount } from "svelte"
|
||||||
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
|
||||||
import { currentAsset, store } from "builderStore"
|
import { currentAsset, store } from "builderStore"
|
||||||
import {
|
import { getActionProviders, buildFormSchema } from "builderStore/dataBinding"
|
||||||
getActionProviderComponents,
|
|
||||||
buildFormSchema,
|
|
||||||
} from "builderStore/dataBinding"
|
|
||||||
import { findComponent } from "builderStore/componentUtils"
|
import { findComponent } from "builderStore/componentUtils"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
export let bindings = []
|
export let bindings = []
|
||||||
|
export let nested
|
||||||
|
|
||||||
const typeOptions = [
|
const typeOptions = [
|
||||||
{
|
{
|
||||||
|
@ -23,15 +21,31 @@
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
$: formComponent = findComponent($currentAsset.props, parameters.componentId)
|
$: formComponent = getFormComponent(
|
||||||
|
$currentAsset.props,
|
||||||
|
parameters.componentId
|
||||||
|
)
|
||||||
$: formSchema = buildFormSchema(formComponent)
|
$: formSchema = buildFormSchema(formComponent)
|
||||||
$: fieldOptions = Object.keys(formSchema || {})
|
$: fieldOptions = Object.keys(formSchema || {})
|
||||||
$: actionProviders = getActionProviderComponents(
|
$: actionProviders = getActionProviders(
|
||||||
$currentAsset,
|
$currentAsset,
|
||||||
$store.selectedComponentId,
|
$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(() => {
|
onMount(() => {
|
||||||
if (!parameters.type) {
|
if (!parameters.type) {
|
||||||
parameters.type = "set"
|
parameters.type = "set"
|
||||||
|
@ -44,8 +58,8 @@
|
||||||
<Select
|
<Select
|
||||||
bind:value={parameters.componentId}
|
bind:value={parameters.componentId}
|
||||||
options={actionProviders}
|
options={actionProviders}
|
||||||
getOptionLabel={x => x._instanceName}
|
getOptionLabel={x => x.readableBinding}
|
||||||
getOptionValue={x => x._id}
|
getOptionValue={x => x.runtimeBinding}
|
||||||
/>
|
/>
|
||||||
<Label small>Type</Label>
|
<Label small>Type</Label>
|
||||||
<Select
|
<Select
|
||||||
|
|
|
@ -1,14 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
import { Select, Label } from "@budibase/bbui"
|
import { Select, Label } from "@budibase/bbui"
|
||||||
import { currentAsset, store } from "builderStore"
|
import { currentAsset, store } from "builderStore"
|
||||||
import { getActionProviderComponents } from "builderStore/dataBinding"
|
import { getActionProviders } from "builderStore/dataBinding"
|
||||||
|
|
||||||
export let parameters
|
export let parameters
|
||||||
|
export let nested
|
||||||
|
|
||||||
$: actionProviders = getActionProviderComponents(
|
$: actionProviders = getActionProviders(
|
||||||
$currentAsset,
|
$currentAsset,
|
||||||
$store.selectedComponentId,
|
$store.selectedComponentId,
|
||||||
"ValidateForm"
|
"ValidateForm",
|
||||||
|
{ includeSelf: nested }
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -17,8 +19,8 @@
|
||||||
<Select
|
<Select
|
||||||
bind:value={parameters.componentId}
|
bind:value={parameters.componentId}
|
||||||
options={actionProviders}
|
options={actionProviders}
|
||||||
getOptionLabel={x => x._instanceName}
|
getOptionLabel={x => x.readableBinding}
|
||||||
getOptionValue={x => x._id}
|
getOptionValue={x => x.runtimeBinding}
|
||||||
/>
|
/>
|
||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue