reinstating relationships

.vscode/settings.json

@@ -5,7 +5,7 @@
         "source.fixAll": true
     },
     "[svelte]": {
-        "editor.defaultFormatter": "JamesBirtles.svelte-vscode"
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -1,5 +1,6 @@
 <script>
   import { fade } from "svelte/transition"
+  import { goto, params } from "@sveltech/routify"
   import Spinner from "components/common/Spinner.svelte"
   import AgGrid from "@budibase/svelte-ag-grid"
   import { getRenderer, editRowRenderer } from "./cells/cellRenderers";
@@ -46,33 +47,31 @@
       })
     }
     columnDefs = [...result, ...Object.keys(schema || {}).map(key => ({
-      // headerCheckboxSelection: i === 0 && canEdit,
-      // checkboxSelection: i === 0 && canEdit,
-      // valueSetter: setters.get(schema[key].type),
       headerComponent: TableHeader,
       headerComponentParams: {
         field: schema[key]
       },
       headerName: key,
       field: key,
-      // hide: shouldHideField(key),
       sortable: true,
-      // editable: canEdit && schema[key].type !== "link",
       cellRenderer: getRenderer(schema[key], true),
+      cellRendererParams: {
+        selectRelationship
+      },
       autoHeight: true,
       resizable: true,
       minWidth: 200,
     }))]
   }
 
-  // function selectRelationship(row, fieldName) {
-  //   if (!row?.[fieldName]?.length) {
-  //     return
-  //   }
-  //   $goto(
-  //     `/${$params.application}/data/table/${tableId}/relationship/${row._id}/${fieldName}`
-  //   )
-  // }
+  function selectRelationship(row, fieldName) {
+    if (!row?.[fieldName]?.length) {
+      return
+    }
+    $goto(
+      `/${$params.application}/data/table/${row.tableId}/relationship/${row._id}/${fieldName}`
+    )
+  }
 </script>
 
 <section>

packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte

@@ -1,80 +1,28 @@
 <script>
-  import { onMount } from "svelte"
-  import { goto, params } from "@sveltech/routify"
-  import api from "builderStore/api"
-  import { getTable } from "./tableCache"
-
   export let columnName
   export let row
+  export let selectRelationship
 
   $: count =
     row && columnName && Array.isArray(row[columnName])
       ? row[columnName].length
       : 0
-  let linkedRows = []
-  let displayColumn
-
-  onMount(async () => {
-    linkedRows = await fetchLinkedRowsData(row, columnName)
-    if (linkedRows && linkedRows.length) {
-      const table = await getTable(linkedRows[0].tableId)
-      if (table && table.primaryDisplay) {
-        displayColumn = table.primaryDisplay
-      }
-    }
-  })
-
-  async function fetchLinkedRowsData(row, columnName) {
-    if (!row || !row._id) {
-      return []
-    }
-    const QUERY_URL = `/api/${row.tableId}/${row._id}/enrich`
-    const response = await api.get(QUERY_URL)
-    const enrichedRow = await response.json()
-    return enrichedRow[columnName]
-  }
-
-  // TODO: wire up
-  function drillIntoRelationship(row, fieldName) {
-    if (!row?.[fieldName]?.length) {
-      return
-    }
-    $goto(
-      `/${$params.application}/data/table/${tableId}/relationship/${row._id}/${fieldName}`
-    )
-  }
 </script>
 
-<div class="container">
-  {#if linkedRows && linkedRows.length && displayColumn}
-    {#each linkedRows as linkedRow}
-      {#if linkedRow[displayColumn] != null && linkedRow[displayColumn] !== ''}
-        <div class="linked-row">{linkedRow[displayColumn]}</div>
-      {/if}
-    {/each}
-  {:else}{count} related row(s){/if}
+<div
+  class:link={count}
+  on:click={() => selectRelationship(row, columnName)}>
+  {count}
+  related row(s)
 </div>
 
 <style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-xs);
-    width: 100%;
+  .link {
+    text-decoration: underline;
   }
 
-  /* This styling is opinionated to ensure these always look consistent */
-  .linked-row {
-    color: white;
-    background-color: #616161;
-    border-radius: var(--border-radius-xs);
-    padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
-      var(--spacing-s);
-    line-height: 1;
-    font-size: 0.8em;
-    font-family: var(--font-sans);
-    font-weight: 500;
+  .link:hover {
+    color: var(--grey-6);
+    cursor: pointer;
   }
 </style>

packages/builder/src/components/backend/DataTable/cells/cellRenderers.js

@@ -6,7 +6,6 @@ import RelationshipDisplay from "./RelationshipCell.svelte"
 const renderers = {
   attachment: attachmentRenderer,
   link: linkedRowRenderer,
-  boolean: booleanRenderer,
 }
 
 export function getRenderer(schema, editable) {
@@ -30,33 +29,6 @@ export function editRowRenderer(params) {
   return container
 }
 
-/* eslint-disable no-unused-vars */
-function booleanRenderer(options, constraints) {
-  return params => {
-    let container = document.createElement("input")
-
-    // TODO: implement
-
-    return container
-
-    // const toggle = e => {
-    //   params.value = !params.value
-    //   params.setValue(e.currentTarget.checked)
-    // }
-    // let input = document.createElement("input")
-    // input.style.display = "grid"
-    // input.style.placeItems = "center"
-    // input.style.height = "100%"
-    // input.type = "checkbox"
-    // input.checked = params.value
-    // if (editable) {
-    //   input.addEventListener("click", toggle)
-    // } else {
-    //   input.disabled = true
-    // }
-    // return input
-  }
-}
 
 /* eslint-disable no-unused-vars */
 function attachmentRenderer(options, constraints, editable) {
@@ -82,11 +54,10 @@ function attachmentRenderer(options, constraints, editable) {
 }
 
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(options, constraints, editable) {
+function linkedRowRenderer() {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
-    container.style.placeItems = "center"
     container.style.height = "100%"
 
     new RelationshipDisplay({
@@ -94,6 +65,7 @@ function linkedRowRenderer(options, constraints, editable) {
       props: {
         row: params.data,
         columnName: params.column.colId,
+        selectRelationship: params.selectRelationship
       },
     })