initial work to switch toggle to radio button

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.58.5",
+    "@budibase/bbui": "^1.58.6",
     "@budibase/client": "^0.7.7",
     "@budibase/colorpicker": "1.0.1",
     "@budibase/string-templates": "^0.7.7",

packages/builder/src/builderStore/store/backend.js

@@ -234,7 +234,7 @@ export const getBackendUiStore = () => {
           return state
         })
       },
-      saveField: ({ originalName, field, primaryDisplay = false, indexes, oneToMany = false }) => {
+      saveField: ({ originalName, field, primaryDisplay = false, indexes, relationshipType = 'many-to-many' }) => {
         store.update(state => {
           console.log(state)
           // delete the original if renaming
@@ -252,8 +252,8 @@ export const getBackendUiStore = () => {
             state.draftTable.primaryDisplay = field.name
           }
           // Set one-to-many
-          if (oneToMany) {
-            state.draftTable.oneToMany = field.name
+          if (relationshipType) {
+            state.draftTable.relationshipType = field.name
           }
 
           if (indexes) {

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -195,7 +195,7 @@ export function makeDatasourceFormComponents(datasource) {
         component.customProps({ placeholder: "Choose an option " })
       }
       if (fieldType === "link") {
-        let placeholder = fieldSchema.oneToMany ? 'Choose an option' : 'Choose some options'
+        let placeholder = fieldSchema.relationshipType === 'one-to-many' ? 'Choose an option' : 'Choose some options'
         component.customProps({ placeholder })
       }
       if (fieldType === "boolean") {

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

@@ -6,6 +6,8 @@
     TextButton,
     Select,
     Toggle,
+    Radio,
+
   } from "@budibase/bbui"
   import { cloneDeep } from "lodash/fp"
   import { backendUiStore } from "builderStore"
@@ -31,8 +33,15 @@
   let primaryDisplay =
     $backendUiStore.selectedTable.primaryDisplay == null ||
     $backendUiStore.selectedTable.primaryDisplay === field.name
-    
-  let oneToMany = false;
+
+  let relationshipTypes = [
+    {text: 'Many to many (N:N)', value: 'many-to-many',},
+    {text: 'One to many (1:N)', value: 'one-to-many',}
+  ]
+  let relationshipType = 'many-to-many';
+
+  $: console.log(relationshipType)
+
   let indexes = [...($backendUiStore.selectedTable.indexes || [])]
   let confirmDeleteDialog
   let deletion
@@ -51,7 +60,7 @@
         originalName,
         field,
         primaryDisplay,
-        oneToMany,
+        relationshipType,
         indexes,
       })
       return state
@@ -187,11 +196,14 @@
       label="Max Value"
       bind:value={field.constraints.numericality.lessThanOrEqualTo} />
   {:else if field.type === 'link'}
-    <Toggle
-      disabled={originalName}
-      bind:checked={field.oneToMany}
-      thin
-      text="One to many?" />
+  <div>
+      <Label grey extraSmall>Select relationship type</Label>
+      <div class="radio-buttons">
+        {#each relationshipTypes as {text, value}}
+          <Radio name="Relationship type" {value} bind:group={relationshipType} label={text} showLabel/>
+        {/each}
+      </div>
+    </div>
     <Select label="Table" thin secondary bind:value={field.tableId}>
       <option value="">Choose an option</option>
       {#each tableOptions as table}
@@ -220,6 +232,11 @@
   title="Confirm Deletion" />
 
 <style>
+  .radio-buttons {
+    display: flex;
+    gap: var(--spacing-m);
+    font-size: var(--font-size-xs)
+  }
   .actions {
     display: grid;
     grid-gap: var(--spacing-xl);

packages/builder/src/components/common/LinkedRowSelector.svelte

@@ -41,7 +41,7 @@
     table.
   </Label>
 {:else}
-  {#if schema.oneToMany}
+  {#if schema.relationshipType === 'one-to-many'}
     <Select secondary on:change={e => linkedRows = [e.target.value]} name={label} {label}>
       <option value="">Choose an option</option>
       {#each rows as row}

packages/builder/yarn.lock

@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.5":
-  version "1.58.5"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
-  integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
+"@budibase/bbui@^1.58.6":
+  version "1.58.6"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.6.tgz#ed74c99abdd61a2893cc30362ff893f98037fcce"
+  integrity sha512-xAKbQxucyVWLZGCaJiaacu1pyZX7vCqoPJJiQx/eF+7gX8uB1gCuzxhncM4ZaIwCCiuc51dD2Q19t3R4ObxxCA==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

packages/standard-components/src/forms/RelationshipField.svelte

@@ -19,7 +19,7 @@
   let fieldText = ""
   
   const setFieldText = (value) => {
-    if (fieldSchema?.oneToMany) {
+    if (fieldSchema?.relationshipType === 'one-to-many') {
       if (value?.length && options?.length) {
         const row = options.find(row => row._id === value[0])
         return row.name
@@ -73,7 +73,7 @@
   }
 
   const toggleOption = option => {
-    if (fieldSchema.oneToMany) {
+    if (fieldSchema.type === 'one-to-many') {
       fieldApi.setValue([option])
     } else {
       if ($fieldState.value.includes(option)) {