2021-02-02 10:02:54 +13:00
|
|
|
<script>
|
|
|
|
import { getContext } from "svelte"
|
|
|
|
import { isEmpty } from "lodash/fp"
|
2021-02-07 01:31:12 +13:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
DatePicker,
|
|
|
|
Label,
|
|
|
|
Select,
|
|
|
|
Toggle,
|
|
|
|
Input,
|
|
|
|
} from "@budibase/bbui"
|
2021-02-02 10:02:54 +13:00
|
|
|
|
|
|
|
const { API, styleable, DataProvider, builderStore } = getContext("sdk")
|
|
|
|
const component = getContext("component")
|
|
|
|
|
2021-02-05 12:17:49 +13:00
|
|
|
export let table = []
|
|
|
|
export let columns = []
|
|
|
|
export let pageSize = 50
|
2021-02-09 06:44:44 +13:00
|
|
|
export let noRowsMessage = "No Rows"
|
2021-02-02 10:02:54 +13:00
|
|
|
|
|
|
|
let rows = []
|
|
|
|
let loaded = false
|
|
|
|
let search = {}
|
2021-02-05 12:17:49 +13:00
|
|
|
let tableDefinition
|
2021-02-09 06:44:44 +13:00
|
|
|
let schema
|
2021-02-02 10:02:54 +13:00
|
|
|
|
2021-02-09 06:44:44 +13:00
|
|
|
// pagination
|
|
|
|
let pagination = {
|
|
|
|
page: 1
|
|
|
|
}
|
|
|
|
|
|
|
|
$: fetchData(table, pagination)
|
|
|
|
// omit empty strings
|
2021-02-09 09:54:55 +13:00
|
|
|
$: parsedSearch = Object.keys(search).reduce((acc, next) => search[next] === "" ? acc : { ...acc, [next]: search[next] }, {})
|
2021-02-02 10:02:54 +13:00
|
|
|
|
2021-02-09 06:44:44 +13:00
|
|
|
async function fetchData(table, pagination) {
|
2021-02-05 12:17:49 +13:00
|
|
|
if (!isEmpty(table)) {
|
|
|
|
const tableDef = await API.fetchTableDefinition(table)
|
|
|
|
schema = tableDef.schema
|
|
|
|
rows = await API.searchTable({
|
|
|
|
tableId: table,
|
2021-02-09 06:44:44 +13:00
|
|
|
search: parsedSearch,
|
|
|
|
pagination: {
|
|
|
|
pageSize,
|
|
|
|
...pagination
|
|
|
|
}
|
2021-02-02 10:02:54 +13:00
|
|
|
})
|
|
|
|
}
|
|
|
|
loaded = true
|
|
|
|
}
|
2021-02-07 01:31:12 +13:00
|
|
|
|
2021-02-09 06:44:44 +13:00
|
|
|
function nextPage() {
|
|
|
|
// set cursor to last element
|
|
|
|
pagination = {
|
|
|
|
// lastCursor: rows[0],
|
|
|
|
cursor: rows[rows.length - 1]?._id,
|
|
|
|
reverse: true,
|
|
|
|
page: pagination.page += 1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// TODO: implement
|
|
|
|
function previousPage() {
|
|
|
|
pagination = {
|
|
|
|
cursor: lastCursor,
|
|
|
|
reverse: true,
|
|
|
|
page: pagination.page - 1
|
|
|
|
}
|
|
|
|
}
|
2021-02-02 10:02:54 +13:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div use:styleable={$component.styles}>
|
|
|
|
<div class="query-builder">
|
2021-02-09 06:44:44 +13:00
|
|
|
{#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 = {}
|
|
|
|
pagination = {
|
|
|
|
page: 1
|
|
|
|
}
|
|
|
|
}}>
|
|
|
|
Reset
|
|
|
|
</Button>
|
|
|
|
<Button primary on:click={() => fetchData(table)}>Search</Button>
|
|
|
|
</div>
|
2021-02-02 10:02:54 +13:00
|
|
|
</div>
|
|
|
|
{#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 loaded && $builderStore.inBuilder}
|
2021-02-09 06:44:44 +13:00
|
|
|
<p>Feed me some data</p>
|
|
|
|
{:else}
|
2021-02-05 12:17:49 +13:00
|
|
|
<p>{noRowsMessage}</p>
|
2021-02-02 10:02:54 +13:00
|
|
|
{/if}
|
2021-02-07 01:31:12 +13:00
|
|
|
<div class="pagination">
|
2021-02-09 06:44:44 +13:00
|
|
|
<!-- {#if pagination.page > 1}
|
|
|
|
<Button blue on:click={previousPage}>Back</Button>
|
|
|
|
{/if} -->
|
|
|
|
{#if rows.length === pageSize}
|
|
|
|
<Button primary on:click={nextPage}>Next</Button>
|
2021-02-07 01:31:12 +13:00
|
|
|
{/if}
|
|
|
|
</div>
|
2021-02-02 10:02:54 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
p {
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
background: #f5f5f5;
|
|
|
|
border: #ccc 1px solid;
|
|
|
|
padding: var(--spacing-m);
|
|
|
|
}
|
|
|
|
|
|
|
|
.query-builder {
|
|
|
|
padding: var(--spacing-m);
|
|
|
|
background: var(--background);
|
|
|
|
border-radius: var(--border-radius-s);
|
|
|
|
}
|
|
|
|
|
2021-02-09 06:44:44 +13:00
|
|
|
.actions {
|
|
|
|
display: grid;
|
|
|
|
grid-gap: var(--spacing-s);
|
|
|
|
justify-content: flex-end;
|
|
|
|
grid-auto-flow: column;
|
|
|
|
}
|
|
|
|
|
2021-02-02 10:02:54 +13:00
|
|
|
.form-field {
|
|
|
|
margin-bottom: var(--spacing-m);
|
|
|
|
}
|
2021-02-07 01:31:12 +13:00
|
|
|
|
|
|
|
.pagination {
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
margin-top: var(--spacing-m);
|
|
|
|
}
|
2021-02-02 10:02:54 +13:00
|
|
|
</style>
|