CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 20:41:03 +12:00
Code Issues Projects Releases Wiki Activity

Display enriched relationship info in grids and bindings

Browse source
This commit is contained in:
Andrew Kingston 2021-02-19 12:00:06 +00:00
parent fa6d3e5e63
commit 7b4b22377d
3 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/builderStore/dataBinding.js
View file

@ -136,7 +136,7 @@ const getContextBindings = (asset, componentId) => {
// Replace certain bindings with a new property to help display components
let runtimeBoundKey = key
if (fieldSchema.type === "link") {
runtimeBoundKey = `${key}_count`
runtimeBoundKey = `${key}_text`
} else if (fieldSchema.type === "attachment") {
runtimeBoundKey = `${key}_first`
}
@ -176,7 +176,7 @@ const getUserBindings = () => {
// Replace certain bindings with a new property to help display components
let runtimeBoundKey = key
if (fieldSchema.type === "link") {
runtimeBoundKey = `${key}_count`
runtimeBoundKey = `${key}_text`
} else if (fieldSchema.type === "attachment") {
runtimeBoundKey = `${key}_first`
}

4
packages/client/src/api/rows.js
View file

@ -119,8 +119,8 @@ export const enrichRows = async (rows, tableId) => {
for (let key of keys) {
const type = schema[key].type
if (type === "link") {
// Enrich row with the count of any relationship fields
row[`${key}_count`] = Array.isArray(row[key]) ? row[key].length : 0
// Enrich row a string join of relationship fields
row[`${key}_text`] = row[key]?.join(", ") || ""
} else if (type === "attachment") {
// Enrich row with the first image URL for any attachment fields
let url = null

20
packages/standard-components/src/grid/Relationship/RelationshipCount.svelte
View file

@ -2,13 +2,14 @@
export let columnName
export let row
$: count =
row && columnName && Array.isArray(row[columnName])
? row[columnName].length
: 0
$: items = row?.[columnName] || []
</script>
<div class="container">{count} related row(s)</div>
<div class="container">
{#each items as item}
<div class="item">{item}</div>
{/each}
</div>
<style>
.container {
@ -19,4 +20,13 @@
gap: var(--spacing-xs);
width: 100%;
}
.item {
font-size: var(--font-size-xs);
padding: var(--spacing-xs) var(--spacing-s);
border: 1px solid #888;
color: #666;
line-height: normal;
border-radius: 4px;
}
</style>