1
0
Fork 0
mirror of synced 2024-08-08 22:58:24 +12:00

Fixes for rendering issues for Multistep in client and builder

This commit is contained in:
Dean 2024-01-10 09:40:09 +00:00
parent eedefbb69d
commit 327d9ecb86

View file

@ -1,5 +1,6 @@
<script> <script>
import BlockComponent from "components/BlockComponent.svelte" import BlockComponent from "components/BlockComponent.svelte"
import { Helpers } from "@budibase/bbui"
import { getContext, setContext } from "svelte" import { getContext, setContext } from "svelte"
import { builderStore } from "stores" import { builderStore } from "stores"
import { Utils } from "@budibase/frontend-core" import { Utils } from "@budibase/frontend-core"
@ -39,7 +40,7 @@
let schema let schema
$: fetchSchema(dataSource) $: fetchSchema(dataSource)
$: enrichedSteps = enrichSteps(steps, schema, $component.id) $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
$: updateCurrentStep(enrichedSteps, $builderStore, $component) $: updateCurrentStep(enrichedSteps, $builderStore, $component)
const updateCurrentStep = (steps, builderStore, component) => { const updateCurrentStep = (steps, builderStore, component) => {
@ -113,6 +114,7 @@
dataSource, dataSource,
}) })
return { return {
_stepId: Helpers.uuid(),
fields: getDefaultFields(fields || [], schema), fields: getDefaultFields(fields || [], schema),
title: title ?? defaultProps.title, title: title ?? defaultProps.title,
desc, desc,
@ -122,7 +124,6 @@
} }
</script> </script>
{#key $currentStep}
<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}> <FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
<BlockComponent <BlockComponent
type="form" type="form"
@ -140,7 +141,7 @@
}, },
}} }}
> >
{#each enrichedSteps as step, stepIdx} {#each enrichedSteps as step, stepIdx (step._stepId)}
<BlockComponent <BlockComponent
type="formstep" type="formstep"
props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }} props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
@ -159,12 +160,13 @@
<BlockComponent type="heading" props={{ text: step.title }} /> <BlockComponent type="heading" props={{ text: step.title }} />
</BlockComponent> </BlockComponent>
<BlockComponent type="text" props={{ text: step.desc }} order={1} /> <BlockComponent type="text" props={{ text: step.desc }} order={1} />
<BlockComponent type="container" order={2}> <BlockComponent type="container" order={2}>
<div <div
class="form-block fields" class="form-block fields"
class:mobile={$context.device.mobile} class:mobile={$context.device.mobile}
> >
{#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)} {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
{#if getComponentForField(field)} {#if getComponentForField(field)}
<BlockComponent <BlockComponent
type={getComponentForField(field)} type={getComponentForField(field)}
@ -192,7 +194,6 @@
{/each} {/each}
</BlockComponent> </BlockComponent>
</FormBlockWrapper> </FormBlockWrapper>
{/key}
<style> <style>
.fields { .fields {