CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 01:28:51 +13:00
Code Issues Projects Releases Wiki Activity

Handle drawers

Browse source
This commit is contained in:
Adria Navarro 2024-04-11 16:22:16 +02:00
parent 7cf52bff02
commit 1f77b09eed
5 changed files with 47 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View file

@ -37,7 +37,7 @@
hbAutocomplete, hbAutocomplete,
EditorModes, EditorModes,
} from "components/common/CodeEditor" } from "components/common/CodeEditor"
import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte" import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
import { LuceneUtils, Utils } from "@budibase/frontend-core" import { LuceneUtils, Utils } from "@budibase/frontend-core"
import { import {
getSchemaForDatasourcePlus, getSchemaForDatasourcePlus,
@ -442,7 +442,7 @@
<Button cta slot="buttons" on:click={() => saveFilters(key)}> <Button cta slot="buttons" on:click={() => saveFilters(key)}>
Save Save
</Button> </Button>
<FilterDrawer <FilterBuilder
slot="body" slot="body"
{filters} {filters}
{bindings} {bindings}

4
packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { ActionButton, Modal, ModalContent } from "@budibase/bbui" import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte" import FilterBuilder from "components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
export let schema export let schema
export let filters export let filters
@ -40,7 +40,7 @@
onConfirm={() => dispatch("change", tempValue)} onConfirm={() => dispatch("change", tempValue)}
> >
<div class="wrapper"> <div class="wrapper">
<FilterDrawer <FilterBuilder
allowBindings={false} allowBindings={false}
{filters} {filters}
{schemaFields} {schemaFields}

53
packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte → packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
View file

@ -1,5 +1,4 @@
<script> <script>
import { DrawerContent } from "@budibase/bbui"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte" import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
@ -61,35 +60,23 @@
} }
</script> </script>
<DrawerContent padding={false}> <FilterBuilder
<FilterBuilder bind:filters={rawFilters}
bind:filters={rawFilters} behaviourFilters={true}
behaviourFilters={true} {schemaFields}
{schemaFields} {datasource}
{datasource} {allowBindings}
{allowBindings} >
> <div slot="filteringHeroContent" />
<div slot="filteringHeroContent" class="filteringHeroContent" /> <div slot="binding" let:filter>
<div slot="binding" let:filter> <DrawerBindableInput
<DrawerBindableInput disabled={filter.noValue}
disabled={filter.noValue} title={filter.field}
title={filter.field} value={filter.value}
value={filter.value} placeholder="Value"
placeholder="Value" {panel}
{panel} {bindings}
{bindings} on:change={event => (filter.value = event.detail)}
on:change={event => (filter.value = event.detail)} />
/> </div>
</div> </FilterBuilder>
</FilterBuilder>
</DrawerContent>
<style>
.filteringHeroContent {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
align-items: center;
grid-template-columns: minmax(150px, 1fr) 170px 120px minmax(150px, 1fr) 16px 16px;
}
</style>

27
packages/builder/src/components/design/settings/controls/FilterEditor/FilterEditor.svelte
View file

@ -1,8 +1,14 @@
<script> <script>
import { notifications, ActionButton, Button, Drawer } from "@budibase/bbui" import {
notifications,
ActionButton,
Button,
Drawer,
DrawerContent,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding" import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
import FilterDrawer from "./FilterDrawer.svelte" import FilterBuilder from "./FilterBuilder.svelte"
import { selectedScreen } from "stores/builder" import { selectedScreen } from "stores/builder"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -40,14 +46,15 @@
</div> </div>
<Drawer bind:this={drawer} title="Filtering" on:drawerHide on:drawerShow> <Drawer bind:this={drawer} title="Filtering" on:drawerHide on:drawerShow>
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<FilterDrawer <DrawerContent slot="body">
slot="body" <FilterBuilder
filters={value} filters={value}
{bindings} {bindings}
{schemaFields} {schemaFields}
{datasource} {datasource}
on:change={e => (tempValue = e.detail)} on:change={e => (tempValue = e.detail)}
/> />
</DrawerContent>
</Drawer> </Drawer>
<style> <style>

7
packages/client/src/components/app/dynamic-filter/FilterModal.svelte
View file

@ -10,7 +10,11 @@
Select, Select,
} from "@budibase/bbui" } from "@budibase/bbui"
import { generate } from "shortid" import { generate } from "shortid"
import { LuceneUtils, Constants } from "@budibase/frontend-core" import {
LuceneUtils,
Constants,
FilterBuilder,
} from "@budibase/frontend-core"
import { getContext } from "svelte" import { getContext } from "svelte"
export let schemaFields export let schemaFields
@ -105,6 +109,7 @@
<div class="container" class:mobile={$context.device.mobile}> <div class="container" class:mobile={$context.device.mobile}>
<Layout noPadding> <Layout noPadding>
<FilterBuilder bind:filters {schemaFields} {datasource} />
<Body size="S"> <Body size="S">
{#if !filters?.length} {#if !filters?.length}
Add your first filter expression. Add your first filter expression.