From bfa2d53e391e33a38e62306474ec83f7c1c06aa3 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Mon, 15 Apr 2024 06:12:02 +0100
Subject: [PATCH] bindings wip

---
 .../common/CodeEditor/CodeEditor.svelte       |  4 ++
 .../ExplanationModal/subjects/Column.svelte   | 19 ++++++++--
 .../components/BindingProperty.svelte         | 38 +++++++++++++++++++
 .../subjects/components/JSONProperty.svelte   | 29 ++------------
 .../subjects/components/index.js              |  1 +
 .../settings/controls/MultiFieldSelect.svelte |  1 -
 packages/client/manifest.json                 |  3 ++
 7 files changed, 64 insertions(+), 31 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index ba5f75083a..0102d8f7a9 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -54,6 +54,7 @@
   export let autofocus = false
   export let jsBindingWrapping = true
   export let readonly = false
+  export let readonlyLineNumbers = false
 
   const dispatch = createEventDispatcher()
 
@@ -240,6 +241,9 @@
 
     if (readonly) {
       complete.push(EditorState.readOnly.of(true))
+      if (readonlyLineNumbers) {
+        complete.push(lineNumbers())
+      }
     } else {
       complete = [
         ...complete,
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
index e94ae9cb44..038ecfe1b0 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Block, Subject, JSONProperty, Property, Section }  from './components'
+  import { BindingProperty, Block, Subject, JSONProperty, Property, Section }  from './components'
 
   export let schema
   export let columnName
@@ -62,10 +62,21 @@
       </Property>
     {/each}
   {:else if schema.type === "json"}
-    <JSONProperty
-      name="Schema"
-      value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+    <Property name="Schema">
+      <JSONProperty
+        value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+      />
+    </Property>
+  {:else if schema.type === "formula"}
+    <Property
+      name="Formula type"
+      value={schema?.formulaType === "dynamic" ? "Dynamic" : "Static"}
     />
+    <Property name="Formula">
+    <BindingProperty
+      value={schema?.formula}
+    />
+    </Property>
   {/if}
   <Property
     name="Required"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte
new file mode 100644
index 0000000000..3e366928f4
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/BindingProperty.svelte
@@ -0,0 +1,38 @@
+
+<script>
+  import {
+    decodeJSBinding,
+  } from "@budibase/string-templates"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import {
+    EditorModes,
+  } from "components/common/CodeEditor"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+    getDatasourceForProvider
+  } from "dataBinding"
+  import { tables, datasources, selectedScreen, selectedComponent } from "stores/builder"
+  import { getBindings } from "components/backend/DataTable/formula"
+
+  export let value
+  $: datasource = getDatasourceForProvider($selectedScreen, $selectedComponent)
+  $: tableId = datasource.tableId
+  $: table = $tables?.list?.find(table => table._id === tableId)
+  $: bindings = getBindings({ table });
+
+  $: readableBinding = runtimeToReadableBinding(bindings, value)
+
+  $: isJs = value?.startsWith?.("{{ js ")
+</script>
+
+<CodeEditor
+  readonly
+  readonlyLineNumbers
+  value={isJs ? decodeJSBinding(readableBinding) : readableBinding}
+  jsBindingWrapping={isJs}
+  mode={isJs ? EditorModes.JS :EditorModes.Handlebars}
+/>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
index eadaea537b..f4787067ed 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/JSONProperty.svelte
@@ -1,35 +1,12 @@
 <script>
-  export let name;
   export let value;
 </script>
 
-<div class="property">
-  <span class="propertyName">
-    <slot name="name">
-      {name}
-    </slot>
-  </span>
-  <span class="propertyDivider">-</span>
-  <pre class="pre propertyValue">
-    <slot>
-      {value}
-    </slot>
-  </pre>
-</div>
+<pre class="pre">
+  {value}
+</pre>
 
 <style>
-  .property {
-    margin-bottom: 12px;
-  }
-
-  .propertyName {
-    font-style: italic;
-  }
-
-  .propertyDivider {
-    padding: 4px;
-  }
-
   .pre {
     margin: 0;
     margin-top: 3px;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
index 9761fd31aa..6c07b6eab9 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/index.js
@@ -1,5 +1,6 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
 export { default as JSONProperty } from "./JSONProperty.svelte"
+export { default as BindingProperty } from "./BindingProperty.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index 0fd92477f3..36bc9e027e 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -31,7 +31,6 @@
   $: options = Object.keys(schema || {})
   $: boundValue = getValidOptions(value, options)
 
-
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
     if (!Array.isArray(selectedOptions)) {
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index bacbf98bff..9afcbc5c6c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -1638,8 +1638,11 @@
           "typeSupport": {
             "supported": ["number", "boolean"],
             "partialSupport": [
+              { "type": "longform", "message": "stringAsNumber" },
               { "type": "string", "message": "stringAsNumber" },
+              { "type": "bigint", "message": "stringAsNumber" },
               { "type": "options", "message": "stringAsNumber" },
+              { "type": "formula", "message": "stringAsNumber" },
               { "type": "datetime", "message": "dateAsNumber"}
             ],
             "unsupported": [