MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update table filter button to be a detail popover

This commit is contained in:
Andrew Kingston 2024-10-28 14:24:16 +00:00
parent 27c1788db2
commit 5156749ac9
No known key found for this signature in database
1 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
View File

@ -1,11 +1,12 @@
<script> <script>
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { ActionButton, Drawer, DrawerContent, Button } from "@budibase/bbui" import { ActionButton, Button } from "@budibase/bbui"
import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte" import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
import { getUserBindings } from "dataBinding" import { getUserBindings } from "dataBinding"
import { makePropSafe } from "@budibase/string-templates" import { makePropSafe } from "@budibase/string-templates"
import { search } from "@budibase/frontend-core" import { search } from "@budibase/frontend-core"
import { tables } from "stores/builder" import { tables } from "stores/builder"
import DetailPopover from "components/common/DetailPopover.svelte"
export let schema export let schema
export let filters export let filters
@ -14,7 +15,7 @@
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
let drawer let popover
$: localFilters = filters $: localFilters = filters
$: schemaFields = search.getFields( $: schemaFields = search.getFields(
@ -39,45 +40,44 @@
}, },
...getUserBindings(), ...getUserBindings(),
] ]
const openPopover = () => {
localFilters = filters
popover.show()
}
</script> </script>
<ActionButton <DetailPopover bind:this={popover} title="Configure filters" width={800}>
icon="Filter" <svelte:fragment slot="anchor" let:open>
quiet <ActionButton
{disabled} icon="Filter"
on:click={drawer.show} quiet
selected={filterCount > 0} {disabled}
accentColor="#004EA6" on:click={openPopover}
> selected={open || filterCount > 0}
{filterCount ? `Filter: ${filterCount}` : "Filter"} accentColor="#004EA6"
</ActionButton> >
{filterCount ? `Filter: ${filterCount}` : "Filter"}
</ActionButton>
</svelte:fragment>
<Drawer <FilterBuilder
bind:this={drawer} filters={localFilters}
title="Filtering" {schemaFields}
on:drawerHide datasource={{ type: "table", tableId }}
on:drawerShow={() => { on:change={e => (localFilters = e.detail)}
localFilters = filters {bindings}
}} />
forceModal <div>
> <Button
<Button cta
cta slot="buttons"
slot="buttons" on:click={() => {
on:click={() => { dispatch("change", localFilters)
dispatch("change", localFilters) popover.hide()
drawer.hide() }}
}} >
> Save
Save </Button>
</Button> </div>
<DrawerContent slot="body"> </DetailPopover>
<FilterBuilder
filters={localFilters}
{schemaFields}
datasource={{ type: "table", tableId }}
on:change={e => (localFilters = e.detail)}
{bindings}
/>
</DrawerContent>
</Drawer>