Delay rendering blocks until the schema has been attempted to be loaded
This commit is contained in:
Andrew Kingston
parent
58e0daeb8c
commit
3a8e217bb7
|
|
@ -45,6 +45,7 @@
|
||||||
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)
|
||||||
|
|
@ -113,101 +114,104 @@
|
||||||
if (dataSource) {
|
if (dataSource) {
|
||||||
schema = await fetchDatasourceSchema(dataSource)
|
schema = await fetchDatasourceSchema(dataSource)
|
||||||
}
|
}
|
||||||
|
schemaLoaded = true
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Block>
|
{#if schemaLoaded}
|
||||||
<div class="card-list" use:styleable={$component.styles}>
|
<Block>
|
||||||
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
|
<div class="card-list" use:styleable={$component.styles}>
|
||||||
{#if title || enrichedSearchColumns?.length || showTitleButton}
|
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
|
||||||
<div class="header" class:mobile={$context.device.mobile}>
|
{#if title || enrichedSearchColumns?.length || showTitleButton}
|
||||||
<div class="title">
|
<div class="header" class:mobile={$context.device.mobile}>
|
||||||
<Heading>{title || ""}</Heading>
|
<div class="title">
|
||||||
|
<Heading>{title || ""}</Heading>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
{#if enrichedSearchColumns?.length}
|
||||||
|
<div
|
||||||
|
class="search"
|
||||||
|
style="--cols:{enrichedSearchColumns?.length}"
|
||||||
|
>
|
||||||
|
{#each enrichedSearchColumns as column}
|
||||||
|
<BlockComponent
|
||||||
|
type={column.componentType}
|
||||||
|
props={{
|
||||||
|
field: column.name,
|
||||||
|
placeholder: column.name,
|
||||||
|
text: column.name,
|
||||||
|
autoWidth: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if showTitleButton}
|
||||||
|
<BlockComponent
|
||||||
|
type="button"
|
||||||
|
props={{
|
||||||
|
onClick: titleButtonAction,
|
||||||
|
text: titleButtonText,
|
||||||
|
type: "cta",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
{/if}
|
||||||
{#if enrichedSearchColumns?.length}
|
|
||||||
<div
|
|
||||||
class="search"
|
|
||||||
style="--cols:{enrichedSearchColumns?.length}"
|
|
||||||
>
|
|
||||||
{#each enrichedSearchColumns as column}
|
|
||||||
<BlockComponent
|
|
||||||
type={column.componentType}
|
|
||||||
props={{
|
|
||||||
field: column.name,
|
|
||||||
placeholder: column.name,
|
|
||||||
text: column.name,
|
|
||||||
autoWidth: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if showTitleButton}
|
|
||||||
<BlockComponent
|
|
||||||
type="button"
|
|
||||||
props={{
|
|
||||||
onClick: titleButtonAction,
|
|
||||||
text: titleButtonText,
|
|
||||||
type: "cta",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<BlockComponent
|
|
||||||
type="dataprovider"
|
|
||||||
bind:id={dataProviderId}
|
|
||||||
props={{
|
|
||||||
dataSource,
|
|
||||||
filter: enrichedFilter,
|
|
||||||
sortColumn,
|
|
||||||
sortOrder,
|
|
||||||
paginate,
|
|
||||||
limit,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<BlockComponent
|
<BlockComponent
|
||||||
type="repeater"
|
type="dataprovider"
|
||||||
bind:id={repeaterId}
|
bind:id={dataProviderId}
|
||||||
context="repeater"
|
|
||||||
props={{
|
props={{
|
||||||
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
|
dataSource,
|
||||||
direction: "row",
|
filter: enrichedFilter,
|
||||||
hAlign: "stretch",
|
sortColumn,
|
||||||
vAlign: "top",
|
sortOrder,
|
||||||
gap: "M",
|
paginate,
|
||||||
noRowsMessage: "No rows found",
|
limit,
|
||||||
}}
|
|
||||||
styles={{
|
|
||||||
display: "grid",
|
|
||||||
"grid-template-columns": `repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr))`,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<BlockComponent
|
<BlockComponent
|
||||||
type="spectrumcard"
|
type="repeater"
|
||||||
|
bind:id={repeaterId}
|
||||||
|
context="repeater"
|
||||||
props={{
|
props={{
|
||||||
title: cardTitle,
|
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
|
||||||
subtitle: cardSubtitle,
|
direction: "row",
|
||||||
description: cardDescription,
|
hAlign: "stretch",
|
||||||
imageURL: cardImageURL,
|
vAlign: "top",
|
||||||
horizontal: cardHorizontal,
|
gap: "M",
|
||||||
showButton: showCardButton,
|
noRowsMessage: "No rows found",
|
||||||
buttonText: cardButtonText,
|
|
||||||
buttonOnClick: cardButtonOnClick,
|
|
||||||
linkURL: fullCardURL,
|
|
||||||
linkPeek: cardPeek,
|
|
||||||
}}
|
}}
|
||||||
styles={{
|
styles={{
|
||||||
width: "auto",
|
display: "grid",
|
||||||
|
"grid-template-columns": `repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr))`,
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<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={{
|
||||||
|
width: "auto",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</BlockComponent>
|
||||||
</BlockComponent>
|
</BlockComponent>
|
||||||
</BlockComponent>
|
</BlockComponent>
|
||||||
</BlockComponent>
|
</div>
|
||||||
</div>
|
</Block>
|
||||||
</Block>
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.header {
|
.header {
|
||||||
|
|
|
||||||
|
|
@ -96,47 +96,47 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Block>
|
{#if schemaLoaded}
|
||||||
<div class={size} use:styleable={$component.styles}>
|
<Block>
|
||||||
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
|
<div class={size} use:styleable={$component.styles}>
|
||||||
{#if title || enrichedSearchColumns?.length || showTitleButton}
|
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
|
||||||
<div class="header" class:mobile={$context.device.mobile}>
|
{#if title || enrichedSearchColumns?.length || showTitleButton}
|
||||||
<div class="title">
|
<div class="header" class:mobile={$context.device.mobile}>
|
||||||
<Heading>{title || ""}</Heading>
|
<div class="title">
|
||||||
|
<Heading>{title || ""}</Heading>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
{#if enrichedSearchColumns?.length}
|
||||||
|
<div
|
||||||
|
class="search"
|
||||||
|
style="--cols:{enrichedSearchColumns?.length}"
|
||||||
|
>
|
||||||
|
{#each enrichedSearchColumns as column}
|
||||||
|
<BlockComponent
|
||||||
|
type={column.componentType}
|
||||||
|
props={{
|
||||||
|
field: column.name,
|
||||||
|
placeholder: column.name,
|
||||||
|
text: column.name,
|
||||||
|
autoWidth: true,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if showTitleButton}
|
||||||
|
<BlockComponent
|
||||||
|
type="button"
|
||||||
|
props={{
|
||||||
|
onClick: titleButtonAction,
|
||||||
|
text: titleButtonText,
|
||||||
|
type: "cta",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
{/if}
|
||||||
{#if enrichedSearchColumns?.length}
|
|
||||||
<div
|
|
||||||
class="search"
|
|
||||||
style="--cols:{enrichedSearchColumns?.length}"
|
|
||||||
>
|
|
||||||
{#each enrichedSearchColumns as column}
|
|
||||||
<BlockComponent
|
|
||||||
type={column.componentType}
|
|
||||||
props={{
|
|
||||||
field: column.name,
|
|
||||||
placeholder: column.name,
|
|
||||||
text: column.name,
|
|
||||||
autoWidth: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if showTitleButton}
|
|
||||||
<BlockComponent
|
|
||||||
type="button"
|
|
||||||
props={{
|
|
||||||
onClick: titleButtonAction,
|
|
||||||
text: titleButtonText,
|
|
||||||
type: "cta",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if schema}
|
|
||||||
<BlockComponent
|
<BlockComponent
|
||||||
type="dataprovider"
|
type="dataprovider"
|
||||||
bind:id={dataProviderId}
|
bind:id={dataProviderId}
|
||||||
|
|
@ -165,10 +165,10 @@
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</BlockComponent>
|
</BlockComponent>
|
||||||
{/if}
|
</BlockComponent>
|
||||||
</BlockComponent>
|
</div>
|
||||||
</div>
|
</Block>
|
||||||
</Block>
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.header {
|
.header {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue