Merge pull request #11829 from Budibase/BUDI-7403/design-bb-refs

Display design BB refs

packages/bbui/src/Table/CellRenderer.svelte

@@ -25,6 +25,7 @@
     longform: StringRenderer,
     array: ArrayRenderer,
     internal: InternalRenderer,
+    bb_reference: RelationshipRenderer,
   }
   $: type = getType(schema)
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)

packages/builder/src/components/design/settings/componentSettings.js

@@ -65,6 +65,7 @@ const componentMap = {
   "field/array": FormFieldSelect,
   "field/json": FormFieldSelect,
   "field/barcodeqr": FormFieldSelect,
+  "field/bb_reference": FormFieldSelect,
   // Some validation types are the same as others, so not all types are
   // explicitly listed here. e.g. options uses string validation
   "validation/string": ValidationEditor,
@@ -74,6 +75,7 @@ const componentMap = {
   "validation/datetime": ValidationEditor,
   "validation/attachment": ValidationEditor,
   "validation/link": ValidationEditor,
+  "validation/bb_reference": ValidationEditor,
 }
 
 export const getComponentForSetting = setting => {

packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js

@@ -43,4 +43,5 @@ export const FieldTypeToComponentMap = {
   link: "relationshipfield",
   json: "jsonfield",
   barcodeqr: "codescanner",
+  bb_reference: "bbreferencefield",
 }

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -69,7 +69,8 @@
       "datetimefield",
       "multifieldselect",
       "s3upload",
-      "codescanner"
+      "codescanner",
+      "bbreferencefield"
     ]
   },
   {

packages/client/manifest.json

@@ -5623,5 +5623,73 @@
         "defaultValue": false
       }
     ]
+  },
+  "bbreferencefield": {
+    "devComment": "As bb reference is only used for user subtype for now, we are using user for icon and labels",
+    "name": "User Field",
+    "icon": "User",
+    "styles": ["size"],
+    "requiredAncestors": ["form"],
+    "editable": true,
+    "size": {
+      "width": 400,
+      "height": 50
+    },
+    "settings": [
+      {
+        "type": "field/bb_reference",
+        "label": "Field",
+        "key": "field",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
+      },
+      {
+        "type": "text",
+        "label": "Default value",
+        "key": "defaultValue"
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "validation/link",
+        "label": "Validation",
+        "key": "validation"
+      },
+      {
+        "type": "filter/relationship",
+        "label": "Filtering",
+        "key": "filter"
+      },
+      {
+        "type": "boolean",
+        "label": "Search",
+        "key": "autocomplete",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      }
+    ]
   }
 }

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -30,6 +30,7 @@
     link: "relationshipfield",
     json: "jsonfield",
     barcodeqr: "codescanner",
+    bb_reference: "bbreferencefield",
   }
 
   let formId

packages/client/src/components/app/forms/BBReferenceField.svelte

@@ -0,0 +1,9 @@
+<script>
+  import RelationshipField from "./RelationshipField.svelte"
+</script>
+
+<RelationshipField
+  {...$$props}
+  datasourceType={"user"}
+  primaryDisplay={"email"}
+/>

packages/client/src/components/app/forms/RelationshipField.svelte

@@ -16,6 +16,8 @@
   export let defaultValue
   export let onChange
   export let filter
+  export let datasourceType = "table"
+  export let primaryDisplay
 
   let fieldState
   let fieldApi
@@ -24,12 +26,15 @@
   let searchTerm
   let open
 
+  $: type =
+    datasourceType === "table" ? FieldTypes.LINK : FieldTypes.BB_REFERENCE
+
   $: multiselect = fieldSchema?.relationshipType !== "one-to-many"
   $: linkedTableId = fieldSchema?.tableId
   $: fetch = fetchData({
     API,
     datasource: {
-      type: "table",
+      type: datasourceType,
       tableId: linkedTableId,
     },
     options: {
@@ -44,7 +49,7 @@
     : flatten(fieldState?.value)?.[0]
   $: component = multiselect ? CoreMultiselect : CoreSelect
   $: expandedDefaultValue = expand(defaultValue)
-  $: primaryDisplay = tableDefinition?.primaryDisplay
+  $: primaryDisplay = primaryDisplay || tableDefinition?.primaryDisplay
 
   let optionsObj = {}
   let initialValuesProcessed
@@ -54,7 +59,7 @@
       // Persist the initial values as options, allowing them to be present in the dropdown,
       // even if they are not in the inital fetch results
       initialValuesProcessed = true
-      optionsObj = fieldState?.value?.reduce((accumulator, value) => {
+      optionsObj = (fieldState?.value || []).reduce((accumulator, value) => {
         accumulator[value._id] = {
           _id: value._id,
           [primaryDisplay]: value.primaryDisplay,
@@ -161,7 +166,7 @@
   {disabled}
   {validation}
   defaultValue={expandedDefaultValue}
-  type={FieldTypes.LINK}
+  {type}
   bind:fieldState
   bind:fieldApi
   bind:fieldSchema

packages/client/src/components/app/forms/index.js

@@ -15,3 +15,4 @@ export { default as formstep } from "./FormStep.svelte"
 export { default as jsonfield } from "./JSONField.svelte"
 export { default as s3upload } from "./S3Upload.svelte"
 export { default as codescanner } from "./CodeScannerField.svelte"
+export { default as bbreferencefield } from "./BBReferenceField.svelte"

packages/client/src/constants.js

@@ -1,17 +1,5 @@
-export const FieldTypes = {
+import { FieldType as FieldTypes } from "@budibase/types"
-  STRING: "string",
+export { FieldType as FieldTypes } from "@budibase/types"
-  BARCODEQR: "barcodeqr",
-  LONGFORM: "longform",
-  OPTIONS: "options",
-  NUMBER: "number",
-  BOOLEAN: "boolean",
-  ARRAY: "array",
-  DATETIME: "datetime",
-  ATTACHMENT: "attachment",
-  LINK: "link",
-  FORMULA: "formula",
-  JSON: "json",
-}
 
 export const UnsortableTypes = [
   FieldTypes.FORMULA,