rewords FilterPanel to use new DrawerContent component

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

View File

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

View File

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

View File

@ -127,8 +127,7 @@
</div>
{/if}
</div>
</DrawerContent>
<div class="actions-container">
<div class="actions-container">
<div class="action-config">
{#if selectedAction}
<div class="selected-action-container">
@ -139,7 +138,8 @@
</div>
{/if}
</div>
</div>
</div>
</DrawerContent>
<style>
.action-header {

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,15 +37,16 @@
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">
<DrawerContent slot="body">
<Layout>
<Body s>
{#if !Object.keys(tempValue || {}).length}
Add your first filter column.
@ -47,25 +55,19 @@
constaints.
{/if}
</Body>
<Spacer medium />
<div class="fields">
<SaveFields
parameterFields={value}
{schemaFields}
valueLabel="Equals"
on:change={onFieldsChanged} />
</div>
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);