From 8539a6dcbe19254b2111644248ad7ea7e7189bba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 12 Feb 2021 16:47:20 +0100
Subject: [PATCH] initial standard-components relationship field component
 update

---
 .../screenTemplates/utils/commonComponents.js |  4 +++
 packages/standard-components/manifest.json    |  5 ++++
 .../src/forms/RelationshipField.svelte        | 30 +++++++++++++++++--
 3 files changed, 37 insertions(+), 2 deletions(-)

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])
     }
+    }
   }
 </script>