CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-30 03:50:37 +12:00
Code Issues Projects Releases Wiki Activity

Add relationship enrichment display to backend UI

Browse source
This commit is contained in:
Andrew Kingston 2021-02-19 13:05:52 +00:00
parent d4d4a36448
commit e021b55704
2 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
View file

@ -3,24 +3,43 @@
export let row
export let selectRelationship
$: count =
row && columnName && Array.isArray(row[columnName])
? row[columnName].length
: 0
$: items = row?.[columnName] || []
</script>
<div class:link={count} on:click={() => selectRelationship(row, columnName)}>
{count}
related row(s)
<div
class="container"
class:link={!!items.length}
on:click={() => selectRelationship(row, columnName)}>
{#each items as item}
<div class="item">{item}</div>
{/each}
</div>
<style>
.link {
text-decoration: underline;
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xs);
}
.link:hover {
color: var(--grey-6);
cursor: pointer;
}
.link:hover .item {
color: var(--ink);
border-color: var(--ink);
}
.item {
font-size: var(--font-size-xs);
padding: var(--spacing-xs) var(--spacing-s);
border: 1px solid var(--grey-5);
color: var(--grey-7);
line-height: normal;
border-radius: 4px;
text-decoration: none;
}
</style>

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

@ -24,8 +24,8 @@
.item {
font-size: var(--font-size-xs);
padding: var(--spacing-xs) var(--spacing-s);
border: 1px solid #888;
color: #666;
border: 1px solid var(--grey-5);
color: var(--grey-7);
line-height: normal;
border-radius: 4px;
}