Add relationship enrichment display to backend UI

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

View File

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

View File

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