Skeleton Fixes (#8845)
This commit is contained in:
Gerard Burns
GitHub
parent
9c923c7f8c
commit
6e4f560948
4 changed files with 265 additions and 278 deletions
|
|
@ -479,6 +479,7 @@
|
|||
definition.name !== "Screenslot" &&
|
||||
children.length === 0 &&
|
||||
!instance._blockElementHasChildren &&
|
||||
!definition.block &&
|
||||
definition.skeleton !== false
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
let dataProviderId
|
||||
let repeaterId
|
||||
let schema
|
||||
let schemaLoaded = false
|
||||
|
||||
$: fetchSchema(dataSource)
|
||||
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
|
||||
|
|
@ -75,138 +74,135 @@
|
|||
enrichRelationships: true,
|
||||
})
|
||||
}
|
||||
schemaLoaded = true
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if schemaLoaded}
|
||||
<Block>
|
||||
<BlockComponent
|
||||
type="form"
|
||||
bind:id={formId}
|
||||
props={{ dataSource, disableValidation: true }}
|
||||
>
|
||||
{#if title || enrichedSearchColumns?.length || showTitleButton}
|
||||
<Block>
|
||||
<BlockComponent
|
||||
type="form"
|
||||
bind:id={formId}
|
||||
props={{ dataSource, disableValidation: true }}
|
||||
>
|
||||
{#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
|
||||
type="container"
|
||||
props={{
|
||||
direction: "row",
|
||||
hAlign: "stretch",
|
||||
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: {
|
||||
"margin-bottom": "20px",
|
||||
width: "auto",
|
||||
},
|
||||
}}
|
||||
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>
|
||||
</Block>
|
||||
{/if}
|
||||
</BlockComponent>
|
||||
</Block>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
let newRowSidePanelId
|
||||
let schema
|
||||
let primaryDisplay
|
||||
let schemaLoaded = false
|
||||
|
||||
$: fetchSchema(dataSource)
|
||||
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
|
||||
|
|
@ -89,7 +88,6 @@
|
|||
enrichRelationships: true,
|
||||
})
|
||||
}
|
||||
schemaLoaded = true
|
||||
}
|
||||
|
||||
const getNormalFields = schema => {
|
||||
|
|
@ -113,162 +111,160 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if schemaLoaded}
|
||||
<Block>
|
||||
<BlockComponent
|
||||
type="form"
|
||||
bind:id={formId}
|
||||
props={{
|
||||
dataSource,
|
||||
disableValidation: true,
|
||||
editAutoColumns: true,
|
||||
size,
|
||||
}}
|
||||
>
|
||||
{#if title || enrichedSearchColumns?.length || showTitleButton}
|
||||
<Block>
|
||||
<BlockComponent
|
||||
type="form"
|
||||
bind:id={formId}
|
||||
props={{
|
||||
dataSource,
|
||||
disableValidation: true,
|
||||
editAutoColumns: true,
|
||||
size,
|
||||
}}
|
||||
>
|
||||
{#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
|
||||
type="container"
|
||||
props={{
|
||||
direction: "row",
|
||||
hAlign: "stretch",
|
||||
vAlign: "middle",
|
||||
hAlign: "left",
|
||||
vAlign: "center",
|
||||
gap: "M",
|
||||
wrap: true,
|
||||
}}
|
||||
styles={{
|
||||
normal: {
|
||||
"margin-bottom": "20px",
|
||||
},
|
||||
}}
|
||||
order={0}
|
||||
order={1}
|
||||
>
|
||||
<BlockComponent
|
||||
type="heading"
|
||||
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}
|
||||
{#if enrichedSearchColumns?.length}
|
||||
{#each enrichedSearchColumns as column, idx}
|
||||
<BlockComponent
|
||||
type="button"
|
||||
type={column.componentType}
|
||||
props={{
|
||||
onClick: buttonClickActions,
|
||||
text: titleButtonText,
|
||||
type: "cta",
|
||||
field: column.name,
|
||||
placeholder: column.name,
|
||||
text: column.name,
|
||||
autoWidth: true,
|
||||
}}
|
||||
order={enrichedSearchColumns?.length ?? 0}
|
||||
styles={{
|
||||
normal: {
|
||||
width: "192px",
|
||||
},
|
||||
}}
|
||||
order={idx}
|
||||
/>
|
||||
{/if}
|
||||
</BlockComponent>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if showTitleButton}
|
||||
<BlockComponent
|
||||
type="button"
|
||||
props={{
|
||||
onClick: buttonClickActions,
|
||||
text: titleButtonText,
|
||||
type: "cta",
|
||||
}}
|
||||
order={enrichedSearchColumns?.length ?? 0}
|
||||
/>
|
||||
{/if}
|
||||
</BlockComponent>
|
||||
{/if}
|
||||
</BlockComponent>
|
||||
{/if}
|
||||
<BlockComponent
|
||||
type="dataprovider"
|
||||
bind:id={dataProviderId}
|
||||
props={{
|
||||
dataSource,
|
||||
filter: enrichedFilter,
|
||||
sortColumn: sortColumn || primaryDisplay,
|
||||
sortOrder,
|
||||
paginate,
|
||||
limit: rowCount,
|
||||
}}
|
||||
order={1}
|
||||
>
|
||||
<BlockComponent
|
||||
type="dataprovider"
|
||||
bind:id={dataProviderId}
|
||||
type="table"
|
||||
context="table"
|
||||
props={{
|
||||
dataSource,
|
||||
filter: enrichedFilter,
|
||||
sortColumn: sortColumn || primaryDisplay,
|
||||
sortOrder,
|
||||
paginate,
|
||||
limit: rowCount,
|
||||
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
|
||||
columns: tableColumns,
|
||||
rowCount,
|
||||
quiet,
|
||||
compact,
|
||||
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
|
||||
type="table"
|
||||
context="table"
|
||||
name="Details form block"
|
||||
type="formblock"
|
||||
bind:id={detailsFormBlockId}
|
||||
props={{
|
||||
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
|
||||
columns: tableColumns,
|
||||
rowCount,
|
||||
quiet,
|
||||
compact,
|
||||
allowSelectRows,
|
||||
size,
|
||||
onClick: rowClickActions,
|
||||
dataSource,
|
||||
showSaveButton: true,
|
||||
showDeleteButton: true,
|
||||
actionType: "Update",
|
||||
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
|
||||
fields: normalFields,
|
||||
title: editTitle,
|
||||
labelPosition: "left",
|
||||
}}
|
||||
/>
|
||||
</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
|
||||
name="Details side panel"
|
||||
type="sidepanel"
|
||||
bind:id={detailsSidePanelId}
|
||||
context="details-side-panel"
|
||||
order={2}
|
||||
>
|
||||
<BlockComponent
|
||||
name="Details form block"
|
||||
type="formblock"
|
||||
bind:id={detailsFormBlockId}
|
||||
props={{
|
||||
dataSource,
|
||||
showSaveButton: true,
|
||||
showDeleteButton: true,
|
||||
actionType: "Update",
|
||||
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
|
||||
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}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
const context = getContext("context")
|
||||
const { API, fetchDatasourceSchema } = getContext("sdk")
|
||||
|
||||
let loaded = false
|
||||
let schema
|
||||
let table
|
||||
|
||||
|
|
@ -49,9 +48,6 @@
|
|||
// Fetches the form schema from this form's dataSource
|
||||
const fetchSchema = async dataSource => {
|
||||
schema = (await fetchDatasourceSchema(dataSource)) || {}
|
||||
if (!loaded) {
|
||||
loaded = true
|
||||
}
|
||||
}
|
||||
|
||||
const fetchTable = async dataSource => {
|
||||
|
|
@ -70,21 +66,19 @@
|
|||
)
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
{#key resetKey}
|
||||
<InnerForm
|
||||
{dataSource}
|
||||
{theme}
|
||||
{size}
|
||||
{disabled}
|
||||
{actionType}
|
||||
{schema}
|
||||
{table}
|
||||
{initialValues}
|
||||
{disableValidation}
|
||||
{editAutoColumns}
|
||||
>
|
||||
<slot />
|
||||
</InnerForm>
|
||||
{/key}
|
||||
{/if}
|
||||
{#key resetKey}
|
||||
<InnerForm
|
||||
{dataSource}
|
||||
{theme}
|
||||
{size}
|
||||
{disabled}
|
||||
{actionType}
|
||||
{schema}
|
||||
{table}
|
||||
{initialValues}
|
||||
{disableValidation}
|
||||
{editAutoColumns}
|
||||
>
|
||||
<slot />
|
||||
</InnerForm>
|
||||
{/key}
|
||||
|
|
|
|||
Loading…
Reference in a new issue