Merge pull request #14482 from Budibase/BUDI-8561/display-relationship-fields

Display relationship fields

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

@@ -29,6 +29,7 @@
   let searching = false
   let container
   let anchor
+  let relationshipFields
 
   $: fieldValue = parseValue(value)
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
@@ -41,6 +42,26 @@
     }
   }
 
+  $: relationFields = fieldValue?.reduce((acc, f) => {
+    const fields = {}
+    for (const [column] of Object.entries(schema?.columns || {}).filter(
+      ([key, column]) =>
+        column.visible !== false && f[key] !== null && f[key] !== undefined
+    )) {
+      fields[column] = f[column]
+    }
+    if (Object.keys(fields).length) {
+      acc[f._id] = fields
+    }
+    return acc
+  }, {})
+
+  $: showRelationshipFields =
+    relationshipFields &&
+    Object.keys(relationshipFields).length &&
+    focused &&
+    !isOpen
+
   const parseValue = value => {
     if (Array.isArray(value) && value.every(x => x?._id)) {
       return value
@@ -221,6 +242,14 @@
     return value
   }
 
+  const displayRelationshipFields = relationship => {
+    relationshipFields = relationFields[relationship._id]
+  }
+
+  const hideRelationshipFields = () => {
+    relationshipFields = undefined
+  }
+
   onMount(() => {
     api = {
       focus: open,
@@ -244,11 +273,18 @@
     <div
       class="values"
       class:wrap={editable || contentLines > 1}
+      class:disabled={!focused}
       on:wheel={e => (focused ? e.stopPropagation() : null)}
     >
       {#each fieldValue || [] as relationship}
         {#if relationship[primaryDisplay] || relationship.primaryDisplay}
-          <div class="badge">
+          <div
+            class="badge"
+            class:extra-info={!!relationFields[relationship._id]}
+            on:mouseover={() => displayRelationshipFields(relationship)}
+            on:focus={() => {}}
+            on:mouseleave={() => hideRelationshipFields()}
+          >
             <span>
               {readable(
                 relationship[primaryDisplay] || relationship.primaryDisplay
@@ -322,6 +358,21 @@
   </GridPopover>
 {/if}
 
+{#if showRelationshipFields}
+  <GridPopover {anchor} minWidth={300} maxWidth={400}>
+    <div class="relationship-fields">
+      {#each Object.entries(relationshipFields) as [fieldName, fieldValue]}
+        <div class="relationship-field-name">
+          {fieldName}
+        </div>
+        <div class="relationship-field-value">
+          {fieldValue}
+        </div>
+      {/each}
+    </div>
+  </GridPopover>
+{/if}
+
 <style>
   .wrapper {
     flex: 1 1 auto;
@@ -376,6 +427,9 @@
     padding: var(--cell-padding);
     flex-wrap: nowrap;
   }
+  .values.disabled {
+    pointer-events: none;
+  }
   .values.wrap {
     flex-wrap: wrap;
   }
@@ -407,6 +461,13 @@
     height: 20px;
     max-width: 100%;
   }
+  .values.wrap .badge:hover {
+    filter: brightness(1.25);
+  }
+  .values.wrap .badge.extra-info {
+    cursor: pointer;
+  }
+
   .badge span {
     overflow: hidden;
     white-space: nowrap;
@@ -478,4 +539,25 @@
   .search :global(.spectrum-Form-item) {
     flex: 1 1 auto;
   }
+
+  .relationship-fields {
+    margin: var(--spacing-m) var(--spacing-l);
+    display: grid;
+    grid-template-columns: minmax(auto, 50%) auto;
+    grid-row-gap: var(--spacing-m);
+    grid-column-gap: var(--spacing-m);
+  }
+
+  .relationship-field-name {
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+    font-size: var(--font-size-xs);
+  }
+  .relationship-field-value {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
 </style>

packages/server/src/sdk/app/views/index.ts

@@ -216,7 +216,7 @@ export async function enrichSchema(
     if (schema[key].type === FieldType.LINK) {
       schema[key].columns = await populateRelTableSchema(
         schema[key].tableId,
-        viewSchema[key].columns || {}
+        viewSchema[key]?.columns || {}
       )
     }
   }