update FilterEditor and SaveFields drawers

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-23 08:30:23 +02:00
parent 79366072dc
commit 2edc795185
2 changed files with 25 additions and 38 deletions

View File

@ -1,5 +1,5 @@
<script> <script>
import { Label, Button, Spacer, Select, Input } from "@budibase/bbui" import { Label, ActionButton, Button, Spacer, Select, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore" import { store, currentAsset } from "builderStore"
import { getBindableProperties } from "builderStore/dataBinding" import { getBindableProperties } from "builderStore/dataBinding"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
@ -69,13 +69,10 @@
value={field[1]} value={field[1]}
bindings={bindableProperties} bindings={bindableProperties}
on:change={event => updateFieldValue(idx, event.detail)} /> on:change={event => updateFieldValue(idx, event.detail)} />
<div class="remove-field-container"> <ActionButton
<Button quiet
icon="Close" icon="Delete"
size="S" on:click={() => removeField(field[0])} />
quiet
on:click={() => removeField(field[0])} />
</div>
{/each} {/each}
<div> <div>
<Spacer small /> <Spacer small />
@ -85,9 +82,3 @@
</Button> </Button>
</div> </div>
{/if} {/if}
<style>
.remove-field-container :global(button) {
vertical-align: bottom;
}
</style>

View File

@ -36,28 +36,24 @@
</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'>
<heading slot="buttons"> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<Button thin blue on:click={saveFilter}>Save</Button> <div class="root" slot="body">
</heading> <Body s>
<div slot="body"> {#if !Object.keys(tempValue || {}).length}
<div class="root"> Add your first filter column.
<Body small grey> {:else}
{#if !Object.keys(tempValue || {}).length} Results are filtered to only those which match all of the following
Add your first filter column. constaints.
{:else} {/if}
Results are filtered to only those which match all of the following </Body>
constaints. <Spacer medium />
{/if} <div class="fields">
</Body> <SaveFields
<Spacer medium /> parameterFields={value}
<div class="fields"> {schemaFields}
<SaveFields valueLabel="Equals"
parameterFields={value} on:change={onFieldsChanged} />
{schemaFields}
valueLabel="Equals"
on:change={onFieldsChanged} />
</div>
</div> </div>
</div> </div>
</Drawer> </Drawer>
@ -74,7 +70,7 @@
display: grid; display: grid;
column-gap: var(--spacing-l); column-gap: var(--spacing-l);
row-gap: var(--spacing-s); row-gap: var(--spacing-s);
align-items: center;
grid-template-columns: auto 1fr auto 1fr auto; grid-template-columns: auto 1fr auto 1fr auto;
align-items: baseline;
} }
</style> </style>