diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js index 4c127fbe0b..83b6391659 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js +++ b/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js @@ -194,6 +194,10 @@ export function makeDatasourceFormComponents(datasource) { if (fieldType === "options") { component.customProps({ placeholder: "Choose an option " }) } + if (fieldType === "link") { + let placeholder = fieldSchema.oneToMany ? 'Choose an option' : 'Choose some options' + component.customProps({ placeholder }) + } if (fieldType === "boolean") { component.customProps({ text: field, label: "" }) } diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index a7f237a790..7d69e6d243 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -1333,6 +1333,11 @@ "type": "text", "label": "Label", "key": "label" + }, + { + "type": "text", + "label": "Placeholder", + "key": "placeholder" } ] } diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte index f09595606f..0e47121f8c 100644 --- a/packages/standard-components/src/forms/RelationshipField.svelte +++ b/packages/standard-components/src/forms/RelationshipField.svelte @@ -7,6 +7,7 @@ export let field export let label + export let placeholder let fieldState let fieldApi @@ -15,8 +16,29 @@ // Picker state let options = [] let tableDefinition + let fieldText = "" + + const setFieldText = (value) => { + if (fieldSchema?.oneToMany) { + if (value?.length) { + const row = options.find(row => row._id === value) + if (!row) return placeholder || 'Choose an option' + return getDisplayName(row) + } else { + return placeholder || 'Choose an option' + } + } else { + if (value?.length) { + return `${value?.length ?? 0} selected rows` + } else { + return placeholder || 'Choose some options' + } + } + } - $: fieldText = `${$fieldState?.value?.length ?? 0} selected rows` + $: console.log(placeholder) + + $: fieldText = setFieldText($fieldState?.value) $: valueLookupMap = getValueLookupMap($fieldState?.value) $: isOptionSelected = option => valueLookupMap[option] === true $: linkedTableId = fieldSchema?.tableId @@ -54,11 +76,15 @@ } const toggleOption = option => { - if ($fieldState.value.includes(option)) { + if (fieldSchema.oneToMany) { + fieldApi.setValue([option]) + } else { + if ($fieldState.value.includes(option)) { fieldApi.setValue($fieldState.value.filter(x => x !== option)) } else { fieldApi.setValue([...$fieldState.value, option]) } + } }