Merge pull request #11796 from Budibase/BUDI-7403/data_section_frontend

Data section frontend for the user column

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -35,7 +35,7 @@
   import JSONSchemaModal from "./JSONSchemaModal.svelte"
   import { ValidColumnNameRegex } from "@budibase/shared-core"
   import { admin } from "stores/portal"
-  import { FieldType } from "@budibase/types"
+  import { FieldSubtype, FieldType } from "@budibase/types"
 
   const AUTO_TYPE = "auto"
   const FORMULA_TYPE = FIELDS.FORMULA.type
@@ -44,6 +44,11 @@
   const NUMBER_TYPE = FIELDS.NUMBER.type
   const JSON_TYPE = FIELDS.JSON.type
   const DATE_TYPE = FIELDS.DATETIME.type
+  const BB_REFERENCE_TYPE = FieldType.BB_REFERENCE
+  const BB_USER_REFERENCE_TYPE = composeType(
+    BB_REFERENCE_TYPE,
+    FieldSubtype.USER
+  )
 
   const dispatch = createEventDispatcher()
   const PROHIBITED_COLUMN_NAMES = ["type", "_id", "_rev", "tableId"]
@@ -77,11 +82,15 @@
     delete fieldDefinitions.USER
   }
 
+  function composeType(fieldType, subtype) {
+    return `${fieldType}_${subtype}`
+  }
+
   // Handling fields with subtypes
   fieldDefinitions = Object.entries(fieldDefinitions).reduce(
     (p, [key, field]) => {
-      if (field.type === FieldType.BB_REFERENCE) {
+      if (field.type === BB_REFERENCE_TYPE) {
-        const composedType = `${field.type}_${field.subtype}`
+        const composedType = composeType(field.type, field.subtype)
         p[key] = {
           ...field,
           type: composedType,
@@ -142,6 +151,8 @@
 
   $: initialiseField(field, savingColumn)
 
+  $: isBBReference = !!bbRefTypeMapping[editableColumn.type]
+
   $: checkConstraints(editableColumn)
   $: required = !!editableColumn?.constraints?.presence || primaryDisplay
   $: uneditable =
@@ -303,9 +314,10 @@
     // Default relationships many to many
     if (editableColumn.type === LINK_TYPE) {
       editableColumn.relationshipType = RelationshipType.MANY_TO_MANY
-    }
+    } else if (editableColumn.type === FORMULA_TYPE) {
-    if (editableColumn.type === FORMULA_TYPE) {
       editableColumn.formulaType = "dynamic"
+    } else if (editableColumn.type === BB_USER_REFERENCE_TYPE) {
+      editableColumn.relationshipType = RelationshipType.ONE_TO_MANY
     }
   }
 
@@ -666,6 +678,17 @@
     <Button primary text on:click={openJsonSchemaEditor}
       >Open schema editor</Button
     >
+  {:else if isBBReference}
+    <Toggle
+      value={editableColumn.relationshipType === RelationshipType.MANY_TO_MANY}
+      on:change={e =>
+        (editableColumn.relationshipType = e.detail
+          ? RelationshipType.MANY_TO_MANY
+          : RelationshipType.ONE_TO_MANY)}
+      disabled={!isCreating}
+      thin
+      text="Allow multiple users"
+    />
   {/if}
   {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
     <Select

packages/frontend-core/src/components/grid/cells/BBReferenceCell.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { getContext } from "svelte"
+  import RelationshipCell from "./RelationshipCell.svelte"
+  import { FieldSubtype } from "@budibase/types"
+
+  const { API } = getContext("grid")
+  const { subtype } = $$props.schema
+
+  const schema = {
+    ...$$props.schema,
+    // This is not really used, just adding some content to be able to render the relationship cell
+    tableId: "external",
+  }
+
+  async function searchFunction(searchParams) {
+    if (subtype !== FieldSubtype.USER) {
+      throw `Search for '${subtype}' not implemented`
+    }
+
+    const results = await API.searchUsers({
+      ...searchParams,
+    })
+    return {
+      ...results,
+      data: undefined,
+      rows: results.data,
+    }
+  }
+</script>
+
+<RelationshipCell
+  {...$$props}
+  {schema}
+  {searchFunction}
+  primaryDisplay={"email"}
+/>

packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte

@@ -21,6 +21,8 @@
   import { Icon, Input, ProgressCircle, clickOutside } from "@budibase/bbui"
   import { debounce } from "../../../utils/utils"
 
+  const { API, dispatch } = getContext("grid")
+
   export let value
   export let api
   export let readonly
@@ -30,15 +32,15 @@
   export let invertX = false
   export let invertY = false
   export let contentLines = 1
+  export let searchFunction = API.searchTable
+  export let primaryDisplay
 
-  const { API, dispatch } = getContext("grid")
   const color = getColor(0)
 
   let isOpen = false
   let searchResults
   let searchString
   let lastSearchString
-  let primaryDisplay
   let candidateIndex
   let lastSearchId
   let searching = false
@@ -96,7 +98,7 @@
     lastSearchId = Math.random()
     searching = true
     const thisSearchId = lastSearchId
-    const results = await API.searchTable({
+    const results = await searchFunction({
       paginate: false,
       tableId: schema.tableId,
       limit: 20,
@@ -259,14 +261,16 @@
       on:wheel={e => (focused ? e.stopPropagation() : null)}
     >
       {#each value || [] as relationship}
-        {#if relationship.primaryDisplay}
+        {#if relationship[primaryDisplay] || relationship.primaryDisplay}
           <div class="badge">
             <span
               on:click={editable
                 ? () => showRelationship(relationship._id)
                 : null}
             >
-              {readable(relationship.primaryDisplay)}
+              {readable(
+                relationship[primaryDisplay] || relationship.primaryDisplay
+              )}
             </span>
             {#if editable}
               <Icon

packages/frontend-core/src/components/grid/lib/renderers.js

@@ -9,6 +9,7 @@ import BooleanCell from "../cells/BooleanCell.svelte"
 import FormulaCell from "../cells/FormulaCell.svelte"
 import JSONCell from "../cells/JSONCell.svelte"
 import AttachmentCell from "../cells/AttachmentCell.svelte"
+import BBReferenceCell from "../cells/BBReferenceCell.svelte"
 
 const TypeComponentMap = {
   text: TextCell,
@@ -23,6 +24,7 @@ const TypeComponentMap = {
   link: RelationshipCell,
   formula: FormulaCell,
   json: JSONCell,
+  bb_reference: BBReferenceCell,
 }
 export const getCellRenderer = column => {
   return TypeComponentMap[column?.schema?.type] || TextCell

packages/frontend-core/src/components/grid/lib/utils.js

@@ -19,7 +19,7 @@ const TypeIconMap = {
   formula: "Calculator",
   json: "Brackets",
   bigint: "TagBold",
-  internal: {
+  bb_reference: {
     user: "User",
   },
 }