Allow users to define custom picker options

5 years ago · 5151619782
5 changed files with 129 additions and 0 deletions
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte
@ -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>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@ -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>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/componentSettings.js
@ -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,
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -1964,7 +1964,15 @@
          "setting": "optionsSource",
          "value": "provider"
        }
      }, 
      {
        "type": "options",
        "key": "customOptions",
        "dependsOn": {
          "setting": "optionsSource",
          "value": "custom"
      }
    }
    ]
  },
  "booleanfield": {
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/packages/standard-components/src/forms/OptionsField.svelte
@ -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>