From a31b30da7d8c3a2b782d5aa381e4586d31c79833 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 15 Oct 2020 18:54:08 +0200 Subject: [PATCH 1/7] 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 From 5f83cfc9c5518d46de0625bd6e0b0a65d75a8ed4 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 15 Oct 2020 19:59:46 +0200 Subject: [PATCH 2/7] adds detail link column to grid component --- .../userInterface/temporaryPanelStructure.js | 6 ++++++ packages/standard-components/components.json | 3 ++- .../src/DataGrid/Component.svelte | 20 +++++++++++++++++-- .../src/DataGrid/customRenderer.js | 5 ++--- 4 files changed, 28 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 458c35116a..9a4e91fc43 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -327,6 +327,12 @@ export default { key: "datasource", control: TableViewSelect, }, + { + label: "Detail URL", + key: "detailUrl", + placeholder: "tableName/", + control: Input, + }, { label: "Editable", key: "editable", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 7d64f49c84..20929de9f4 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -245,7 +245,8 @@ "pagination": { "type": "bool", "default": true - } + }, + "detailUrl": "string" } }, "dataform": { diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index 0c75b46bca..a8d6653e38 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -20,7 +20,7 @@ export let theme = "alpine" export let height = 500 export let pagination - export let detailUrl = 'https://someurl.com/' + export let detailUrl // These can never change at runtime so don't need to be reactive let canEdit = editable && datasource && datasource.type !== "view" @@ -60,6 +60,10 @@ const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`) table = await jsonTable.json() schema = table.schema + // schema._id = { + // type: '_id', + // options: detailUrl + // } } columnDefs = Object.keys(schema).map((key, i) => { @@ -76,6 +80,18 @@ autoHeight: true, } }) + columnDefs = [...columnDefs, { + headerName: 'Details', + field: '_id', + width: 50, + flex: 0, + editable: false, + cellRenderer: getRenderer({ + type: '_id', + options: detailUrl || 'someTableName' + }), + autoHeight: true, + }] dataLoaded = true } }) @@ -92,7 +108,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/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index 6998e27b03..e99ece9d84 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -12,7 +12,7 @@ const renderers = new Map([ ["attachment", attachmentRenderer], ["options", optionsRenderer], ["link", linkedRowRenderer], - ["tableId", viewDetailsRenderer] + ["_id", viewDetailsRenderer] ]) export function getRenderer(schema, editable) { @@ -135,7 +135,6 @@ function linkedRowRenderer(options, editable) { /* 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" @@ -144,7 +143,7 @@ function viewDetailsRenderer(options) { new ViewDetails({ target: container, props: { - url: options.url + params.value + url: `${options}${params.data._id}` }, }) From 71acc10e9c6f68d14b070974cd4739141b8bbd20 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 15 Oct 2020 20:05:55 +0200 Subject: [PATCH 3/7] minor fixes --- .../components/userInterface/temporaryPanelStructure.js | 4 ++-- .../standard-components/src/DataGrid/Component.svelte | 8 ++------ .../standard-components/src/DataGrid/customRenderer.js | 2 +- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 9a4e91fc43..ca880d3118 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -328,9 +328,9 @@ export default { control: TableViewSelect, }, { - label: "Detail URL", + label: "Table URL", key: "detailUrl", - placeholder: "tableName/", + placeholder: "tableName", control: Input, }, { diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index a8d6653e38..13d52fd0a6 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -60,10 +60,6 @@ const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`) table = await jsonTable.json() schema = table.schema - // schema._id = { - // type: '_id', - // options: detailUrl - // } } columnDefs = Object.keys(schema).map((key, i) => { @@ -83,12 +79,12 @@ columnDefs = [...columnDefs, { headerName: 'Details', field: '_id', - width: 50, + width: 25, flex: 0, editable: false, cellRenderer: getRenderer({ type: '_id', - options: detailUrl || 'someTableName' + options: detailUrl }), autoHeight: true, }] diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index e99ece9d84..4e4111af77 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -143,7 +143,7 @@ function viewDetailsRenderer(options) { new ViewDetails({ target: container, props: { - url: `${options}${params.data._id}` + url: `/${options}/${params.data._id}` }, }) From 4d7c214a1639e518c0dfa46babb6e118027ec3d2 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 15 Oct 2020 20:06:26 +0200 Subject: [PATCH 4/7] lint fixes --- packages/standard-components/src/DataGrid/customRenderer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index 4e4111af77..d90b5c491e 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -12,7 +12,7 @@ const renderers = new Map([ ["attachment", attachmentRenderer], ["options", optionsRenderer], ["link", linkedRowRenderer], - ["_id", viewDetailsRenderer] + ["_id", viewDetailsRenderer], ]) export function getRenderer(schema, editable) { @@ -143,10 +143,10 @@ function viewDetailsRenderer(options) { new ViewDetails({ target: container, props: { - url: `/${options}/${params.data._id}` + url: `/${options}/${params.data._id}`, }, }) return container } -} \ No newline at end of file +} From 8804dc903ebfc92507d5cdc1f466700c10427616 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 15 Oct 2020 20:10:06 +0200 Subject: [PATCH 5/7] url now takes the same format as in other components --- packages/standard-components/src/DataGrid/Component.svelte | 1 + packages/standard-components/src/DataGrid/customRenderer.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index 13d52fd0a6..e3fc02c74e 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -82,6 +82,7 @@ width: 25, flex: 0, editable: false, + sortable: false, cellRenderer: getRenderer({ type: '_id', options: detailUrl diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js index d90b5c491e..aca4e7d39e 100644 --- a/packages/standard-components/src/DataGrid/customRenderer.js +++ b/packages/standard-components/src/DataGrid/customRenderer.js @@ -143,7 +143,7 @@ function viewDetailsRenderer(options) { new ViewDetails({ target: container, props: { - url: `/${options}/${params.data._id}`, + url: `${options}/${params.data._id}`, }, }) From e91d3ba283a49c225f21cb7fcad908da6eaae65a Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 15 Oct 2020 20:56:58 +0200 Subject: [PATCH 6/7] change color to grey --- .../src/DataGrid/ViewDetails/Cell.svelte | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte index e4e79c2b89..58cf2a5408 100644 --- a/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte +++ b/packages/standard-components/src/DataGrid/ViewDetails/Cell.svelte @@ -3,4 +3,10 @@ export let url - \ No newline at end of file + + + \ No newline at end of file From 5e44b3373c7e611580ecb7c9877ae9db13a9ceaa Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Fri, 16 Oct 2020 10:35:15 +0200 Subject: [PATCH 7/7] change from Input to ScreenSelect component for prop --- .../src/components/userInterface/temporaryPanelStructure.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index ca880d3118..cb35d140c4 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -331,7 +331,7 @@ export default { label: "Table URL", key: "detailUrl", placeholder: "tableName", - control: Input, + control: ScreenSelect, }, { label: "Editable",