MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Allow users to define custom picker options

This commit is contained in:
Peter Clement 2021-08-17 10:32:01 +01:00
parent b6e3c537e9
commit 4c37365549
5 changed files with 129 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte Normal file
View File

@ -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>

29
packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte Normal file
View File

@ -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>

3
packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
View File

@ -20,6 +20,8 @@ import LongFormFieldSelect from "./LongFormFieldSelect.svelte"
import DateTimeFieldSelect from "./DateTimeFieldSelect.svelte"
import AttachmentFieldSelect from "./AttachmentFieldSelect.svelte"
import RelationshipFieldSelect from "./RelationshipFieldSelect.svelte"
import OptionsEditor from "./OptionsEditor/OptionsEditor.svelte"
const componentMap = {
text: Input,
@ -34,6 +36,7 @@ const componentMap = {
icon: IconSelect,
field: FieldSelect,
multifield: MultiFieldSelect,
options: OptionsEditor,
schema: SchemaSelect,
section: SectionSelect,
navigation: NavigationEditor,

8
packages/standard-components/manifest.json
View File

@ -1964,6 +1964,14 @@
"setting": "optionsSource",
"value": "provider"
}
},
{
"type": "options",
"key": "customOptions",
"dependsOn": {
"setting": "optionsSource",
"value": "custom"
}
}
]
},

6
packages/standard-components/src/forms/OptionsField.svelte
View File

@ -12,6 +12,7 @@
export let dataProvider
export let labelColumn
export let valueColumn
export let customOptions
let fieldState
let fieldApi
@ -51,6 +52,11 @@
return Object.values(optionsSet)
}
// Extract custom options
if (optionsSource === "custom" && customOptions) {
return customOptions
}
return []
}
</script>