MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update form block to be ejectable

This commit is contained in:
Andrew Kingston 2022-08-25 09:24:27 +01:00
parent 8d76959f88
commit 10a251f1f6
2 changed files with 118 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/manifest.json
View File

@ -4402,6 +4402,7 @@
"type": "text", "type": "text",
"label": "Row ID", "label": "Row ID",
"key": "rowId", "key": "rowId",
"nested": true,
"dependsOn": { "dependsOn": {
"setting": "actionType", "setting": "actionType",
"value": "Create", "value": "Create",

208
packages/client/src/components/app/blocks/FormBlock.svelte
View File

@ -83,7 +83,7 @@
operator: "equal", operator: "equal",
type: "string", type: "string",
value: rowId, value: rowId,
valueType: "binding", valueType: "Binding",
}, },
] ]
// If we're using an "update" form, use the real data provider. If we're // If we're using an "update" form, use the real data provider. If we're
@ -93,6 +93,10 @@
actionType !== "Create" actionType !== "Create"
? `{{ literal ${safe(providerId)} }}` ? `{{ literal ${safe(providerId)} }}`
: { rows: [{}] } : { rows: [{}] }
$: renderDeleteButton = showDeleteButton && actionType === "Update"
$: renderSaveButton = showSaveButton && actionType !== "View"
$: renderButtons = renderDeleteButton || renderSaveButton
$: renderHeader = renderButtons || title
const fetchSchema = async () => { const fetchSchema = async () => {
schema = (await fetchDatasourceSchema(dataSource)) || {} schema = (await fetchDatasourceSchema(dataSource)) || {}
@ -108,110 +112,132 @@
</script> </script>
<Block> <Block>
<div use:styleable={$component.styles}> {#if fields?.length}
{#if fields?.length} <BlockComponent
type="dataprovider"
context="provider"
bind:id={providerId}
props={{
dataSource,
filter,
limit: rowId ? 1 : $builderStore.inBuilder ? 1 : 0,
paginate: false,
}}
>
<BlockComponent <BlockComponent
type="dataprovider" type="repeater"
context="provider" context="repeater"
bind:id={providerId} bind:id={repeaterId}
props={{ props={{
dataSource, dataProvider,
filter, noRowsMessage: "We couldn't find a row to display",
limit: rowId ? 1 : $builderStore.inBuilder ? 1 : 0,
paginate: false,
}} }}
> >
<BlockComponent <BlockComponent
type="repeater" type="form"
context="repeater"
bind:id={repeaterId}
props={{ props={{
dataProvider, actionType: actionType === "Create" ? "Create" : "Update",
noRowsMessage: "We couldn't find a row to display", dataSource,
size,
disabled: disabled || actionType === "View",
}} }}
context="form"
bind:id={formId}
> >
<BlockComponent <BlockComponent
type="form" type="container"
props={{ props={{
actionType: actionType === "Create" ? "Create" : "Update", direction: "column",
dataSource, hAlign: "stretch",
size, vAlign: "top",
disabled: disabled || actionType === "View", gap: "M",
}} }}
context="form"
bind:id={formId}
> >
<Layout noPadding gap="M"> {#if renderHeader}
<div class="title" class:with-text={!!title}> <BlockComponent
<BlockComponent type="heading" props={{ text: title || "" }} /> type="container"
<div class="buttons"> props={{
{#if showDeleteButton && actionType === "Update"} direction: "row",
<BlockComponent hAlign: title ? "stretch" : "right",
type="button" vAlign: "center",
props={{ gap: "M",
text: "Delete", wrap: true,
onClick: onDelete, }}
quiet: true, order={0}
type: "secondary", >
}} {#if title}
/> <BlockComponent
{/if} type="heading"
{#if showSaveButton && actionType !== "View"} props={{ text: title }}
<BlockComponent order={0}
type="button" />
props={{ {/if}
text: "Save", {#if renderButtons}
onClick: onSave, <BlockComponent
type: "cta", type="container"
}} props={{
/> direction: "row",
{/if} hAlign: "stretch",
</div> vAlign: "center",
</div> gap: "M",
<BlockComponent type="fieldgroup" props={{ labelPosition }}> wrap: true,
{#each fields as field} }}
{#if getComponentForField(field)} order={1}
<BlockComponent >
type={getComponentForField(field)} {#if renderDeleteButton}
props={{ <BlockComponent
field, type="button"
label: field, props={{
placeholder: field, text: "Delete",
disabled, onClick: onDelete,
}} quiet: true,
/> type: "secondary",
{/if} }}
{/each} order={0}
/>
{/if}
{#if renderSaveButton}
<BlockComponent
type="button"
props={{
text: "Save",
onClick: onSave,
type: "cta",
}}
order={1}
/>
{/if}
</BlockComponent>
{/if}
</BlockComponent> </BlockComponent>
</Layout> {/if}
<BlockComponent
type="fieldgroup"
props={{ labelPosition }}
order={1}
>
{#each fields as field, idx}
{#if getComponentForField(field)}
<BlockComponent
type={getComponentForField(field)}
props={{
field,
label: field,
placeholder: field,
disabled,
}}
order={idx}
/>
{/if}
{/each}
</BlockComponent>
</BlockComponent> </BlockComponent>
</BlockComponent> </BlockComponent>
</BlockComponent> </BlockComponent>
{:else} </BlockComponent>
<Placeholder {:else}
text="Choose your table and add some fields to your form to get started" <Placeholder
/> text="Choose your table and add some fields to your form to get started"
{/if} />
</div> {/if}
</Block> </Block>
<style>
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-m);
order: 2;
}
.title.with-text {
order: 0;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: var(--spacing-m);
}
</style>