adds detail link column to grid component
This commit is contained in:
parent
a31b30da7d
commit
5f83cfc9c5
4 changed files with 28 additions and 6 deletions
|
@ -327,6 +327,12 @@ export default {
|
||||||
key: "datasource",
|
key: "datasource",
|
||||||
control: TableViewSelect,
|
control: TableViewSelect,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: "Detail URL",
|
||||||
|
key: "detailUrl",
|
||||||
|
placeholder: "tableName/",
|
||||||
|
control: Input,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "Editable",
|
label: "Editable",
|
||||||
key: "editable",
|
key: "editable",
|
||||||
|
|
|
@ -245,7 +245,8 @@
|
||||||
"pagination": {
|
"pagination": {
|
||||||
"type": "bool",
|
"type": "bool",
|
||||||
"default": true
|
"default": true
|
||||||
}
|
},
|
||||||
|
"detailUrl": "string"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dataform": {
|
"dataform": {
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
export let theme = "alpine"
|
export let theme = "alpine"
|
||||||
export let height = 500
|
export let height = 500
|
||||||
export let pagination
|
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
|
// These can never change at runtime so don't need to be reactive
|
||||||
let canEdit = editable && datasource && datasource.type !== "view"
|
let canEdit = editable && datasource && datasource.type !== "view"
|
||||||
|
@ -60,6 +60,10 @@
|
||||||
const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
|
const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`)
|
||||||
table = await jsonTable.json()
|
table = await jsonTable.json()
|
||||||
schema = table.schema
|
schema = table.schema
|
||||||
|
// schema._id = {
|
||||||
|
// type: '_id',
|
||||||
|
// options: detailUrl
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
columnDefs = Object.keys(schema).map((key, i) => {
|
columnDefs = Object.keys(schema).map((key, i) => {
|
||||||
|
@ -76,6 +80,18 @@
|
||||||
autoHeight: true,
|
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
|
dataLoaded = true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -92,7 +108,7 @@
|
||||||
// always 'row'
|
// always 'row'
|
||||||
if (name === "type") return true
|
if (name === "type") return true
|
||||||
// tables are always tied to a single tableId, this is irrelevant
|
// tables are always tied to a single tableId, this is irrelevant
|
||||||
// if (name === "tableId") return true
|
if (name === "tableId") return true
|
||||||
|
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,7 +12,7 @@ const renderers = new Map([
|
||||||
["attachment", attachmentRenderer],
|
["attachment", attachmentRenderer],
|
||||||
["options", optionsRenderer],
|
["options", optionsRenderer],
|
||||||
["link", linkedRowRenderer],
|
["link", linkedRowRenderer],
|
||||||
["tableId", viewDetailsRenderer]
|
["_id", viewDetailsRenderer]
|
||||||
])
|
])
|
||||||
|
|
||||||
export function getRenderer(schema, editable) {
|
export function getRenderer(schema, editable) {
|
||||||
|
@ -135,7 +135,6 @@ function linkedRowRenderer(options, editable) {
|
||||||
/* eslint-disable no-unused-vars */
|
/* eslint-disable no-unused-vars */
|
||||||
function viewDetailsRenderer(options) {
|
function viewDetailsRenderer(options) {
|
||||||
return params => {
|
return params => {
|
||||||
console.log('Params: ', 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"
|
||||||
|
@ -144,7 +143,7 @@ function viewDetailsRenderer(options) {
|
||||||
new ViewDetails({
|
new ViewDetails({
|
||||||
target: container,
|
target: container,
|
||||||
props: {
|
props: {
|
||||||
url: options.url + params.value
|
url: `${options}${params.data._id}`
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue