relationship configuration panel

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/CreateEditRelationship.svelte

@@ -1,79 +0,0 @@
-<script>
-   import { Button, ModalContent, RadioGroup, Heading } from "@budibase/bbui"
-
-  const STEPS = 3
-
-  export let save
-
-  let relationship = {}
-  let step = 0
-
-  function nextStep() {
-    if (step + 1 === STEPS) return
-    step = step + 1
-  }
-
-  function previousStep() {
-    if (step === 0) return
-    step = step - 1
-  }
-
-  function saveRelationship() {
-    // save the relationship on to the datasource
-    // save()
-  }
-
-  function getRelationshipOptions(field) {
-    if (!field || !field.tableId) {
-      return null
-    }
-    const linkTable = tableOptions.find(table => table._id === field.tableId)
-    if (!linkTable) {
-      return null
-    }
-    const thisName = truncate(table.name, { length: 14 }),
-      linkName = truncate(linkTable.name, { length: 14 })
-    return [
-      {
-        name: `Many ${thisName} rows → many ${linkName} rows`,
-        alt: `Many ${table.name} rows → many ${linkTable.name} rows`,
-        value: RelationshipTypes.MANY_TO_MANY,
-      },
-      {
-        name: `One ${linkName} row → many ${thisName} rows`,
-        alt: `One ${linkTable.name} rows → many ${table.name} rows`,
-        value: RelationshipTypes.ONE_TO_MANY,
-      },
-      {
-        name: `One ${thisName} row → many ${linkName} rows`,
-        alt: `One ${table.name} rows → many ${linkTable.name} rows`,
-        value: RelationshipTypes.MANY_TO_ONE,
-      },
-    ]
-  }
-</script>
-
-<ModalContent
-  size="XL"
-  title="Edit Code"
-  showConfirmButton={false}
-  showCancelButton={false}
->
-  {#if step === 0}
-    <Heading>Select your table</Heading>
-  {:else if step === 1}
-      <!-- <RadioGroup
-        disabled={linkEditDisabled}
-        label="Define the relationship"
-        bind:value={relationship}
-        options={relationshipOptions}
-        getOptionLabel={option => option.name}
-        getOptionValue={option => option.value}
-      /> -->
-      Step 2
-  {:else if step === 2}
-    Step 3
-  {/if}
-  <Button on:click={previousStep}>Previous</Button>
-  <Button on:click={nextStep}>Next</Button>
-</ModalContent>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/CreateEditRelationship/CreateEditRelationship.svelte

@@ -2,33 +2,44 @@
   import { RelationshipTypes } from "constants/backend"
   import { Menu, MenuItem, MenuSection, Button, Input, Icon, ModalContent, RadioGroup, Heading } from "@budibase/bbui"
 
+  //  "tasks_something": {
+  //          "name": "tasks_something",
+  //          "type": "link",
+  //          "tableId": "whatever/othertable",
+  //          "relationshipType": "one-to-many",
+  //       },
+
   export let save
   export let datasource
+  export let from
   export let tables
-
+  export let relationship = {}
-  let relationship = {}
 
   $: console.log(relationship)
-  $: console.log("ds", datasource)
+  $: valid = relationship.name && relationship.tableId && relationship.relationshipType
-  $: valid = relationship.name && relationship.from && relationship.to && relationship.relationshipType
+  $: from = tables.find(table => table._id === relationship.source)
+  $: to = tables.find(table => table._id === relationship.tableId)
+  $: through = tables.find(table => table._id === relationship.through)
+  $: linkTable = through || to
 
-  $: relationshipOptions = relationship.from && relationship.to ?  [
+  $: relationshipOptions = from && to ?  [
       {
-        name: `Many ${relationship.from.name} rows → many ${relationship.to.name} rows`,
+        name: `Many ${from.name} rows → many ${to.name} rows`,
-        alt: `Many ${relationship.from.name} rows → many ${relationship.to.name} rows`,
+        alt: `Many ${from.name} rows → many ${to.name} rows`,
         value: RelationshipTypes.MANY_TO_MANY,
       },
       {
-        name: `One ${relationship.from.name} row → many ${relationship.to.name} rows`,
+        name: `One ${from.name} row → many ${to.name} rows`,
-        alt: `One ${relationship.from.name} rows → many ${relationship.to.name} rows`,
+        alt: `One ${from.name} rows → many ${to.name} rows`,
         value: RelationshipTypes.ONE_TO_MANY,
-      },
+      }
-      {
-        name: `One ${relationship.from.name} row → many ${relationship.to.name} rows`,
-        alt: `One ${relationship.from.name} row → many ${relationship.to.name} rows`,
-        value: RelationshipTypes.MANY_TO_ONE,
-      },
     ] : []
+  
+  function onChangeRelationshipType(evt) {
+    if (evt.detail === RelationshipTypes.ONE_TO_MANY) {
+      relationship.through = null
+    }
+  }
 
   // save the relationship on to the datasource
   function saveRelationship() {
@@ -67,9 +78,9 @@
     <Menu>
       <MenuSection heading="From">
         {#each tables as table}
-          <MenuItem noClose icon="Table" on:click={() => (relationship.from = table)}>
+          <MenuItem noClose icon="Table" on:click={() => (relationship.source = table._id)}>
             {table.name}
-             {#if relationship.from?._id === table._id}
+             {#if relationship.source === table._id}
               <Icon size="S" name="Checkmark" />
              {/if}
           </MenuItem>
@@ -79,9 +90,9 @@
     <Menu>
       <MenuSection heading="To">
         {#each tables as table}
-          <MenuItem noClose icon="Table" on:click={() => (relationship.to = table)}>
+          <MenuItem noClose icon="Table" on:click={() => (relationship.tableId = table._id)}>
             {table.name}
-             {#if relationship.to?._id === table._id}
+             {#if relationship.tableId === table._id}
               <Icon size="S" name="Checkmark" />
              {/if}
           </MenuItem>
@@ -90,61 +101,50 @@
     </Menu>
   </div>
 
-  {#if relationship.from && relationship.to}
+  {#if from && to}
     <div class="cardinality">
       <RadioGroup
         label="Define the relationship"
         bind:value={relationship.relationshipType}
+        on:change={onChangeRelationshipType}
         options={relationshipOptions}
         getOptionLabel={option => option.name}
         getOptionValue={option => option.value}
       />
     </div>
-  {/if}
 
   {#if relationship?.relationshipType === RelationshipTypes.MANY_TO_MANY}
     <Menu>
       <MenuSection heading="Join Table">
         {#each tables as table}
-          <MenuItem noClose icon="Table" on:click={() => (relationship.through = table)}>
+          <MenuItem noClose icon="Table" on:click={() => (relationship.through = table._id)}>
             {table.name}
-              {#if relationship.through?._id === table._id}
+              {#if relationship.through === table._id}
               <Icon size="S" name="Checkmark" />
               {/if}
           </MenuItem>
         {/each}
       </MenuSection>
     </Menu>
+  {/if}
 
-    {#if relationship.through}
+
-      <div class="table-selector">
+    <div class="table-selector">
-        <Menu>
+      <Menu>
-          <MenuSection heading={`${relationship.from.name} Column`}>
+        <MenuSection heading={`${linkTable.name} Column`}>
-            {#each Object.keys(relationship.through) as column}
+          {#each Object.keys(linkTable.schema) as column}
-              <MenuItem noClose icon="Table" on:click={() => (relationship.through.from = column)}>
+            <MenuItem noClose icon="Table" on:click={() => (relationship.foreignKey = column)}>
-                {column}
+              {column}
-                  {#if relationship.through.from?._id === column._id}
+                {#if relationship.foreignKey === column}
-                  <Icon size="S" name="Checkmark" />
-                  {/if}
-              </MenuItem>
-            {/each}
-          </MenuSection>
-        </Menu>
-        <Menu>
-          <MenuSection heading={`${relationship.to.name} Column`}>
-            {#each Object.keys(relationship.through) as column}
-              <MenuItem noClose icon="Table" on:click={() => (relationship.through.to = column)}>
-                {column}
-                  {#if relationship.through.to?._id === column._id}
                   <Icon size="S" name="Checkmark" />
-                  {/if}
+                {/if}
-              </MenuItem>
+            </MenuItem>
-            {/each}
+          {/each}
-          </MenuSection>
+        </MenuSection>
-        </Menu>
+      </Menu>
-      </div>
+    </div>
-    {/if}
   {/if}
+
 </ModalContent>
 
 <style>

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -4,7 +4,7 @@
   import { datasources, integrations, queries, tables } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
-  import CreateEditRelationship from "./CreateEditRelationship.svelte"
+  import CreateEditRelationship from "./CreateEditRelationship/CreateEditRelationship.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons"
   import { capitalise } from "helpers"