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

Skeleton Fixes (#8845)

This commit is contained in:
Gerard Burns 2022-12-02 09:24:05 +00:00 committed by GitHub
parent 8fab962e38
commit 66a00a677a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 265 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/components/Component.svelte
View File

@ -479,6 +479,7 @@
definition.name !== "Screenslot" && definition.name !== "Screenslot" &&
children.length === 0 && children.length === 0 &&
!instance._blockElementHasChildren && !instance._blockElementHasChildren &&
!definition.block &&
definition.skeleton !== false definition.skeleton !== false
</script> </script>

232
packages/client/src/components/app/blocks/CardsBlock.svelte
View File

@ -36,7 +36,6 @@
let dataProviderId let dataProviderId
let repeaterId let repeaterId
let schema let schema
let schemaLoaded = false
$: fetchSchema(dataSource) $: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema) $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
@ -75,138 +74,135 @@
enrichRelationships: true, enrichRelationships: true,
}) })
} }
schemaLoaded = true
} }
</script> </script>
{#if schemaLoaded} <Block>
<Block> <BlockComponent
<BlockComponent type="form"
type="form" bind:id={formId}
bind:id={formId} props={{ dataSource, disableValidation: true }}
props={{ dataSource, disableValidation: true }} >
> {#if title || enrichedSearchColumns?.length || showTitleButton}
{#if title || enrichedSearchColumns?.length || showTitleButton} <BlockComponent
type="container"
props={{
direction: "row",
hAlign: "stretch",
vAlign: "middle",
gap: "M",
wrap: true,
}}
styles={{
normal: {
"margin-bottom": "20px",
},
}}
order={0}
>
<BlockComponent
type="heading"
props={{
text: title,
}}
order={0}
/>
<BlockComponent <BlockComponent
type="container" type="container"
props={{ props={{
direction: "row", direction: "row",
hAlign: "stretch", hAlign: "left",
vAlign: "middle", vAlign: "middle",
gap: "M", gap: "M",
wrap: true, wrap: true,
}} }}
order={1}
>
{#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx}
<BlockComponent
type={column.componentType}
props={{
field: column.name,
placeholder: column.name,
text: column.name,
autoWidth: true,
}}
order={idx}
styles={{
normal: {
width: "192px",
},
}}
/>
{/each}
{/if}
{#if showTitleButton}
<BlockComponent
type="button"
props={{
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}
order={enrichedSearchColumns?.length ?? 0}
/>
{/if}
</BlockComponent>
</BlockComponent>
{/if}
<BlockComponent
type="dataprovider"
bind:id={dataProviderId}
props={{
dataSource,
filter: enrichedFilter,
sortColumn,
sortOrder,
paginate,
limit,
}}
order={1}
>
<BlockComponent
type="repeater"
bind:id={repeaterId}
context="repeater"
props={{
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
direction: "row",
hAlign: "stretch",
vAlign: "top",
gap: "M",
noRowsMessage: "No rows found",
}}
styles={{
custom: `display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`,
}}
order={0}
>
<BlockComponent
type="spectrumcard"
props={{
title: cardTitle,
subtitle: cardSubtitle,
description: cardDescription,
imageURL: cardImageURL,
horizontal: cardHorizontal,
showButton: showCardButton,
buttonText: cardButtonText,
buttonOnClick: cardButtonOnClick,
linkURL: fullCardURL,
linkPeek: cardPeek,
}}
styles={{ styles={{
normal: { normal: {
"margin-bottom": "20px", width: "auto",
}, },
}} }}
order={0} order={0}
> />
<BlockComponent
type="heading"
props={{
text: title,
}}
order={0}
/>
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "left",
vAlign: "middle",
gap: "M",
wrap: true,
}}
order={1}
>
{#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx}
<BlockComponent
type={column.componentType}
props={{
field: column.name,
placeholder: column.name,
text: column.name,
autoWidth: true,
}}
order={idx}
styles={{
normal: {
width: "192px",
},
}}
/>
{/each}
{/if}
{#if showTitleButton}
<BlockComponent
type="button"
props={{
onClick: titleButtonAction,
text: titleButtonText,
type: "cta",
}}
order={enrichedSearchColumns?.length ?? 0}
/>
{/if}
</BlockComponent>
</BlockComponent>
{/if}
<BlockComponent
type="dataprovider"
bind:id={dataProviderId}
props={{
dataSource,
filter: enrichedFilter,
sortColumn,
sortOrder,
paginate,
limit,
}}
order={1}
>
<BlockComponent
type="repeater"
bind:id={repeaterId}
context="repeater"
props={{
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
direction: "row",
hAlign: "stretch",
vAlign: "top",
gap: "M",
noRowsMessage: "No rows found",
}}
styles={{
custom: `display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`,
}}
order={0}
>
<BlockComponent
type="spectrumcard"
props={{
title: cardTitle,
subtitle: cardSubtitle,
description: cardDescription,
imageURL: cardImageURL,
horizontal: cardHorizontal,
showButton: showCardButton,
buttonText: cardButtonText,
buttonOnClick: cardButtonOnClick,
linkURL: fullCardURL,
linkPeek: cardPeek,
}}
styles={{
normal: {
width: "auto",
},
}}
order={0}
/>
</BlockComponent>
</BlockComponent> </BlockComponent>
</BlockComponent> </BlockComponent>
</Block> </BlockComponent>
{/if} </Block>

272
packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -36,7 +36,6 @@
let newRowSidePanelId let newRowSidePanelId
let schema let schema
let primaryDisplay let primaryDisplay
let schemaLoaded = false
$: fetchSchema(dataSource) $: fetchSchema(dataSource)
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema) $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
@ -89,7 +88,6 @@
enrichRelationships: true, enrichRelationships: true,
}) })
} }
schemaLoaded = true
} }
const getNormalFields = schema => { const getNormalFields = schema => {
@ -113,162 +111,160 @@
} }
</script> </script>
{#if schemaLoaded} <Block>
<Block> <BlockComponent
<BlockComponent type="form"
type="form" bind:id={formId}
bind:id={formId} props={{
props={{ dataSource,
dataSource, disableValidation: true,
disableValidation: true, editAutoColumns: true,
editAutoColumns: true, size,
size, }}
}} >
> {#if title || enrichedSearchColumns?.length || showTitleButton}
{#if title || enrichedSearchColumns?.length || showTitleButton} <BlockComponent
type="container"
props={{
direction: "row",
hAlign: "stretch",
vAlign: "middle",
gap: "M",
wrap: true,
}}
styles={{
normal: {
"margin-bottom": "20px",
},
}}
order={0}
>
<BlockComponent
type="heading"
props={{
text: title,
}}
order={0}
/>
<BlockComponent <BlockComponent
type="container" type="container"
props={{ props={{
direction: "row", direction: "row",
hAlign: "stretch", hAlign: "left",
vAlign: "middle", vAlign: "center",
gap: "M", gap: "M",
wrap: true, wrap: true,
}} }}
styles={{ order={1}
normal: {
"margin-bottom": "20px",
},
}}
order={0}
> >
<BlockComponent {#if enrichedSearchColumns?.length}
type="heading" {#each enrichedSearchColumns as column, idx}
props={{
text: title,
}}
order={0}
/>
<BlockComponent
type="container"
props={{
direction: "row",
hAlign: "left",
vAlign: "center",
gap: "M",
wrap: true,
}}
order={1}
>
{#if enrichedSearchColumns?.length}
{#each enrichedSearchColumns as column, idx}
<BlockComponent
type={column.componentType}
props={{
field: column.name,
placeholder: column.name,
text: column.name,
autoWidth: true,
}}
styles={{
normal: {
width: "192px",
},
}}
order={idx}
/>
{/each}
{/if}
{#if showTitleButton}
<BlockComponent <BlockComponent
type="button" type={column.componentType}
props={{ props={{
onClick: buttonClickActions, field: column.name,
text: titleButtonText, placeholder: column.name,
type: "cta", text: column.name,
autoWidth: true,
}} }}
order={enrichedSearchColumns?.length ?? 0} styles={{
normal: {
width: "192px",
},
}}
order={idx}
/> />
{/if} {/each}
</BlockComponent> {/if}
{#if showTitleButton}
<BlockComponent
type="button"
props={{
onClick: buttonClickActions,
text: titleButtonText,
type: "cta",
}}
order={enrichedSearchColumns?.length ?? 0}
/>
{/if}
</BlockComponent> </BlockComponent>
{/if} </BlockComponent>
{/if}
<BlockComponent
type="dataprovider"
bind:id={dataProviderId}
props={{
dataSource,
filter: enrichedFilter,
sortColumn: sortColumn || primaryDisplay,
sortOrder,
paginate,
limit: rowCount,
}}
order={1}
>
<BlockComponent <BlockComponent
type="dataprovider" type="table"
bind:id={dataProviderId} context="table"
props={{ props={{
dataSource, dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
filter: enrichedFilter, columns: tableColumns,
sortColumn: sortColumn || primaryDisplay, rowCount,
sortOrder, quiet,
paginate, compact,
limit: rowCount, allowSelectRows,
size,
onClick: rowClickActions,
}} }}
order={1} />
</BlockComponent>
{#if clickBehaviour === "details"}
<BlockComponent
name="Details side panel"
type="sidepanel"
bind:id={detailsSidePanelId}
context="details-side-panel"
order={2}
> >
<BlockComponent <BlockComponent
type="table" name="Details form block"
context="table" type="formblock"
bind:id={detailsFormBlockId}
props={{ props={{
dataProvider: `{{ literal ${safe(dataProviderId)} }}`, dataSource,
columns: tableColumns, showSaveButton: true,
rowCount, showDeleteButton: true,
quiet, actionType: "Update",
compact, rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
allowSelectRows, fields: normalFields,
size, title: editTitle,
onClick: rowClickActions, labelPosition: "left",
}} }}
/> />
</BlockComponent> </BlockComponent>
{#if clickBehaviour === "details"} {/if}
{#if showTitleButton && titleButtonClickBehaviour === "new"}
<BlockComponent
name="New row side panel"
type="sidepanel"
bind:id={newRowSidePanelId}
context="new-side-panel"
order={3}
>
<BlockComponent <BlockComponent
name="Details side panel" name="New row form block"
type="sidepanel" type="formblock"
bind:id={detailsSidePanelId} props={{
context="details-side-panel" dataSource,
order={2} showSaveButton: true,
> showDeleteButton: false,
<BlockComponent actionType: "Create",
name="Details form block" fields: normalFields,
type="formblock" title: "Create Row",
bind:id={detailsFormBlockId} labelPosition: "left",
props={{ }}
dataSource, />
showSaveButton: true, </BlockComponent>
showDeleteButton: true, {/if}
actionType: "Update", </BlockComponent>
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`, </Block>
fields: normalFields,
title: editTitle,
labelPosition: "left",
}}
/>
</BlockComponent>
{/if}
{#if showTitleButton && titleButtonClickBehaviour === "new"}
<BlockComponent
name="New row side panel"
type="sidepanel"
bind:id={newRowSidePanelId}
context="new-side-panel"
order={3}
>
<BlockComponent
name="New row form block"
type="formblock"
props={{
dataSource,
showSaveButton: true,
showDeleteButton: false,
actionType: "Create",
fields: normalFields,
title: "Create Row",
labelPosition: "left",
}}
/>
</BlockComponent>
{/if}
</BlockComponent>
</Block>
{/if}

38
packages/client/src/components/app/forms/Form.svelte
View File

@ -20,7 +20,6 @@
const context = getContext("context") const context = getContext("context")
const { API, fetchDatasourceSchema } = getContext("sdk") const { API, fetchDatasourceSchema } = getContext("sdk")
let loaded = false
let schema let schema
let table let table
@ -49,9 +48,6 @@
// Fetches the form schema from this form's dataSource // Fetches the form schema from this form's dataSource
const fetchSchema = async dataSource => { const fetchSchema = async dataSource => {
schema = (await fetchDatasourceSchema(dataSource)) || {} schema = (await fetchDatasourceSchema(dataSource)) || {}
if (!loaded) {
loaded = true
}
} }
const fetchTable = async dataSource => { const fetchTable = async dataSource => {
@ -70,21 +66,19 @@
) )
</script> </script>
{#if loaded} {#key resetKey}
{#key resetKey} <InnerForm
<InnerForm {dataSource}
{dataSource} {theme}
{theme} {size}
{size} {disabled}
{disabled} {actionType}
{actionType} {schema}
{schema} {table}
{table} {initialValues}
{initialValues} {disableValidation}
{disableValidation} {editAutoColumns}
{editAutoColumns} >
> <slot />
<slot /> </InnerForm>
</InnerForm> {/key}
{/key}
{/if}