MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reinstating relationships

This commit is contained in:
Martin McKeaveney 2020-10-25 17:05:11 +00:00
parent 4681033535
commit 4549e8e5b2
5 changed files with 26 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -5,7 +5,7 @@
"source.fixAll": true
},
"[svelte]": {
"editor.defaultFormatter": "JamesBirtles.svelte-vscode"
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "esbenp.prettier-vscode"
}

25
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -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>

0
packages/builder/src/components/backend/DataTable/cells/BooleanCell.svelte
View File

74
packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte
View File

@ -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>

32
packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
View File

@ -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
},
})