From 477813feef88788391c42552d5c2bd4ed9427059 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Fri, 5 Apr 2024 09:46:22 +0100
Subject: [PATCH] working

---
 packages/bbui/src/Tooltip/Context.svelte      |  8 --
 .../controls/FieldContext/Chart.svelte        | 75 ++++++++++++++++++-
 .../controls/FieldContext/Property.svelte     | 31 ++++++++
 .../settings/controls/MultiFieldSelect.svelte |  3 +-
 .../components/grid/cells/HeaderCell.svelte   |  1 +
 5 files changed, 105 insertions(+), 13 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index d477783950..442672a9c1 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -9,7 +9,6 @@
 
   $: target = getContext(Context.PopoverRoot) || "#app"
 
-  export let arbitrary = ""
   let hovering = false
   let wrapper
   let currentTooltip
@@ -31,17 +30,10 @@
   }
 
   const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper) => {
-      if (arbitrary === "foo") {
-        console.log(currentTooltip, previousTooltip);
-      }
-
     requestAnimationFrame(() => {
       if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null) {
         return;
       }
-      if (arbitrary === "foo") {
-        console.log("past here");
-      }
 
 
       const rect = anchor.getBoundingClientRect();
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
index 290adc7a86..9e96997e9e 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte
@@ -3,6 +3,7 @@
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
+  import Property from './Property.svelte'
 
   export let supportLevelClass = ''
   export let supportLevelIcon = ""
@@ -17,6 +18,12 @@
   export let errors = []
   export let warnings = []
 
+  export let schema
+
+  $: {
+    console.log(schema)
+  }
+
   let root = null;
 
   const getDocLink = (columnType) => {
@@ -26,12 +33,21 @@
     if (columnType === "Text") {
       return "https://docs.budibase.com/docs/text"
     }
-    if (columnType === "attachment") {
+    if (columnType === "Attachment") {
       return "https://docs.budibase.com/docs/attachments"
     }
-    if (columnType === "array") {
+    if (columnType === "Multi-select") {
       return "https://docs.budibase.com/docs/multi-select"
     }
+    if (columnType === "JSON") {
+      return "https://docs.budibase.com/docs/json"
+    }
+    if (columnType === "Date/Time") {
+      return "https://docs.budibase.com/docs/datetime"
+    }
+    if (columnType === "User") {
+      return "https://docs.budibase.com/docs/user"
+    }
 
     return ""
   }
@@ -146,13 +162,61 @@
 
 {#if sidecar}
   <ContextTooltip
-    arbitrary="foo"
+    noAnimation
     visible={sidecarSubject !== null}
     anchor={root}
     offset={20}
   >
   <div class="sidecarContent">
     {#if sidecarSubject === "column"}
+      <div class="heading wrapper">
+      <span class="heading">{columnName}</span>
+      </div>
+      <div class="divider" />
+      <div class="section">
+        {#if schema.type === "string"}
+          <Property
+            name="Max Length"
+            value={schema?.constraints?.length?.maximum ?? "None"}
+          />
+        {:else if schema.type === "datetime"}
+          <Property
+            name="Earliest"
+            value={schema?.constraints?.datetime?.earliest === "" ? "None" : schema?.constraints?.datetime?.earliest}
+          />
+          <Property
+            name="Latest"
+            value={schema?.constraints?.datetime?.latest === "" ? "None" : schema?.constraints?.datetime?.latest}
+          />
+          <Property
+            name="Ignore time zones"
+            value={schema?.ignoreTimeZones === true ? "Yes" : "No"}
+          />
+          <Property
+            name="Date only"
+            value={schema?.dateOnly === true ? "Yes" : "No"}
+          />
+        {:else if schema.type === "number"}
+          <Property
+            name="Min Value"
+            value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+          />
+          <Property
+            name="Max Value"
+            value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
+          />
+        {:else if schema.type === "json"}
+          <Property
+            pre
+            name="Schema"
+            value={JSON.stringify(schema?.schema ?? {}, null, 2)}
+          />
+        {/if}
+        <Property
+          name="Required"
+          value={schema?.constraints?.presence?.allowEmpty === false ? "Yes" : "No"}
+        />
+      </div>
     {:else if sidecarSubject === "support"}
         <span class="heading">Data/Component Compatibility</span>
         <div class="divider" />
@@ -195,7 +259,7 @@
       <span class="heading">'Required' Constraint</span>
       <div class="divider" />
       <div class="section">
-        <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then rows may be missing values.</span>
+        <span class="body">A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.</span>
       </div>
     {/if}
   </div>
@@ -210,6 +274,9 @@
 
   .heading {
     font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .section {
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
new file mode 100644
index 0000000000..c929072fed
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/Property.svelte
@@ -0,0 +1,31 @@
+<script>
+  export let name;
+  export let value;
+  export let pre;
+</script>
+
+<div class="property">
+  
+{#if pre}
+<pre class="pre propertyValue">
+{value}
+</pre>
+{:else}
+  <span class="propertyName">
+    {name}
+  </span>
+  <span class="propertyDivider">-</span>
+  <span class="propertyValue">
+    {value}
+  </span>
+{/if}
+</div>
+
+<style>
+.pre {
+  padding: 4px;
+  border-radius: 3px;
+  width: 250px;
+  background-color: black;
+}
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index d53dbbf0a9..56bc79e6a8 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -204,7 +204,8 @@
 >
   <ChartFieldContext
     sidecar
-    support={fieldSupport[previousOption]}
+    schema={schema[currentOption]}
+    support={fieldSupport[currentOption]}
     supportLevelClass={currentOptionSupport.class}
     supportLevelIcon={currentOptionSupport.icon}
     supportLevelIconTooltip={currentOptionSupport.iconTooltip}
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 657f618759..4f861c84a1 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -102,6 +102,7 @@
 
   const editColumn = async () => {
     editIsOpen = true
+    console.log(column.schema);
     await tick()
     dispatch("edit-column", column.schema)
   }