forked from tsai/budibase
6 changed files with 123 additions and 110 deletions
@ -1,116 +1,117 @@ |
|||||
// Custom renderers to handle special types
|
// Custom renderers to handle special types
|
||||
// https://www.ag-grid.com/javascript-grid-cell-rendering-components/
|
// https://www.ag-grid.com/javascript-grid-cell-rendering-components/
|
||||
|
|
||||
import AttachmentCell from './AttachmentCell/Button.svelte' |
import AttachmentCell from "./AttachmentCell/Button.svelte" |
||||
import Select from './Select/Wrapper.svelte' |
import Select from "./Select/Wrapper.svelte" |
||||
import DatePicker from "./DateTime/Wrapper.svelte" |
import DatePicker from "./DateTime/Wrapper.svelte" |
||||
|
|
||||
const renderers = new Map([ |
const renderers = new Map([ |
||||
["boolean", booleanRenderer], |
["boolean", booleanRenderer], |
||||
["attachment", attachmentRenderer], |
["attachment", attachmentRenderer], |
||||
["options", optionsRenderer], |
["options", optionsRenderer], |
||||
["link", linkedRecordRenderer], |
["link", linkedRecordRenderer], |
||||
]) |
]) |
||||
|
|
||||
|
|
||||
export function getRenderer({ type, constraints }, editable) { |
export function getRenderer({ type, constraints }, editable) { |
||||
if (renderers.get(type)) { |
if (renderers.get(type)) { |
||||
return renderers.get(type)(constraints, editable) |
return renderers.get(type)(constraints, editable) |
||||
} else { |
} else { |
||||
return false |
return false |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
|
/* eslint-disable no-unused-vars */ |
||||
function booleanRenderer(constraints, editable) { |
function booleanRenderer(constraints, editable) { |
||||
return params => { |
return params => { |
||||
const toggle = (e) => { |
const toggle = e => { |
||||
params.value = !params.value |
params.value = !params.value |
||||
params.setValue(e.currentTarget.checked) |
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 |
|
||||
} |
} |
||||
} |
let input = document.createElement("input") |
||||
function attachmentRenderer(constraints, editable ) { |
input.style.display = "grid" |
||||
return params => { |
input.style.placeItems = "center" |
||||
const container = document.createElement("div") |
input.style.height = "100%" |
||||
|
input.type = "checkbox" |
||||
const attachmentInstance = new AttachmentCell({ |
input.checked = params.value |
||||
target: container, |
if (editable) { |
||||
props: { |
input.addEventListener("click", toggle) |
||||
files: params.value || [], |
} else { |
||||
} |
input.disabled = true |
||||
}); |
|
||||
|
|
||||
return container |
|
||||
} |
} |
||||
|
|
||||
|
return input |
||||
|
} |
||||
} |
} |
||||
|
/* eslint-disable no-unused-vars */ |
||||
|
function attachmentRenderer(constraints, editable) { |
||||
|
return params => { |
||||
|
const container = document.createElement("div") |
||||
|
|
||||
|
const attachmentInstance = new AttachmentCell({ |
||||
|
target: container, |
||||
|
props: { |
||||
|
files: params.value || [], |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
return container |
||||
|
} |
||||
|
} |
||||
|
/* eslint-disable no-unused-vars */ |
||||
function dateRenderer(constraints, editable) { |
function dateRenderer(constraints, editable) { |
||||
return function (params) { |
return function(params) { |
||||
const container = document.createElement("div") |
const container = document.createElement("div") |
||||
const toggle = (e) => { |
const toggle = e => { |
||||
params.setValue(e.detail[0][0]) |
params.setValue(e.detail[0][0]) |
||||
} |
|
||||
|
|
||||
// Options need to be passed in with minTime and maxTime! Needs bbui update.
|
|
||||
|
|
||||
const datePickerInstance = new DatePicker({ |
|
||||
target: container, |
|
||||
props: { |
|
||||
value: params.value, |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
return container |
|
||||
} |
} |
||||
} |
|
||||
|
|
||||
|
// Options need to be passed in with minTime and maxTime! Needs bbui update.
|
||||
|
|
||||
|
const datePickerInstance = new DatePicker({ |
||||
|
target: container, |
||||
|
props: { |
||||
|
value: params.value, |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
return container |
||||
|
} |
||||
|
} |
||||
|
|
||||
function optionsRenderer({ inclusion }, editable) { |
function optionsRenderer({ inclusion }, editable) { |
||||
return params => { |
return params => { |
||||
if (!editable) return params.value |
if (!editable) return params.value |
||||
const container = document.createElement("div") |
const container = document.createElement("div") |
||||
container.style.display = "grid"; |
container.style.display = "grid" |
||||
container.style.placeItems = "center"; |
container.style.placeItems = "center" |
||||
container.style.height = "100%"; |
container.style.height = "100%" |
||||
const change = (e) => { |
const change = e => { |
||||
params.setValue(e.detail) |
params.setValue(e.detail) |
||||
} |
|
||||
|
|
||||
const selectInstance = new Select({ |
|
||||
target: container, |
|
||||
props: { |
|
||||
value: params.value, |
|
||||
options: inclusion |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
selectInstance.$on('change', change) |
|
||||
|
|
||||
return container |
|
||||
} |
} |
||||
|
|
||||
|
const selectInstance = new Select({ |
||||
|
target: container, |
||||
|
props: { |
||||
|
value: params.value, |
||||
|
options: inclusion, |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
selectInstance.$on("change", change) |
||||
|
|
||||
|
return container |
||||
|
} |
||||
} |
} |
||||
|
/* eslint-disable no-unused-vars */ |
||||
function linkedRecordRenderer(constraints, editable) { |
function linkedRecordRenderer(constraints, editable) { |
||||
return params => { |
return params => { |
||||
console.log(params.value) |
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"; |
container.style.height = "100%" |
||||
container.style.height = "100%"; |
|
||||
|
|
||||
container.innerText = params.value.length || 0 |
container.innerText = params.value.length || 0 |
||||
|
|
||||
return container |
return container |
||||
} |
} |
||||
} |
} |
||||
|
|||||
@ -1,6 +1,6 @@ |
|||||
// https://www.ag-grid.com/javascript-grid-value-setters/
|
// https://www.ag-grid.com/javascript-grid-value-setters/
|
||||
// These handles values and makes sure they adhere to the data type provided by the model
|
// These handles values and makes sure they adhere to the data type provided by the model
|
||||
export const number = (params) => { |
export const number = params => { |
||||
params.data[params.colDef.field] = parseFloat(params.newValue); |
params.data[params.colDef.field] = parseFloat(params.newValue) |
||||
return true; |
return true |
||||
} |
} |
||||
|
|||||
Loading…
Reference in new issue