initial standard-components relationship field component update

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: "" })
       }

packages/standard-components/manifest.json

@@ -1333,6 +1333,11 @@
         "type": "text",
         "label": "Label",
         "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
       }
     ]
   }

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 = ""
   
-  $: fieldText = `${$fieldState?.value?.length ?? 0} selected rows`
+  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'
+      } 
+    }
+  }
+
+  $: 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])
     }
+    }
   }
 </script>