From b1c2780a728a55e90e5c06e0043de0b1d7c05555 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 1 Feb 2021 13:15:35 +0000 Subject: [PATCH] Add reltationship field. Add common picker component to dedupe options and relationship fields. Add better animation and position to picker dropdowns --- .../design/AppPreview/componentStructure.json | 3 +- .../RelationshipFieldSelect.svelte | 5 + .../PropertiesPanel/SettingsView.svelte | 2 + packages/standard-components/manifest.json | 23 ++++ .../src/forms/OptionsField.svelte | 76 ++----------- .../src/forms/Picker.svelte | 103 ++++++++++++++++++ .../src/forms/RelationshipField.svelte | 76 +++++++++++++ .../standard-components/src/forms/index.js | 1 + 8 files changed, 223 insertions(+), 66 deletions(-) create mode 100644 packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte create mode 100644 packages/standard-components/src/forms/Picker.svelte create mode 100644 packages/standard-components/src/forms/RelationshipField.svelte diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index 53d657d4a2..485b429b23 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -15,7 +15,8 @@ "booleanfield", "longformfield", "datetimefield", - "attachmentfield" + "attachmentfield", + "relationshipfield" ] }, { diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte new file mode 100644 index 0000000000..94e376dc27 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/RelationshipFieldSelect.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index bfb97ea293..154e175f60 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -24,6 +24,7 @@ import LongFormFieldSelect from "./PropertyControls/LongFormFieldSelect.svelte" import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte" import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte" + import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte" export let componentDefinition = {} export let componentInstance = {} @@ -72,6 +73,7 @@ "field/longform": LongFormFieldSelect, "field/datetime": DateTimeFieldSelect, "field/attachment": AttachmentFieldSelect, + "field/relationship": RelationshipFieldSelect, } const getControl = type => { diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 107eead5f7..9733007bb9 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -1284,5 +1284,28 @@ "key": "label" } ] + }, + "relationshipfield": { + "name": "Relationship Picker", + "icon": "ri-edit-box-line", + "styleable": true, + "settings": [ + { + "type": "field/relationship", + "label": "Field", + "key": "field" + }, + { + "type": "text", + "label": "Label", + "key": "label" + }, + { + "type": "text", + "label": "Placeholder", + "key": "placeholder", + "placeholder": "Choose an option" + } + ] } } diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte index 6ff204b175..c7afc45fab 100644 --- a/packages/standard-components/src/forms/OptionsField.svelte +++ b/packages/standard-components/src/forms/OptionsField.svelte @@ -3,6 +3,7 @@ import "@spectrum-css/popover/dist/index-vars.css" import "@spectrum-css/menu/dist/index-vars.css" import SpectrumField from "./SpectrumField.svelte" + import Picker from "./Picker.svelte" export let field export let label @@ -17,6 +18,7 @@ $: options = fieldSchema?.constraints?.inclusion ?? [] $: placeholderText = placeholder || "Choose an option" $: isNull = $fieldState?.value == null || $fieldState?.value === "" + $: fieldText = isNull ? placeholderText : $fieldState?.value const selectOption = value => { fieldApi.setValue(value) @@ -26,70 +28,14 @@ {#if fieldState} - -
-
    -
  • selectOption(null)}> - {placeholderText} - -
  • - {#each options as option} -
  • selectOption(option)}> - {option} - -
  • - {/each} -
-
+ option === $fieldState.value} + onSelectOption={selectOption} /> {/if}
diff --git a/packages/standard-components/src/forms/Picker.svelte b/packages/standard-components/src/forms/Picker.svelte new file mode 100644 index 0000000000..a4a3804939 --- /dev/null +++ b/packages/standard-components/src/forms/Picker.svelte @@ -0,0 +1,103 @@ + + +{#if fieldState} + + {#if open} +
(open = false)} /> +
+
    + {#if placeholderOption} +
  • onSelectOption(null)}> + {placeholderOption} + +
  • + {/if} + {#each options as option} +
  • onSelectOption(getOptionValue(option))}> + {getOptionLabel(option)} + +
  • + {/each} +
+
+ {/if} +{/if} + + diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte new file mode 100644 index 0000000000..f015954575 --- /dev/null +++ b/packages/standard-components/src/forms/RelationshipField.svelte @@ -0,0 +1,76 @@ + + + + option._id} /> + diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js index aa97bd61d4..3998424db3 100644 --- a/packages/standard-components/src/forms/index.js +++ b/packages/standard-components/src/forms/index.js @@ -7,3 +7,4 @@ export { default as booleanfield } from "./BooleanField.svelte" export { default as longformfield } from "./LongFormField.svelte" export { default as datetimefield } from "./DateTimeField.svelte" export { default as attachmentfield } from "./AttachmentField.svelte" +export { default as relationshipfield } from "./RelationshipField.svelte"