Add hot reloading to search results
This commit is contained in:
Andrew Kingston
parent
a166147826
commit
81e779c8b5
|
|
@ -1,6 +1,5 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import { isEmpty } from "lodash/fp"
|
||||
import {
|
||||
Button,
|
||||
DatePicker,
|
||||
|
|
@ -10,10 +9,12 @@
|
|||
Input,
|
||||
} from "@budibase/bbui"
|
||||
|
||||
const { API, styleable, Provider, builderStore } = getContext("sdk")
|
||||
const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
|
||||
"sdk"
|
||||
)
|
||||
const component = getContext("component")
|
||||
|
||||
export let table = []
|
||||
export let table
|
||||
export let columns = []
|
||||
export let pageSize
|
||||
export let noRowsMessage
|
||||
|
|
@ -34,9 +35,16 @@
|
|||
search[next] === "" ? acc : { ...acc, [next]: search[next] },
|
||||
{}
|
||||
)
|
||||
$: actions = [
|
||||
{
|
||||
type: ActionTypes.RefreshDatasource,
|
||||
callback: () => fetchData(table, page),
|
||||
metadata: { datasource: { type: "table", tableId: table } },
|
||||
},
|
||||
]
|
||||
|
||||
async function fetchData(table, page) {
|
||||
if (!isEmpty(table)) {
|
||||
if (table) {
|
||||
const tableDef = await API.fetchTableDefinition(table)
|
||||
schema = tableDef.schema
|
||||
rows = await API.searchTableData({
|
||||
|
|
@ -60,74 +68,76 @@
|
|||
}
|
||||
</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><i class="ri-image-line" />Add some components to display.</p>
|
||||
{:else}
|
||||
{#each rows as row}
|
||||
<Provider data={row}>
|
||||
<slot />
|
||||
</Provider>
|
||||
<Provider {actions}>
|
||||
<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}
|
||||
{:else if noRowsMessage}
|
||||
<p><i class="ri-search-2-line" />{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>
|
||||
<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><i class="ri-image-line" />Add some components to display.</p>
|
||||
{:else}
|
||||
{#each rows as row}
|
||||
<Provider data={row}>
|
||||
<slot />
|
||||
</Provider>
|
||||
{/each}
|
||||
{/if}
|
||||
{:else if noRowsMessage}
|
||||
<p><i class="ri-search-2-line" />{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>
|
||||
</div>
|
||||
</Provider>
|
||||
|
||||
<style>
|
||||
p {
|
||||
|
|
|
|||
Loading…
Reference in New Issue