mirror of https://github.com/Budibase/budibase.git
mike12345567
5 years ago
40 changed files with 1354 additions and 190 deletions
@ -0,0 +1,12 @@ |
|||
<script> |
|||
import { getContext, setContext } from "svelte" |
|||
|
|||
const component = getContext("component") |
|||
|
|||
// We need to set a block context to know we're inside a block, but also |
|||
// to be able to reference the actual component ID of the block from |
|||
// any depth |
|||
setContext("block", { id: $component.id }) |
|||
</script> |
|||
|
|||
<slot /> |
|||
@ -0,0 +1,35 @@ |
|||
<script> |
|||
import { getContext } from "svelte" |
|||
import { generate } from "shortid" |
|||
import Component from "components/Component.svelte" |
|||
|
|||
export let type |
|||
export let props |
|||
export let styles |
|||
export let context |
|||
|
|||
// ID is only exposed as a prop so that it can be bound to from parent |
|||
// block components |
|||
export let id |
|||
|
|||
const block = getContext("block") |
|||
const rand = generate() |
|||
|
|||
// Create a fake component instance so that we can use the core Component |
|||
// to render this part of the block, taking advantage of binding enrichment |
|||
$: id = `${block.id}-${context ?? rand}` |
|||
$: instance = { |
|||
_component: `@budibase/standard-components/${type}`, |
|||
_id: id, |
|||
_styles: { |
|||
normal: { |
|||
...styles, |
|||
}, |
|||
}, |
|||
...props, |
|||
} |
|||
</script> |
|||
|
|||
<Component {instance}> |
|||
<slot /> |
|||
</Component> |
|||
@ -0,0 +1,237 @@ |
|||
<script> |
|||
import { onMount, getContext } from "svelte" |
|||
import Block from "components/Block.svelte" |
|||
import BlockComponent from "components/BlockComponent.svelte" |
|||
import { Heading } from "@budibase/bbui" |
|||
|
|||
export let title |
|||
export let dataSource |
|||
export let searchColumns |
|||
export let filter |
|||
export let sortColumn |
|||
export let sortOrder |
|||
export let paginate |
|||
export let limit |
|||
export let showTitleButton |
|||
export let titleButtonText |
|||
export let titleButtonOnClick |
|||
export let cardTitle |
|||
export let cardSubtitle |
|||
export let cardDescription |
|||
export let cardImageURL |
|||
export let cardHorizontal |
|||
export let showCardButton |
|||
export let cardButtonText |
|||
export let cardButtonOnClick |
|||
|
|||
const { API, styleable } = getContext("sdk") |
|||
const context = getContext("context") |
|||
const component = getContext("component") |
|||
const schemaComponentMap = { |
|||
string: "stringfield", |
|||
options: "optionsfield", |
|||
number: "numberfield", |
|||
datetime: "datetimefield", |
|||
boolean: "booleanfield", |
|||
} |
|||
|
|||
let formId |
|||
let dataProviderId |
|||
let schema |
|||
|
|||
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema) |
|||
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId) |
|||
$: cardWidth = cardHorizontal ? 420 : 300 |
|||
|
|||
// Enrich the default filter with the specified search fields |
|||
const enrichFilter = (filter, columns, formId) => { |
|||
let enrichedFilter = [...(filter || [])] |
|||
columns?.forEach(column => { |
|||
enrichedFilter.push({ |
|||
field: column.name, |
|||
operator: "equal", |
|||
type: "string", |
|||
valueType: "Binding", |
|||
value: `{{ [${formId}].[${column.name}] }}`, |
|||
}) |
|||
}) |
|||
return enrichedFilter |
|||
} |
|||
|
|||
// Determine data types for search fields and only use those that are valid |
|||
const enrichSearchColumns = (searchColumns, schema) => { |
|||
let enrichedColumns = [] |
|||
searchColumns?.forEach(column => { |
|||
const schemaType = schema?.[column]?.type |
|||
const componentType = schemaComponentMap[schemaType] |
|||
if (componentType) { |
|||
enrichedColumns.push({ |
|||
name: column, |
|||
componentType, |
|||
}) |
|||
} |
|||
}) |
|||
return enrichedColumns.slice(0, 3) |
|||
} |
|||
|
|||
// Load the datasource schema on mount so we can determine column types |
|||
onMount(async () => { |
|||
if (dataSource) { |
|||
schema = await API.fetchDatasourceSchema(dataSource) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<Block> |
|||
<div class="card-list" use:styleable={$component.styles}> |
|||
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}> |
|||
{#if title || enrichedSearchColumns?.length || showTitleButton} |
|||
<div class="header" class:mobile={$context.device.mobile}> |
|||
<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: titleButtonOnClick, |
|||
text: titleButtonText, |
|||
type: "cta", |
|||
}} |
|||
/> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{/if} |
|||
<BlockComponent |
|||
type="dataprovider" |
|||
bind:id={dataProviderId} |
|||
props={{ |
|||
dataSource, |
|||
filter: enrichedFilter, |
|||
sortColumn, |
|||
sortOrder, |
|||
paginate, |
|||
limit, |
|||
}} |
|||
> |
|||
<BlockComponent |
|||
type="repeater" |
|||
context="repeater" |
|||
props={{ |
|||
dataProvider: `{{ literal [${dataProviderId}] }}`, |
|||
direction: "row", |
|||
hAlign: "stretch", |
|||
vAlign: "top", |
|||
gap: "M", |
|||
noRowsMessage: "No rows found", |
|||
}} |
|||
styles={{ |
|||
display: "grid", |
|||
"grid-template-columns": `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`, |
|||
}} |
|||
> |
|||
<BlockComponent |
|||
type="spectrumcard" |
|||
props={{ |
|||
title: cardTitle, |
|||
subtitle: cardSubtitle, |
|||
description: cardDescription, |
|||
imageURL: cardImageURL, |
|||
horizontal: cardHorizontal, |
|||
showButton: showCardButton, |
|||
buttonText: cardButtonText, |
|||
buttonOnClick: cardButtonOnClick, |
|||
}} |
|||
styles={{ |
|||
width: "auto", |
|||
}} |
|||
/> |
|||
</BlockComponent> |
|||
</BlockComponent> |
|||
</BlockComponent> |
|||
</div> |
|||
</Block> |
|||
|
|||
<style> |
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 20px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.title { |
|||
overflow: hidden; |
|||
} |
|||
.title :global(.spectrum-Heading) { |
|||
flex: 1 1 auto; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.controls { |
|||
flex: 0 1 auto; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
gap: 20px; |
|||
} |
|||
.controls :global(.spectrum-InputGroup .spectrum-InputGroup-input) { |
|||
width: 100%; |
|||
} |
|||
|
|||
.search { |
|||
flex: 0 1 auto; |
|||
gap: 10px; |
|||
max-width: 100%; |
|||
display: grid; |
|||
grid-template-columns: repeat(var(--cols), minmax(120px, 200px)); |
|||
} |
|||
.search :global(.spectrum-InputGroup) { |
|||
min-width: 0; |
|||
} |
|||
|
|||
/* Mobile styles */ |
|||
.mobile { |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
} |
|||
.mobile .controls { |
|||
flex-direction: column-reverse; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
} |
|||
.mobile .search { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,218 @@ |
|||
<script> |
|||
import { onMount, getContext } from "svelte" |
|||
import Block from "components/Block.svelte" |
|||
import BlockComponent from "components/BlockComponent.svelte" |
|||
import { Heading } from "@budibase/bbui" |
|||
|
|||
export let title |
|||
export let dataSource |
|||
export let searchColumns |
|||
export let filter |
|||
export let sortColumn |
|||
export let sortOrder |
|||
export let paginate |
|||
export let tableColumns |
|||
export let showAutoColumns |
|||
export let rowCount |
|||
export let quiet |
|||
export let size |
|||
export let linkRows |
|||
export let linkURL |
|||
export let linkColumn |
|||
export let linkPeek |
|||
export let showTitleButton |
|||
export let titleButtonText |
|||
export let titleButtonOnClick |
|||
|
|||
const { API, styleable } = getContext("sdk") |
|||
const context = getContext("context") |
|||
const component = getContext("component") |
|||
const schemaComponentMap = { |
|||
string: "stringfield", |
|||
options: "optionsfield", |
|||
number: "numberfield", |
|||
datetime: "datetimefield", |
|||
boolean: "booleanfield", |
|||
} |
|||
|
|||
let formId |
|||
let dataProviderId |
|||
let schema |
|||
|
|||
$: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema) |
|||
$: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId) |
|||
|
|||
// Enrich the default filter with the specified search fields |
|||
const enrichFilter = (filter, columns, formId) => { |
|||
let enrichedFilter = [...(filter || [])] |
|||
columns?.forEach(column => { |
|||
enrichedFilter.push({ |
|||
field: column.name, |
|||
operator: "equal", |
|||
type: "string", |
|||
valueType: "Binding", |
|||
value: `{{ [${formId}].[${column.name}] }}`, |
|||
}) |
|||
}) |
|||
return enrichedFilter |
|||
} |
|||
|
|||
// Determine data types for search fields and only use those that are valid |
|||
const enrichSearchColumns = (searchColumns, schema) => { |
|||
let enrichedColumns = [] |
|||
searchColumns?.forEach(column => { |
|||
const schemaType = schema?.[column]?.type |
|||
const componentType = schemaComponentMap[schemaType] |
|||
if (componentType) { |
|||
enrichedColumns.push({ |
|||
name: column, |
|||
componentType, |
|||
}) |
|||
} |
|||
}) |
|||
return enrichedColumns.slice(0, 3) |
|||
} |
|||
|
|||
// Load the datasource schema on mount so we can determine column types |
|||
onMount(async () => { |
|||
if (dataSource) { |
|||
schema = await API.fetchDatasourceSchema(dataSource) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<Block> |
|||
<div class={size} use:styleable={$component.styles}> |
|||
<BlockComponent type="form" bind:id={formId} props={{ dataSource }}> |
|||
{#if title || enrichedSearchColumns?.length || showTitleButton} |
|||
<div class="header" class:mobile={$context.device.mobile}> |
|||
<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: titleButtonOnClick, |
|||
text: titleButtonText, |
|||
type: "cta", |
|||
}} |
|||
/> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
{/if} |
|||
<BlockComponent |
|||
type="dataprovider" |
|||
bind:id={dataProviderId} |
|||
props={{ |
|||
dataSource, |
|||
filter: enrichedFilter, |
|||
sortColumn, |
|||
sortOrder, |
|||
paginate, |
|||
limit: rowCount, |
|||
}} |
|||
> |
|||
<BlockComponent |
|||
type="table" |
|||
props={{ |
|||
dataProvider: `{{ literal [${dataProviderId}] }}`, |
|||
columns: tableColumns, |
|||
showAutoColumns, |
|||
rowCount, |
|||
quiet, |
|||
size, |
|||
linkRows, |
|||
linkURL, |
|||
linkColumn, |
|||
linkPeek, |
|||
}} |
|||
/> |
|||
</BlockComponent> |
|||
</BlockComponent> |
|||
</div> |
|||
</Block> |
|||
|
|||
<style> |
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 20px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.title { |
|||
overflow: hidden; |
|||
} |
|||
.title :global(.spectrum-Heading) { |
|||
flex: 1 1 auto; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.controls { |
|||
flex: 0 1 auto; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
gap: 20px; |
|||
} |
|||
.controls :global(.spectrum-InputGroup .spectrum-InputGroup-input) { |
|||
width: 100%; |
|||
} |
|||
|
|||
.search { |
|||
flex: 0 1 auto; |
|||
gap: 10px; |
|||
max-width: 100%; |
|||
display: grid; |
|||
grid-template-columns: repeat(var(--cols), minmax(120px, 200px)); |
|||
} |
|||
.search :global(.spectrum-InputGroup) { |
|||
min-width: 0; |
|||
} |
|||
|
|||
/* Mobile styles */ |
|||
.mobile { |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
} |
|||
.mobile .controls { |
|||
flex-direction: column-reverse; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
} |
|||
.mobile .search { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,2 @@ |
|||
export { default as tablewithsearch } from "./TableWithSearch.svelte" |
|||
export { default as cardlistwithsearch } from "./CardListWithSearch.svelte" |
|||
Loading…
Reference in new issue