CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 02:27:06 +13:00
Code Issues Projects Releases Wiki Activity

rewords FilterPanel to use new DrawerContent component

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-28 14:52:58 +02:00
parent c82d171106
commit 016a780322
4 changed files with 45 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/bbui/src/Drawer/DrawerContent.svelte
View file

@ -10,7 +10,7 @@
</div> </div>
{/if} {/if}
<div class="main"> <div class="main">
<slot name="main" /> <slot />
</div> </div>
</div> </div>
</div> </div>

2
packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
View file

@ -107,7 +107,7 @@
</section> </section>
</Layout> </Layout>
</svelte:fragment> </svelte:fragment>
<div class="main" slot="main"> <div class="main">
<TextArea <TextArea
bind:getCaretPosition bind:getCaretPosition
bind:value bind:value

24
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

@ -127,19 +127,19 @@
</div> </div>
{/if} {/if}
</div> </div>
</DrawerContent> <div class="actions-container">
<div class="actions-container"> <div class="action-config">
<div class="action-config"> {#if selectedAction}
{#if selectedAction} <div class="selected-action-container">
<div class="selected-action-container"> <svelte:component
<svelte:component this={selectedActionComponent}
this={selectedActionComponent} parameters={selectedAction.parameters}
parameters={selectedAction.parameters} />
/> </div>
</div> {/if}
{/if} </div>
</div> </div>
</div> </DrawerContent>
<style> <style>
.action-header { .action-header {

60
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
View file

@ -1,5 +1,12 @@
<script> <script>
import { Button, Drawer, Spacer, Body } from "@budibase/bbui" import {
Button,
Drawer,
Spacer,
Body,
DrawerContent,
Layout,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import { import {
@ -18,7 +25,7 @@
$: schemaFields = getSchemaFields(componentInstance) $: schemaFields = getSchemaFields(componentInstance)
const getSchemaFields = component => { const getSchemaFields = (component) => {
const datasource = getDatasourceForProvider($currentAsset, component) const datasource = getDatasourceForProvider($currentAsset, component)
const { schema } = getSchemaForDatasource(datasource) const { schema } = getSchemaForDatasource(datasource)
return Object.values(schema || {}) return Object.values(schema || {})
@ -30,42 +37,37 @@
drawer.hide() drawer.hide()
} }
const onFieldsChanged = event => { const onFieldsChanged = (event) => {
tempValue = event.detail tempValue = event.detail
} }
</script> </script>
<Button secondary wide on:click={drawer.show}>Define Filters</Button> <Button secondary wide on:click={drawer.show}>Define Filters</Button>
<Drawer bind:this={drawer} title='Filtering'> <Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<div class="root" slot="body"> <DrawerContent slot="body">
<Body s> <Layout>
{#if !Object.keys(tempValue || {}).length} <Body s>
Add your first filter column. {#if !Object.keys(tempValue || {}).length}
{:else} Add your first filter column.
Results are filtered to only those which match all of the following {:else}
constaints. Results are filtered to only those which match all of the following
{/if} constaints.
</Body> {/if}
<Spacer medium /> </Body>
<div class="fields"> <div class="fields">
<SaveFields <SaveFields
parameterFields={value} parameterFields={value}
{schemaFields} {schemaFields}
valueLabel="Equals" valueLabel="Equals"
on:change={onFieldsChanged} /> on:change={onFieldsChanged}
</div> />
</div> </div>
</Layout>
</DrawerContent>
</Drawer> </Drawer>
<style> <style>
.root {
padding: var(--spacing-l);
min-height: calc(40vh - 2 * var(--spacing-l));
max-width: 800px;
margin: 0 auto;
}
.fields { .fields {
display: grid; display: grid;
column-gap: var(--spacing-l); column-gap: var(--spacing-l);