Fixes for rendering issues for Multistep in client and builder
This commit is contained in:
parent
eedefbb69d
commit
327d9ecb86
1 changed files with 69 additions and 68 deletions
|
@ -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,77 +124,76 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#key $currentStep}
|
<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
|
||||||
<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
|
<BlockComponent
|
||||||
<BlockComponent
|
type="form"
|
||||||
type="form"
|
context="form"
|
||||||
context="form"
|
props={{
|
||||||
props={{
|
dataSource,
|
||||||
dataSource,
|
actionType: actionType === "Create" ? "Create" : "Update",
|
||||||
actionType: actionType === "Create" ? "Create" : "Update",
|
readonly: actionType === "View",
|
||||||
readonly: actionType === "View",
|
}}
|
||||||
}}
|
styles={{
|
||||||
styles={{
|
normal: {
|
||||||
normal: {
|
width: "600px",
|
||||||
width: "600px",
|
"margin-left": "auto",
|
||||||
"margin-left": "auto",
|
"margin-right": "auto",
|
||||||
"margin-right": "auto",
|
},
|
||||||
},
|
}}
|
||||||
}}
|
>
|
||||||
>
|
{#each enrichedSteps as step, stepIdx (step._stepId)}
|
||||||
{#each enrichedSteps as step, stepIdx}
|
<BlockComponent
|
||||||
|
type="formstep"
|
||||||
|
props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
|
||||||
|
>
|
||||||
<BlockComponent
|
<BlockComponent
|
||||||
type="formstep"
|
type="container"
|
||||||
props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
|
props={{
|
||||||
|
gap: "M",
|
||||||
|
direction: "column",
|
||||||
|
hAlign: "stretch",
|
||||||
|
vAlign: "top",
|
||||||
|
size: "shrink",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<BlockComponent
|
<BlockComponent type="container" order={0}>
|
||||||
type="container"
|
<BlockComponent type="heading" props={{ text: step.title }} />
|
||||||
props={{
|
|
||||||
gap: "M",
|
|
||||||
direction: "column",
|
|
||||||
hAlign: "stretch",
|
|
||||||
vAlign: "top",
|
|
||||||
size: "shrink",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<BlockComponent type="container" order={0}>
|
|
||||||
<BlockComponent type="heading" props={{ text: step.title }} />
|
|
||||||
</BlockComponent>
|
|
||||||
<BlockComponent type="text" props={{ text: step.desc }} order={1} />
|
|
||||||
<BlockComponent type="container" order={2}>
|
|
||||||
<div
|
|
||||||
class="form-block fields"
|
|
||||||
class:mobile={$context.device.mobile}
|
|
||||||
>
|
|
||||||
{#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
|
|
||||||
{#if getComponentForField(field)}
|
|
||||||
<BlockComponent
|
|
||||||
type={getComponentForField(field)}
|
|
||||||
props={getPropsForField(field)}
|
|
||||||
order={fieldIdx}
|
|
||||||
interactive
|
|
||||||
name={field.field}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</BlockComponent>
|
|
||||||
<BlockComponent
|
|
||||||
type="buttongroup"
|
|
||||||
props={{ buttons: step.buttons }}
|
|
||||||
styles={{
|
|
||||||
normal: {
|
|
||||||
"margin-top": "16px",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
order={3}
|
|
||||||
/>
|
|
||||||
</BlockComponent>
|
</BlockComponent>
|
||||||
|
<BlockComponent type="text" props={{ text: step.desc }} order={1} />
|
||||||
|
|
||||||
|
<BlockComponent type="container" order={2}>
|
||||||
|
<div
|
||||||
|
class="form-block fields"
|
||||||
|
class:mobile={$context.device.mobile}
|
||||||
|
>
|
||||||
|
{#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
|
||||||
|
{#if getComponentForField(field)}
|
||||||
|
<BlockComponent
|
||||||
|
type={getComponentForField(field)}
|
||||||
|
props={getPropsForField(field)}
|
||||||
|
order={fieldIdx}
|
||||||
|
interactive
|
||||||
|
name={field.field}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</BlockComponent>
|
||||||
|
<BlockComponent
|
||||||
|
type="buttongroup"
|
||||||
|
props={{ buttons: step.buttons }}
|
||||||
|
styles={{
|
||||||
|
normal: {
|
||||||
|
"margin-top": "16px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
order={3}
|
||||||
|
/>
|
||||||
</BlockComponent>
|
</BlockComponent>
|
||||||
{/each}
|
</BlockComponent>
|
||||||
</BlockComponent>
|
{/each}
|
||||||
</FormBlockWrapper>
|
</BlockComponent>
|
||||||
{/key}
|
</FormBlockWrapper>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.fields {
|
.fields {
|
||||||
|
|
Loading…
Reference in a new issue