diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte index e51a31955e..92002ed4a5 100644 --- a/packages/standard-components/src/forms/Form.svelte +++ b/packages/standard-components/src/forms/Form.svelte @@ -35,7 +35,7 @@ // Form API contains functions to control the form const formApi = { - registerField: (field, defaultValue = null, fieldDisabled = false) => { + registerField: (field, defaultValue = undefined, fieldDisabled = false) => { if (!field) { return } diff --git a/packages/standard-components/src/forms/Picker.svelte b/packages/standard-components/src/forms/Picker.svelte index 894a070070..e633f7439e 100644 --- a/packages/standard-components/src/forms/Picker.svelte +++ b/packages/standard-components/src/forms/Picker.svelte @@ -57,7 +57,7 @@ role="option" aria-selected="true" tabindex="0" - on:click={() => onSelectOption(null)}> + on:click={() => onSelectOption(undefined)}> {placeholderOption} { if (fieldSchema?.relationshipType === "one-to-many") { if (value?.length && options?.length) { - const row = options.find(row => row._id === value[0]) + const row = options.find(row => row._id === value[0]?._id) return getDisplayName(row) } else { return placeholder || "Choose an option" @@ -60,27 +60,30 @@ } const getDisplayName = row => { - return row[tableDefinition?.primaryDisplay || "_id"] + return row?.[tableDefinition?.primaryDisplay || "_id"] || "-" } const getValueLookupMap = value => { let map = {} if (value?.length) { value.forEach(option => { - map[option] = true + if (option?._id) { + map[option._id] = true + } }) } return map } - const toggleOption = option => { - if (fieldSchema.type === "one-to-many") { - fieldApi.setValue([option]) + const toggleOption = id => { + if (fieldSchema.relationshipType === "one-to-many") { + fieldApi.setValue([{ _id: id }]) } else { - if ($fieldState.value.includes(option)) { - fieldApi.setValue($fieldState.value.filter(x => x !== option)) + if ($fieldState.value.find(option => option?._id === id)) { + const filtered = $fieldState.value.filter(option => option?._id !== id) + fieldApi.setValue(filtered) } else { - fieldApi.setValue([...$fieldState.value, option]) + fieldApi.setValue([...$fieldState.value, { _id: id }]) } } } diff --git a/packages/standard-components/src/grid/Relationship/RelationshipLabel.svelte b/packages/standard-components/src/grid/Relationship/RelationshipLabel.svelte index 550dedc419..ec64255855 100644 --- a/packages/standard-components/src/grid/Relationship/RelationshipLabel.svelte +++ b/packages/standard-components/src/grid/Relationship/RelationshipLabel.svelte @@ -7,7 +7,7 @@
{#each items as item} -
{item?.primaryDisplay}
+
{item?.primaryDisplay ?? ''}
{/each}
diff --git a/packages/standard-components/src/grid/customRenderer.js b/packages/standard-components/src/grid/customRenderer.js index acb72639a6..fd558baa98 100644 --- a/packages/standard-components/src/grid/customRenderer.js +++ b/packages/standard-components/src/grid/customRenderer.js @@ -5,7 +5,7 @@ import AttachmentCell from "./AttachmentCell/Button.svelte" import ViewDetails from "./ViewDetails/Cell.svelte" import Select from "./Select/Wrapper.svelte" import DatePicker from "./DateTime/Wrapper.svelte" -import RelationshipCount from "./Relationship/RelationshipCount.svelte" +import RelationshipLabel from "./Relationship/RelationshipLabel.svelte" const renderers = new Map([ ["boolean", booleanRenderer], @@ -127,7 +127,7 @@ function linkedRowRenderer(options, constraints, editable, SDK) { container.style.placeItems = "center" container.style.height = "100%" - new RelationshipCount({ + new RelationshipLabel({ target: container, props: { row: params.data,