CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-14 08:24:48 +12: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 42204aa53d
commit 7df0555721
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>
{/if}
<div class="main">
<slot name="main" />
<slot />
</div>
</div>
</div>

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

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

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

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

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

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