Add support for rendering real relationships inside grid
This commit is contained in:
parent
7e30061abb
commit
0b5f516485
3 changed files with 88 additions and 2 deletions
|
@ -0,0 +1,58 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte"
|
||||||
|
import api from "../../api"
|
||||||
|
import getTable from "./tableCache"
|
||||||
|
|
||||||
|
export let columnName
|
||||||
|
export let row
|
||||||
|
|
||||||
|
let linkedRows = []
|
||||||
|
let displayColumn
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
linkedRows = await fetchLinkedRowsData(row, columnName)
|
||||||
|
if (linkedRows && linkedRows.length) {
|
||||||
|
const table = await getTable(linkedRows[0].tableId)
|
||||||
|
if (table && table.primaryDisplay) {
|
||||||
|
displayColumn = table.primaryDisplay
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
async function fetchLinkedRowsData(row, columnName) {
|
||||||
|
if (!row || !row._id) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
const QUERY_URL = `/api/${row.tableId}/${row._id}/enrich`
|
||||||
|
const response = await api.get(QUERY_URL)
|
||||||
|
const enrichedRow = await response.json()
|
||||||
|
return enrichedRow[columnName]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
{#if linkedRows && linkedRows.length && displayColumn}
|
||||||
|
{#each linkedRows as linkedRow}
|
||||||
|
<div class="linked-row">{linkedRow[displayColumn]}</div>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.linked-row {
|
||||||
|
color: white;
|
||||||
|
background-color: var(--ink);
|
||||||
|
border-radius: var(--border-radius-l);
|
||||||
|
padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
|
||||||
|
var(--spacing-s);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,21 @@
|
||||||
|
import api from "../../api"
|
||||||
|
|
||||||
|
let cache = {}
|
||||||
|
|
||||||
|
async function fetchTable(id) {
|
||||||
|
const FETCH_TABLE_URL = `/api/tables/${id}`
|
||||||
|
const response = await api.get(FETCH_TABLE_URL)
|
||||||
|
return await response.json()
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function getTable(tableId) {
|
||||||
|
if (!tableId) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
if (!cache[tableId]) {
|
||||||
|
console.log("cache miss for " + tableId)
|
||||||
|
cache[tableId] = fetchTable(tableId)
|
||||||
|
cache[tableId] = await cache[tableId]
|
||||||
|
}
|
||||||
|
return await cache[tableId]
|
||||||
|
}
|
|
@ -4,6 +4,7 @@
|
||||||
import AttachmentCell from "./AttachmentCell/Button.svelte"
|
import AttachmentCell from "./AttachmentCell/Button.svelte"
|
||||||
import Select from "./Select/Wrapper.svelte"
|
import Select from "./Select/Wrapper.svelte"
|
||||||
import DatePicker from "./DateTime/Wrapper.svelte"
|
import DatePicker from "./DateTime/Wrapper.svelte"
|
||||||
|
import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
|
||||||
|
|
||||||
const renderers = new Map([
|
const renderers = new Map([
|
||||||
["boolean", booleanRenderer],
|
["boolean", booleanRenderer],
|
||||||
|
@ -103,14 +104,20 @@ function optionsRenderer({ inclusion }, editable) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
function linkedRowRenderer(constraints, editable) {
|
function linkedRowRenderer(constraints, editable, schema) {
|
||||||
return params => {
|
return params => {
|
||||||
let container = document.createElement("div")
|
let container = document.createElement("div")
|
||||||
container.style.display = "grid"
|
container.style.display = "grid"
|
||||||
container.style.placeItems = "center"
|
container.style.placeItems = "center"
|
||||||
container.style.height = "100%"
|
container.style.height = "100%"
|
||||||
|
|
||||||
container.innerText = params.value ? params.value.length : 0
|
new RelationshipDisplay({
|
||||||
|
target: container,
|
||||||
|
props: {
|
||||||
|
row: params.data,
|
||||||
|
columnName: params.column.colId,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
return container
|
return container
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue