adds custom renderer for bool fields
This commit is contained in:
parent
67e176a69d
commit
e8e3a4c793
3 changed files with 31 additions and 1 deletions
|
@ -1,4 +1,10 @@
|
|||
<script>
|
||||
// Import valueSetters
|
||||
import { number } from "./valueSetters"
|
||||
import { booleanRenderer } from "./customRenderer"
|
||||
|
||||
const setters = new Map([["number", number]])
|
||||
|
||||
import fetchData from "../fetchData.js"
|
||||
import { isEmpty } from "lodash/fp"
|
||||
import { onMount } from "svelte"
|
||||
|
@ -17,17 +23,21 @@
|
|||
console.log(datasource)
|
||||
const jsonModel = await _bb.api.get(`/api/models/${datasource.modelId}`)
|
||||
const { schema } = await jsonModel.json()
|
||||
console.log(schema)
|
||||
if (!isEmpty(datasource)) {
|
||||
data = await fetchData(datasource)
|
||||
if (data) {
|
||||
// Construct column definitions
|
||||
columnDefs = Object.keys(schema).map(key => {
|
||||
return {
|
||||
valueSetter: setters.get(schema[key].type),
|
||||
headerName: key.charAt(0).toUpperCase() + key.slice(1), // Capitalise first letter
|
||||
field: key,
|
||||
hide: shouldHideField(key),
|
||||
sortable: true,
|
||||
editable: true,
|
||||
editable: schema[key].type !== "boolean",
|
||||
cellRenderer:
|
||||
schema[key].type === "boolean" ? booleanRenderer : null,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
12
packages/standard-components/src/DataGrid/customRenderer.js
Normal file
12
packages/standard-components/src/DataGrid/customRenderer.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
export const booleanRenderer = (params) => {
|
||||
const toggle = (e) => {
|
||||
params.value = !params.value
|
||||
params.setValue(e.currentTarget.checked)
|
||||
}
|
||||
let input = document.createElement("input")
|
||||
input.type = "checkbox"
|
||||
input.checked = params.value
|
||||
input.addEventListener("click", toggle)
|
||||
|
||||
return input
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
// 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
|
||||
export const number = (params) => {
|
||||
console.log('Params: ', params)
|
||||
console.log('New Value: ', parseFloat(params.newValue))
|
||||
params.data[params.colDef.field] = parseFloat(params.newValue);
|
||||
return true;
|
||||
}
|
Loading…
Reference in a new issue