1
0
Fork 0
mirror of synced 2024-07-03 13:30:46 +12:00

Add basic search implementation to data UI tables

This commit is contained in:
Andrew Kingston 2021-09-28 15:29:15 +01:00
parent f5f8e25c9f
commit 7527c19a8c
2 changed files with 73 additions and 24 deletions

View file

@ -11,10 +11,13 @@
import { TableNames } from "constants" import { TableNames } from "constants"
import CreateEditRow from "./modals/CreateEditRow.svelte" import CreateEditRow from "./modals/CreateEditRow.svelte"
import { fetchTableData } from "helpers/fetchTableData" import { fetchTableData } from "helpers/fetchTableData"
import { Pagination } from "@budibase/bbui" import { Layout, Pagination, Select, Input } from "@budibase/bbui"
import { OperatorOptions } from "constants/lucene"
const search = fetchTableData() const search = fetchTableData()
let hideAutocolumns = true let hideAutocolumns = true
let searchColumn
let searchValue
$: isUsersTable = $tables.selected?._id === TableNames.USERS $: isUsersTable = $tables.selected?._id === TableNames.USERS
$: title = $tables.selected?.name $: title = $tables.selected?.name
@ -22,12 +25,16 @@
$: type = $tables.selected?.type $: type = $tables.selected?.type
$: isInternal = type !== "external" $: isInternal = type !== "external"
$: id = $tables.selected?._id $: id = $tables.selected?._id
$: fetchTable(id) $: columnOptions = Object.keys($search.schema || {})
$: filter = buildFilter(searchColumn, searchValue)
$: fetchTable(id, filter)
const fetchTable = tableId => { // Fetches new data whenever the table changes
const fetchTable = (tableId, filter) => {
search.update({ search.update({
tableId, tableId,
schema, schema,
filter,
limit: 10, limit: 10,
paginate: true, paginate: true,
}) })
@ -40,6 +47,23 @@
sortOrder: e.detail.order, sortOrder: e.detail.order,
}) })
} }
// Builds a filter expression to search with
const buildFilter = (column, value) => {
if (!column || !value) {
return null
}
return [
{
type: "string",
field: column,
operator: OperatorOptions.StartsWith.value,
value,
},
]
}
$: console.log(filter)
</script> </script>
<div> <div>
@ -55,27 +79,39 @@
allowEditing allowEditing
disableSorting disableSorting
> >
{#if isInternal} <Layout noPadding gap="S">
<CreateColumnButton /> <div class="buttons">
{/if} {#if isInternal}
{#if schema && Object.keys(schema).length > 0} <CreateColumnButton />
{#if !isUsersTable} {/if}
<CreateRowButton {#if schema && Object.keys(schema).length > 0}
title={"Create row"} {#if !isUsersTable}
modalContentComponent={CreateEditRow} <CreateRowButton
title={"Create row"}
modalContentComponent={CreateEditRow}
/>
{/if}
{#if isInternal}
<CreateViewButton />
{/if}
<ManageAccessButton resourceId={$tables.selected?._id} />
{#if isUsersTable}
<EditRolesButton />
{/if}
<HideAutocolumnButton bind:hideAutocolumns />
<!-- always have the export last -->
<ExportButton view={$tables.selected?._id} />
{/if}
</div>
<div class="search">
<Select bind:value={searchColumn} options={columnOptions} />
<Input
updateOnChange={false}
on:change={e => (searchValue = e.detail)}
placeholder="Search"
/> />
{/if} </div>
{#if isInternal} </Layout>
<CreateViewButton />
{/if}
<ManageAccessButton resourceId={$tables.selected?._id} />
{#if isUsersTable}
<EditRolesButton />
{/if}
<HideAutocolumnButton bind:hideAutocolumns />
<!-- always have the export last -->
<ExportButton view={$tables.selected?._id} />
{/if}
</Table> </Table>
<div class="pagination"> <div class="pagination">
<Pagination <Pagination
@ -89,6 +125,19 @@
</div> </div>
<style> <style>
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-s);
}
.search {
display: grid;
align-items: center;
grid-template-columns: 200px 200px;
gap: var(--spacing-s);
}
.pagination { .pagination {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

View file

@ -164,7 +164,7 @@
align-items: center; align-items: center;
gap: var(--spacing-s); gap: var(--spacing-s);
} }
.popovers :global(button) { .popovers :global(.spectrum-ActionButton) {
font-weight: 600; font-weight: 600;
margin-top: var(--spacing-l); margin-top: var(--spacing-l);
} }