Default option labels and values

This commit is contained in:
Mel O'Hagan 2022-04-12 14:54:15 +01:00
parent 959f5e888b
commit 88b801ac08
2 changed files with 9 additions and 43 deletions

View File

@ -41,14 +41,12 @@
bind:value={option.label} bind:value={option.label}
label="Label" label="Label"
labelPosition="left" labelPosition="left"
error={option.error?.label}
/> />
<Input <Input
placeholder="Value" placeholder="Value"
bind:value={option.value} bind:value={option.value}
label="Value" label="Value"
labelPosition="left" labelPosition="left"
error={option.error?.value}
/> />
<Icon <Icon
name="Close" name="Close"

View File

@ -10,57 +10,25 @@
let drawer let drawer
let tempValue = value || [] let tempValue = value || []
const saveFilter = async () => { const saveOptions = async () => {
let hasError = false // Filter out incomplete options, default if needed
tempValue = tempValue.filter(option => option.value || option.label)
for (let i = 0; i < tempValue.length; i++) { for (let i = 0; i < tempValue.length; i++) {
let option = tempValue[i] let option = tempValue[i]
if (!(option.label && option.value)) { option.label = option.label ? option.label : option.value
option.error = { option.value = option.value ? option.value : option.label
label: option.label ? undefined : "You must provide a label.", tempValue[i] = option
value: option.value ? undefined : "You must provide a value.",
}
tempValue[i] = option
hasError = true
}
}
if (!hasError) {
drawer.hide()
} }
dispatch("change", tempValue) dispatch("change", tempValue)
} drawer.hide()
const clearOptionErrors = () => {
for (let i = 0; i < tempValue.length; i++) {
let option = tempValue[i]
option.error = undefined
tempValue[i] = option
}
}
$: {
for (let i = 0; i < tempValue.length; i++) {
let option = tempValue[i]
if (option.error?.label && option.label) {
option.error.label = undefined
}
if (option.error?.value && option.value) {
option.error.value = undefined
}
tempValue[i] = option
}
} }
</script> </script>
<ActionButton <ActionButton on:click={drawer.show}>Define Options</ActionButton>
on:click={() => {
clearOptionErrors()
drawer.show()
}}>Define Options</ActionButton
>
<Drawer bind:this={drawer} title="Options"> <Drawer bind:this={drawer} title="Options">
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Define the options for this picker. Define the options for this picker.
</svelte:fragment> </svelte:fragment>
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveOptions}>Save</Button>
<OptionsDrawer bind:options={tempValue} slot="body" /> <OptionsDrawer bind:options={tempValue} slot="body" />
</Drawer> </Drawer>