From e8e3a4c79384b5620c005d082d695e4f0a7432ac Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 28 Sep 2020 10:53:19 +0200
Subject: [PATCH] adds custom renderer for bool fields

---
 .../src/DataGrid/Component.svelte                    | 12 +++++++++++-
 .../src/DataGrid/customRenderer.js                   | 12 ++++++++++++
 .../standard-components/src/DataGrid/valueSetters.js |  8 ++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 packages/standard-components/src/DataGrid/customRenderer.js
 create mode 100644 packages/standard-components/src/DataGrid/valueSetters.js

diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index fc4262d039..c22f2c1dea 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -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,
           }
         })
       }
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
new file mode 100644
index 0000000000..bd56137c0b
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -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
+}
\ No newline at end of file
diff --git a/packages/standard-components/src/DataGrid/valueSetters.js b/packages/standard-components/src/DataGrid/valueSetters.js
new file mode 100644
index 0000000000..c170605972
--- /dev/null
+++ b/packages/standard-components/src/DataGrid/valueSetters.js
@@ -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;
+}
\ No newline at end of file