mirror of https://github.com/Budibase/budibase.git
mike12345567
5 years ago
26 changed files with 472 additions and 8079 deletions
File diff suppressed because it is too large
@ -0,0 +1,166 @@ |
|||
<script> |
|||
import { getContext } from "svelte" |
|||
import { isEmpty } from "lodash/fp" |
|||
import { |
|||
Button, |
|||
DatePicker, |
|||
Label, |
|||
Select, |
|||
Toggle, |
|||
Input, |
|||
} from "@budibase/bbui" |
|||
|
|||
const { API, styleable, DataProvider, builderStore } = getContext("sdk") |
|||
const component = getContext("component") |
|||
|
|||
export let table = [] |
|||
export let columns = [] |
|||
export let pageSize |
|||
export let noRowsMessage |
|||
|
|||
let rows = [] |
|||
let loaded = false |
|||
let search = {} |
|||
let tableDefinition |
|||
let schema |
|||
|
|||
// pagination |
|||
let page = 0 |
|||
|
|||
$: fetchData(table, page) |
|||
// omit empty strings |
|||
$: parsedSearch = Object.keys(search).reduce( |
|||
(acc, next) => |
|||
search[next] === "" ? acc : { ...acc, [next]: search[next] }, |
|||
{} |
|||
) |
|||
|
|||
async function fetchData(table, page) { |
|||
if (!isEmpty(table)) { |
|||
const tableDef = await API.fetchTableDefinition(table) |
|||
schema = tableDef.schema |
|||
rows = await API.searchTable({ |
|||
tableId: table, |
|||
search: parsedSearch, |
|||
pagination: { |
|||
pageSize, |
|||
page, |
|||
}, |
|||
}) |
|||
} |
|||
loaded = true |
|||
} |
|||
|
|||
function nextPage() { |
|||
page += 1 |
|||
} |
|||
|
|||
function previousPage() { |
|||
page -= 1 |
|||
} |
|||
</script> |
|||
|
|||
<div use:styleable={$component.styles}> |
|||
<div class="query-builder"> |
|||
{#if schema} |
|||
{#each columns as field} |
|||
<div class="form-field"> |
|||
<Label extraSmall grey>{schema[field].name}</Label> |
|||
{#if schema[field].type === 'options'} |
|||
<Select secondary bind:value={search[field]}> |
|||
<option value="">Choose an option</option> |
|||
{#each schema[field].constraints.inclusion as opt} |
|||
<option>{opt}</option> |
|||
{/each} |
|||
</Select> |
|||
{:else if schema[field].type === 'datetime'} |
|||
<DatePicker bind:value={search[field]} /> |
|||
{:else if schema[field].type === 'boolean'} |
|||
<Toggle text={schema[field].name} bind:checked={search[field]} /> |
|||
{:else if schema[field].type === 'number'} |
|||
<Input type="number" bind:value={search[field]} /> |
|||
{:else if schema[field].type === 'string'} |
|||
<Input bind:value={search[field]} /> |
|||
{/if} |
|||
</div> |
|||
{/each} |
|||
{/if} |
|||
<div class="actions"> |
|||
<Button |
|||
secondary |
|||
on:click={() => { |
|||
search = {} |
|||
page = 0 |
|||
}}> |
|||
Reset |
|||
</Button> |
|||
<Button |
|||
primary |
|||
on:click={() => { |
|||
page = 0 |
|||
fetchData(table, page) |
|||
}}> |
|||
Search |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
{#if loaded} |
|||
{#if rows.length > 0} |
|||
{#if $component.children === 0 && $builderStore.inBuilder} |
|||
<p>Add some components too</p> |
|||
{:else} |
|||
{#each rows as row} |
|||
<DataProvider {row}> |
|||
<slot /> |
|||
</DataProvider> |
|||
{/each} |
|||
{/if} |
|||
{:else if $builderStore.inBuilder} |
|||
<p>Feed me some data</p> |
|||
{:else} |
|||
<p>{noRowsMessage}</p> |
|||
{/if} |
|||
{/if} |
|||
<div class="pagination"> |
|||
{#if page > 0} |
|||
<Button primary on:click={previousPage}>Back</Button> |
|||
{/if} |
|||
{#if rows.length === pageSize} |
|||
<Button primary on:click={nextPage}>Next</Button> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
p { |
|||
display: grid; |
|||
place-items: center; |
|||
background: #f5f5f5; |
|||
border: #ccc 1px solid; |
|||
padding: var(--spacing-m); |
|||
} |
|||
|
|||
.query-builder { |
|||
padding: var(--spacing-m); |
|||
border-radius: var(--border-radius-s); |
|||
} |
|||
|
|||
.actions { |
|||
display: grid; |
|||
grid-gap: var(--spacing-s); |
|||
justify-content: flex-end; |
|||
grid-auto-flow: column; |
|||
} |
|||
|
|||
.form-field { |
|||
margin-bottom: var(--spacing-m); |
|||
} |
|||
|
|||
.pagination { |
|||
display: grid; |
|||
grid-gap: var(--spacing-s); |
|||
justify-content: flex-end; |
|||
margin-top: var(--spacing-m); |
|||
grid-auto-flow: column; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue