reinstating relationships
This commit is contained in:
Martin McKeaveney
parent
19f1f01d1a
commit
3034c284df
|
|
@ -5,7 +5,7 @@
|
|||
"source.fixAll": true
|
||||
},
|
||||
"[svelte]": {
|
||||
"editor.defaultFormatter": "JamesBirtles.svelte-vscode"
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { fade } from "svelte/transition"
|
||||
import { goto, params } from "@sveltech/routify"
|
||||
import Spinner from "components/common/Spinner.svelte"
|
||||
import AgGrid from "@budibase/svelte-ag-grid"
|
||||
import { getRenderer, editRowRenderer } from "./cells/cellRenderers";
|
||||
|
|
@ -46,33 +47,31 @@
|
|||
})
|
||||
}
|
||||
columnDefs = [...result, ...Object.keys(schema || {}).map(key => ({
|
||||
// headerCheckboxSelection: i === 0 && canEdit,
|
||||
// checkboxSelection: i === 0 && canEdit,
|
||||
// valueSetter: setters.get(schema[key].type),
|
||||
headerComponent: TableHeader,
|
||||
headerComponentParams: {
|
||||
field: schema[key]
|
||||
},
|
||||
headerName: key,
|
||||
field: key,
|
||||
// hide: shouldHideField(key),
|
||||
sortable: true,
|
||||
// editable: canEdit && schema[key].type !== "link",
|
||||
cellRenderer: getRenderer(schema[key], true),
|
||||
cellRendererParams: {
|
||||
selectRelationship
|
||||
},
|
||||
autoHeight: true,
|
||||
resizable: true,
|
||||
minWidth: 200,
|
||||
}))]
|
||||
}
|
||||
|
||||
// function selectRelationship(row, fieldName) {
|
||||
// if (!row?.[fieldName]?.length) {
|
||||
// return
|
||||
// }
|
||||
// $goto(
|
||||
// `/${$params.application}/data/table/${tableId}/relationship/${row._id}/${fieldName}`
|
||||
// )
|
||||
// }
|
||||
function selectRelationship(row, fieldName) {
|
||||
if (!row?.[fieldName]?.length) {
|
||||
return
|
||||
}
|
||||
$goto(
|
||||
`/${$params.application}/data/table/${row.tableId}/relationship/${row._id}/${fieldName}`
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,28 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { goto, params } from "@sveltech/routify"
|
||||
import api from "builderStore/api"
|
||||
import { getTable } from "./tableCache"
|
||||
|
||||
export let columnName
|
||||
export let row
|
||||
export let selectRelationship
|
||||
|
||||
$: count =
|
||||
row && columnName && Array.isArray(row[columnName])
|
||||
? row[columnName].length
|
||||
: 0
|
||||
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]
|
||||
}
|
||||
|
||||
// TODO: wire up
|
||||
function drillIntoRelationship(row, fieldName) {
|
||||
if (!row?.[fieldName]?.length) {
|
||||
return
|
||||
}
|
||||
$goto(
|
||||
`/${$params.application}/data/table/${tableId}/relationship/${row._id}/${fieldName}`
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#if linkedRows && linkedRows.length && displayColumn}
|
||||
{#each linkedRows as linkedRow}
|
||||
{#if linkedRow[displayColumn] != null && linkedRow[displayColumn] !== ''}
|
||||
<div class="linked-row">{linkedRow[displayColumn]}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}{count} related row(s){/if}
|
||||
<div
|
||||
class:link={count}
|
||||
on:click={() => selectRelationship(row, columnName)}>
|
||||
{count}
|
||||
related row(s)
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
width: 100%;
|
||||
.link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* This styling is opinionated to ensure these always look consistent */
|
||||
.linked-row {
|
||||
color: white;
|
||||
background-color: #616161;
|
||||
border-radius: var(--border-radius-xs);
|
||||
padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
|
||||
var(--spacing-s);
|
||||
line-height: 1;
|
||||
font-size: 0.8em;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
.link:hover {
|
||||
color: var(--grey-6);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import RelationshipDisplay from "./RelationshipCell.svelte"
|
|||
const renderers = {
|
||||
attachment: attachmentRenderer,
|
||||
link: linkedRowRenderer,
|
||||
boolean: booleanRenderer,
|
||||
}
|
||||
|
||||
export function getRenderer(schema, editable) {
|
||||
|
|
@ -30,33 +29,6 @@ export function editRowRenderer(params) {
|
|||
return container
|
||||
}
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
function booleanRenderer(options, constraints) {
|
||||
return params => {
|
||||
let container = document.createElement("input")
|
||||
|
||||
// TODO: implement
|
||||
|
||||
return container
|
||||
|
||||
// const toggle = e => {
|
||||
// params.value = !params.value
|
||||
// params.setValue(e.currentTarget.checked)
|
||||
// }
|
||||
// let input = document.createElement("input")
|
||||
// input.style.display = "grid"
|
||||
// input.style.placeItems = "center"
|
||||
// input.style.height = "100%"
|
||||
// input.type = "checkbox"
|
||||
// input.checked = params.value
|
||||
// if (editable) {
|
||||
// input.addEventListener("click", toggle)
|
||||
// } else {
|
||||
// input.disabled = true
|
||||
// }
|
||||
// return input
|
||||
}
|
||||
}
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
function attachmentRenderer(options, constraints, editable) {
|
||||
|
|
@ -82,11 +54,10 @@ function attachmentRenderer(options, constraints, editable) {
|
|||
}
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
function linkedRowRenderer(options, constraints, editable) {
|
||||
function linkedRowRenderer() {
|
||||
return params => {
|
||||
let container = document.createElement("div")
|
||||
container.style.display = "grid"
|
||||
container.style.placeItems = "center"
|
||||
container.style.height = "100%"
|
||||
|
||||
new RelationshipDisplay({
|
||||
|
|
@ -94,6 +65,7 @@ function linkedRowRenderer(options, constraints, editable) {
|
|||
props: {
|
||||
row: params.data,
|
||||
columnName: params.column.colId,
|
||||
selectRelationship: params.selectRelationship
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue