diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js index 401ccfcc79..65e4f70e65 100644 --- a/packages/client/src/store/builder.js +++ b/packages/client/src/store/builder.js @@ -28,6 +28,26 @@ const findComponentById = (component, componentId) => { return null } +const findComponentIdPath = (component, componentId, path = []) => { + if (!component || !componentId) { + return null + } + path = [...path, component._id] + if (component._id === componentId) { + return path + } + if (!component._children?.length) { + return null + } + for (let child of component._children) { + const result = findComponentIdPath(child, componentId, path) + if (result) { + return result + } + } + return null +} + const createBuilderStore = () => { const initialState = { inBuilder: false, @@ -37,6 +57,7 @@ const createBuilderStore = () => { selectedComponentId: null, previewId: null, previewType: null, + selectedPath: [], } const writableStore = writable(initialState) const derivedStore = derived(writableStore, $state => { @@ -47,10 +68,15 @@ const createBuilderStore = () => { const prefix = "@budibase/standard-components/" const type = component?._component?.replace(prefix, "") const definition = type ? Manifest[type] : null + + // Derive the selected component path + const path = findComponentIdPath(asset.props, selectedComponentId) || [] + return { ...$state, selectedComponent: component, selectedComponentDefinition: definition, + selectedComponentPath: path, } }) @@ -67,6 +93,14 @@ const createBuilderStore = () => { notifyLoaded: () => { dispatchEvent("preview-loaded") }, + setSelectedPath: path => { + console.log("set to ") + console.log(path) + writableStore.update(state => { + state.selectedPath = path + return state + }) + }, } return { ...writableStore, diff --git a/packages/standard-components/src/forms/FormStep.svelte b/packages/standard-components/src/forms/FormStep.svelte index e048a600f5..4806cfc86c 100644 --- a/packages/standard-components/src/forms/FormStep.svelte +++ b/packages/standard-components/src/forms/FormStep.svelte @@ -4,7 +4,7 @@ export let step - const { styleable } = getContext("sdk") + const { styleable, builderStore } = getContext("sdk") const component = getContext("component") const formContext = getContext("form") @@ -13,6 +13,19 @@ $: formState = formContext?.formState $: currentStep = $formState?.currentStep + + // If in the builder preview, show this step if it is selected + $: { + if (step && formContext && $builderStore.inBuilder) { + console.log($builderStore.selectedPath) + console.log($component.id) + + if ($builderStore.selectedComponentPath?.includes($component.id)) { + console.log("selecting " + step) + formContext.formApi.setStep(step) + } + } + } {#if !formContext} diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte index c8b76a7200..774419bbdc 100644 --- a/packages/standard-components/src/forms/InnerForm.svelte +++ b/packages/standard-components/src/forms/InnerForm.svelte @@ -146,6 +146,11 @@ prevStep: () => { currentStep.update(step => Math.max(1, step - 1)) }, + setStep: step => { + if (step) { + currentStep.set(step) + } + }, } // Creates an API for a specific field