Add functional backend UI for navigating relationships

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

@@ -0,0 +1,32 @@
+<script>
+  import api from "builderStore/api"
+  import Table from "./Table.svelte"
+  import { onMount } from "svelte"
+  import { backendUiStore } from "builderStore"
+
+  export let modelId
+  export let recordId
+  export let fieldName
+
+  let record
+
+  $: data = record?.[fieldName] ?? []
+  $: linkedModelId = data?.length ? data[0].modelId : null
+  $: linkedModel = $backendUiStore.models.find(
+    model => model._id === linkedModelId
+  )
+  $: schema = linkedModel?.schema
+  $: model = $backendUiStore.models.find(model => model._id === modelId)
+  $: title = `${record?.[model?.primaryDisplay]} - ${fieldName}`
+  $: fetchData(modelId, recordId)
+
+  async function fetchData(modelId, recordId) {
+    const QUERY_VIEW_URL = `/api/${modelId}/${recordId}/enrich`
+    const response = await api.get(QUERY_VIEW_URL)
+    record = await response.json()
+  }
+</script>
+
+{#if record && record._id === recordId}
+  <Table {title} {schema} {data} />
+{/if}

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

@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@sveltech/routify"
+  import { goto, params } from "@sveltech/routify"
   import { onMount } from "svelte"
   import fsort from "fast-sort"
   import getOr from "lodash/fp/getOr"
@@ -33,12 +33,16 @@
     sorted && sorted.length
       ? sorted.slice(
       currentPage * ITEMS_PER_PAGE,
-          currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
+      currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE,
       )
       : []
+  $: modelId = data?.length ? data[0].modelId : null
 
-  function selectRelationship(recordId, fieldName) {
+  function selectRelationship(record, fieldName) {
-    $goto(`../relationship/${recordId}/${fieldName}`)
+    if (!record?.[fieldName]?.length) {
+      return
+    }
+    $goto(`/${$params.application}/backend/model/${modelId}/relationship/${record._id}/${fieldName}`)
   }
 </script>
 
@@ -46,7 +50,7 @@
   <div class="table-controls">
     <h2 class="title">{title}</h2>
     <div class="popovers">
-      <slot />
+      <slot/>
     </div>
   </div>
   <table class="bb-table">
@@ -60,8 +64,10 @@
       {#each columns as header}
         <th>
           {#if allowEditing}
-              <ColumnHeaderPopover field={schema[header]} />
+            <ColumnHeaderPopover field={schema[header]}/>
-            {:else}{header}{/if}
+          {:else}
+            <div class="header">{header}</div>
+          {/if}
         </th>
       {/each}
     </tr>
@@ -81,19 +87,19 @@
       <tr>
         {#if allowEditing}
           <td>
-              <EditRowPopover {row} />
+            <EditRowPopover {row}/>
           </td>
         {/if}
         {#each columns as header}
           <td>
             {#if schema[header].type === 'link'}
               <div
-                  class="link"
+                  class:link={row[header] && row[header].length}
-                  on:click={() => selectRelationship(row._id, header)}>
+                  on:click={() => selectRelationship(row, header)}>
                 {row[header] ? row[header].length : 0} linked row(s)
               </div>
             {:else if schema[header].type === 'attachment'}
-                <AttachmentList files={row[header] || []} />
+              <AttachmentList files={row[header] || []}/>
             {:else}{getOr('', header, row)}{/if}
           </td>
         {/each}
@@ -105,7 +111,7 @@
       {data}
       bind:currentPage
       pageItemCount={paginatedData.length}
-    {ITEMS_PER_PAGE} />
+      {ITEMS_PER_PAGE}/>
 </section>
 
 <style>
@@ -121,12 +127,14 @@
     border: 1px solid var(--grey-4);
     background: #fff;
     border-collapse: collapse;
+    margin-top: 0;
   }
 
   thead {
     background: var(--grey-3);
     border: 1px solid var(--grey-4);
   }
+
   thead th {
     color: var(--ink);
     font-weight: 500;
@@ -138,11 +146,16 @@
     padding-top: 0;
     padding-bottom: 0;
   }
+
   thead th:hover {
     color: var(--blue);
     cursor: pointer;
   }
 
+  .header {
+    text-transform: capitalize;
+  }
+
   td {
     max-width: 200px;
     text-overflow: ellipsis;
@@ -152,6 +165,7 @@
     padding: var(--spacing-l) var(--spacing-m);
     font-size: var(--font-size-xs);
   }
+
   td.no-border {
     border: none;
   }
@@ -161,6 +175,7 @@
     transition: 0.3s background-color;
     color: var(--ink);
   }
+
   tbody tr:hover {
     background: var(--grey-1);
   }
@@ -175,11 +190,13 @@
 
   :global(.popovers > div) {
     margin-right: var(--spacing-m);
+    margin-bottom: var(--spacing-xl);
   }
 
   .edit-header {
     width: 60px;
   }
+
   .edit-header:hover {
     cursor: default;
     color: var(--ink);
@@ -188,6 +205,7 @@
   .link {
     text-decoration: underline;
   }
+
   .link:hover {
     color: var(--grey-6);
     cursor: pointer;

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

@@ -69,11 +69,13 @@
     {/each}
   </Select>
 
+  {#if field.type !== 'link'}
     <Toggle
       checked={!field.constraints.presence.allowEmpty}
       on:change={e => (field.constraints.presence.allowEmpty = !e.target.checked)}
       thin
       text="Required" />
+  {/if}
 
   {#if field.type === 'string'}
     <Input

packages/builder/src/components/backend/DataTable/popovers/CreateEditRecord.svelte

@@ -13,19 +13,17 @@
   export let onClosed
 
   let errors = []
-  let selectedModel
+  $: model = record.modelId ? $backendUiStore.models.find(model => model._id === record?.modelId) : $backendUiStore.selectedModel
-
+  $: modelSchema = Object.entries(model?.schema ?? {})
-  $: modelSchema = $backendUiStore.selectedModel
+  $: console.log(modelSchema)
-    ? Object.entries($backendUiStore.selectedModel.schema)
-    : []
 
   async function saveRecord() {
     const recordResponse = await api.saveRecord(
       {
         ...record,
-        modelId: $backendUiStore.selectedModel._id,
+        modelId: model._id,
       },
-      $backendUiStore.selectedModel._id
+      model._id
     )
     if (recordResponse.errors) {
       errors = Object.keys(recordResponse.errors)

packages/builder/src/pages/[application]/backend/model/[selectedModel]/relationship/[selectedRecord]/[selectedField]/index.svelte

@@ -1,18 +1,7 @@
 <script>
-  import { onMount } from "svelte"
   import { params } from "@sveltech/routify"
-  import { backendUiStore } from "builderStore"
+  import RelationshipDataTable from "components/backend/DataTable/RelationshipDataTable.svelte"
-  import api from "../../../../../../../../builderStore/api"
-
-  console.log($params)
-  let data
-
-  onMount(async () => {
-    const QUERY_VIEW_URL = `/api/${$params.selectedModel}/${$params.selectedRecord}/enrich`
-    const response = await api.get(QUERY_VIEW_URL)
-    data = await response.json()
-    console.log(data)
-  })
 </script>
 
-<div>hello world!</div>
+<RelationshipDataTable modelId={$params.selectedModel} recordId={$params.selectedRecord}
+                       fieldName={$params.selectedField}/>