From 8a8762760a7712bf98aa91ffad8506f4bcd07efa Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 15 Oct 2020 18:54:08 +0200 Subject: [PATCH] starts work on adding view details link to grid component --- .../src/DataGrid/Component.svelte | 3 +- .../src/DataGrid/ViewDetails/Cell.svelte | 6 ++++ .../src/DataGrid/customRenderer.js | 36 +++++++++++++++---- 3 files changed, 37 insertions(+), 8 deletions(-) create mode 100644 packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index 0d86808961..0c75b46bca 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -20,6 +20,7 @@ export let theme = "alpine" export let height = 500 export let pagination + export let detailUrl = 'https://someurl.com/' // These can never change at runtime so don't need to be reactive let canEdit = editable && datasource && datasource.type !== "view" @@ -91,7 +92,7 @@ // always 'row' if (name === "type") return true // tables are always tied to a single tableId, this is irrelevant - if (name === "tableId") return true + // if (name === "tableId") return true return false } diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte new file mode 100644 index 0000000000..e4e79c2b89 --- /dev/null +++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index 607a4f8432..6998e27b03 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -2,6 +2,7 @@ // https://www.ag-grid.com/javascript-grid-cell-rendering-components/ import AttachmentCell from "./AttachmentCell/Button.svelte" +import ViewDetails from "./ViewDetails/Cell.svelte" import Select from "./Select/Wrapper.svelte" import DatePicker from "./DateTime/Wrapper.svelte" import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte" @@ -11,18 +12,19 @@ const renderers = new Map([ ["attachment", attachmentRenderer], ["options", optionsRenderer], ["link", linkedRowRenderer], + ["tableId", viewDetailsRenderer] ]) -export function getRenderer({ type, constraints }, editable) { - if (renderers.get(type)) { - return renderers.get(type)(constraints, editable) +export function getRenderer(schema, editable) { + if (renderers.get(schema.type)) { + return renderers.get(schema.type)(schema.options, editable) } else { return false } } /* eslint-disable no-unused-vars */ -function booleanRenderer(constraints, editable) { +function booleanRenderer(options, editable) { return params => { const toggle = e => { params.value = !params.value @@ -44,7 +46,7 @@ function booleanRenderer(constraints, editable) { } } /* eslint-disable no-unused-vars */ -function attachmentRenderer(constraints, editable) { +function attachmentRenderer(options, editable) { return params => { const container = document.createElement("div") @@ -66,7 +68,7 @@ function attachmentRenderer(constraints, editable) { } } /* eslint-disable no-unused-vars */ -function dateRenderer(constraints, editable) { +function dateRenderer(options, editable) { return function(params) { const container = document.createElement("div") const toggle = e => { @@ -111,7 +113,7 @@ function optionsRenderer({ inclusion }, editable) { } } /* eslint-disable no-unused-vars */ -function linkedRowRenderer(constraints, editable) { +function linkedRowRenderer(options, editable) { return params => { let container = document.createElement("div") container.style.display = "grid" @@ -129,3 +131,23 @@ function linkedRowRenderer(constraints, editable) { return container } } + +/* eslint-disable no-unused-vars */ +function viewDetailsRenderer(options) { + return params => { + console.log('Params: ', params) + let container = document.createElement("div") + container.style.display = "grid" + container.style.placeItems = "center" + container.style.height = "100%" + + new ViewDetails({ + target: container, + props: { + url: options.url + params.value + }, + }) + + return container + } +} \ No newline at end of file