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

Delay rendering blocks until the schema has been attempted to be loaded

pull/3962/head
Andrew Kingston 5 years ago
parent
492c2acc9a
commit
38ef2deb90
2 changed files with 128 additions and 124 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      packages/client/src/components/app/blocks/CardsBlock.svelte
  2. 88
      packages/client/src/components/app/blocks/TableBlock.svelte

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

@ -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 {

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

@ -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 {

Write Preview
Loading…
Cancel
Save