Allow users to define custom picker options
This commit is contained in:
Peter Clement
parent
641e61773b
commit
5151619782
|
|
@ -0,0 +1,83 @@
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
Icon,
|
||||||
|
Button,
|
||||||
|
Input,
|
||||||
|
DrawerContent,
|
||||||
|
Layout,
|
||||||
|
Body,
|
||||||
|
} from "@budibase/bbui"
|
||||||
|
import { generate } from "shortid"
|
||||||
|
|
||||||
|
export let options = []
|
||||||
|
|
||||||
|
const removeOption = id => {
|
||||||
|
options = options.filter(option => option.id !== id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const addOption = () => {
|
||||||
|
options = [
|
||||||
|
...options,
|
||||||
|
{
|
||||||
|
id: generate(),
|
||||||
|
label: null,
|
||||||
|
value: null,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<DrawerContent>
|
||||||
|
<div class="container">
|
||||||
|
<Layout noPadding>
|
||||||
|
<Body size="S">
|
||||||
|
{#if !options.length}
|
||||||
|
Add a custom option.
|
||||||
|
{/if}
|
||||||
|
</Body>
|
||||||
|
|
||||||
|
<div class="options">
|
||||||
|
{#each options as option (option.id)}
|
||||||
|
<Input
|
||||||
|
placeholder="Label"
|
||||||
|
bind:value={option.label}
|
||||||
|
label="Label"
|
||||||
|
labelPosition="left"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
placeholder="Value"
|
||||||
|
bind:value={option.value}
|
||||||
|
label="Value"
|
||||||
|
labelPosition="left"
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
name="Close"
|
||||||
|
hoverable
|
||||||
|
size="S"
|
||||||
|
on:click={() => removeOption(option.id)}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button icon="AddCircle" size="M" on:click={addOption} secondary
|
||||||
|
>Add Option</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
</div>
|
||||||
|
</DrawerContent>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.options {
|
||||||
|
display: grid;
|
||||||
|
column-gap: var(--spacing-l);
|
||||||
|
row-gap: var(--spacing-s);
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: auto auto 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script>
|
||||||
|
import { notifications, ActionButton, Button, Drawer } from "@budibase/bbui"
|
||||||
|
import { createEventDispatcher } from "svelte"
|
||||||
|
import OptionsDrawer from "./OptionsDrawer.svelte"
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
export let value
|
||||||
|
|
||||||
|
let drawer
|
||||||
|
let tempValue = value || []
|
||||||
|
|
||||||
|
const saveFilter = async () => {
|
||||||
|
// Filter out null objects
|
||||||
|
tempValue = tempValue.filter(optionValue => optionValue.value)
|
||||||
|
dispatch("change", tempValue)
|
||||||
|
notifications.success("Options saved.")
|
||||||
|
drawer.hide()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ActionButton on:click={drawer.show}>Define Options</ActionButton>
|
||||||
|
<Drawer bind:this={drawer} title="Options">
|
||||||
|
<svelte:fragment slot="description">
|
||||||
|
Add custom picker otpions
|
||||||
|
</svelte:fragment>
|
||||||
|
<Button cta slot="buttons" on:click={saveFilter}>Save</Button>
|
||||||
|
<OptionsDrawer bind:options={tempValue} slot="body" />
|
||||||
|
</Drawer>
|
||||||
|
|
@ -20,6 +20,8 @@ import LongFormFieldSelect from "./LongFormFieldSelect.svelte"
|
||||||
import DateTimeFieldSelect from "./DateTimeFieldSelect.svelte"
|
import DateTimeFieldSelect from "./DateTimeFieldSelect.svelte"
|
||||||
import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte"
|
import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte"
|
||||||
import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte"
|
import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte"
|
||||||
|
import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
|
||||||
|
|
||||||
|
|
||||||
const componentMap = {
|
const componentMap = {
|
||||||
text: Input,
|
text: Input,
|
||||||
|
|
@ -34,6 +36,7 @@ const componentMap = {
|
||||||
icon: IconSelect,
|
icon: IconSelect,
|
||||||
field: FieldSelect,
|
field: FieldSelect,
|
||||||
multifield: MultiFieldSelect,
|
multifield: MultiFieldSelect,
|
||||||
|
options: OptionsEditor,
|
||||||
schema: SchemaSelect,
|
schema: SchemaSelect,
|
||||||
section: SectionSelect,
|
section: SectionSelect,
|
||||||
navigation: NavigationEditor,
|
navigation: NavigationEditor,
|
||||||
|
|
|
||||||
|
|
@ -1964,6 +1964,14 @@
|
||||||
"setting": "optionsSource",
|
"setting": "optionsSource",
|
||||||
"value": "provider"
|
"value": "provider"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "options",
|
||||||
|
"key": "customOptions",
|
||||||
|
"dependsOn": {
|
||||||
|
"setting": "optionsSource",
|
||||||
|
"value": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
export let dataProvider
|
export let dataProvider
|
||||||
export let labelColumn
|
export let labelColumn
|
||||||
export let valueColumn
|
export let valueColumn
|
||||||
|
export let customOptions
|
||||||
|
|
||||||
let fieldState
|
let fieldState
|
||||||
let fieldApi
|
let fieldApi
|
||||||
|
|
@ -51,6 +52,11 @@
|
||||||
return Object.values(optionsSet)
|
return Object.values(optionsSet)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Extract custom options
|
||||||
|
if (optionsSource === "custom" && customOptions) {
|
||||||
|
return customOptions
|
||||||
|
}
|
||||||
|
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue