CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 13:01:09 +12:00
Code Issues Projects Releases Wiki Activity

remove search carried over from other branch

Browse source
This commit is contained in:
Martin McKeaveney 2021-02-04 08:21:39 +00:00
parent 1f6a755cb6
commit ef97ca3e8a
1 changed files with 0 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
packages/standard-components/src/Search.svelte
View file

@ -1,103 +0,0 @@
<script>
import { getContext } from "svelte"
import { isEmpty } from "lodash/fp"
import { Button, Label, Select, Toggle, Input } from "@budibase/bbui"
const { API, styleable, DataProvider, builderStore } = getContext("sdk")
const component = getContext("component")
export let datasource = []
export let fields = []
let rows = []
let loaded = false
let table
let searchableFields = []
let search = {}
$: schema = table?.schema || {}
$: searchableFields = Object.keys(schema).filter(
key => schema[key].searchable
)
$: console.log(search)
$: fetchData(datasource)
async function fetchData(datasource) {
if (!isEmpty(datasource)) {
table = await API.fetchTableDefinition(datasource.tableId)
rows = await API.fetchDatasource({
...datasource,
search,
})
}
loaded = true
}
</script>
<div use:styleable={$component.styles}>
<div class="query-builder">
{#each searchableFields 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 === '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}
<Button blue on:click={() => fetchData(datasource)}>Search</Button>
<Button
red
on:click={() => {
search = {}
fetchData(datasource)
}}>
Reset
</Button>
</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}
<p>Feed me some data</p>
{/if}
</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);
}
.form-field {
margin-bottom: var(--spacing-m);
}
</style>