From 2d6c2fe90414b022552ed34585e23f06389a5080 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 14 Mar 2023 10:18:42 +0000
Subject: [PATCH] Add cells for formulae and JSON

---
 .../components/sheet/cells/FormulaCell.svelte |  5 +++
 .../components/sheet/cells/JSONCell.svelte    | 36 +++++++++++++++++++
 .../components/sheet/cells/NumberCell.svelte  |  2 +-
 .../src/components/sheet/renderers.js         |  6 ++--
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend-core/src/components/sheet/cells/FormulaCell.svelte
 create mode 100644 packages/frontend-core/src/components/sheet/cells/JSONCell.svelte

diff --git a/packages/frontend-core/src/components/sheet/cells/FormulaCell.svelte b/packages/frontend-core/src/components/sheet/cells/FormulaCell.svelte
new file mode 100644
index 0000000000..b4db795e44
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/cells/FormulaCell.svelte
@@ -0,0 +1,5 @@
+<script>
+  import TextCell from "./TextCell.svelte"
+</script>
+
+<TextCell {...$$props} readonly />
diff --git a/packages/frontend-core/src/components/sheet/cells/JSONCell.svelte b/packages/frontend-core/src/components/sheet/cells/JSONCell.svelte
new file mode 100644
index 0000000000..48123dcda8
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/cells/JSONCell.svelte
@@ -0,0 +1,36 @@
+<script>
+  import LongFormCell from "./LongFormCell.svelte"
+
+  export let onChange
+  export let value
+  export let api
+
+  $: stringified = getStringifiedValue(value)
+
+  const getStringifiedValue = value => {
+    if (!value) {
+      return value
+    }
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch (error) {
+      return null
+    }
+  }
+
+  const parse = value => {
+    const trimmed = value?.trim()
+    if (!trimmed) {
+      onChange(null)
+      return
+    }
+    try {
+      const parsed = JSON.parse(trimmed)
+      onChange(parsed)
+    } catch (error) {
+      console.log("error parsing")
+    }
+  }
+</script>
+
+<LongFormCell {...$$props} bind:api value={stringified} onChange={parse} />
diff --git a/packages/frontend-core/src/components/sheet/cells/NumberCell.svelte b/packages/frontend-core/src/components/sheet/cells/NumberCell.svelte
index ac5f8d8cb7..00c101026e 100644
--- a/packages/frontend-core/src/components/sheet/cells/NumberCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/NumberCell.svelte
@@ -4,4 +4,4 @@
   export let api
 </script>
 
-<TextCell bind:api {...$$props} type="number" />
+<TextCell {...$$props} bind:api type="number" />
diff --git a/packages/frontend-core/src/components/sheet/renderers.js b/packages/frontend-core/src/components/sheet/renderers.js
index a2f46923bc..f1d6741e29 100644
--- a/packages/frontend-core/src/components/sheet/renderers.js
+++ b/packages/frontend-core/src/components/sheet/renderers.js
@@ -7,6 +7,8 @@ import TextCell from "./cells/TextCell.svelte"
 import BlankCell from "./cells/BlankCell.svelte"
 import LongFormCell from "./cells/LongFormCell.svelte"
 import BooleanCell from "./cells/BooleanCell.svelte"
+import FormulaCell from "./cells/FormulaCell.svelte"
+import JSONCell from "./cells/JSONCell.svelte"
 
 const TypeComponentMap = {
   text: TextCell,
@@ -19,8 +21,8 @@ const TypeComponentMap = {
   boolean: BooleanCell,
   attachment: BlankCell,
   link: RelationshipCell,
-  formula: BlankCell,
-  json: BlankCell,
+  formula: FormulaCell,
+  json: JSONCell,
 }
 export const getCellRenderer = column => {
   return TypeComponentMap[column?.schema?.type] || TextCell