Add BigInt type support (#11145) (#11195)

* Add BigInt type

* Allow BigInt columns to be added

* Sort fixes

* Add BigInt field

packages/bbui/src/Form/Core/TextField.svelte

@@ -62,6 +62,13 @@
     }
   }
 
+  const getInputMode = type => {
+    if (type === "bigint") {
+      return "numeric"
+    }
+    return type === "number" ? "decimal" : "text"
+  }
+
   onMount(() => {
     focus = autofocus
     if (focus) field.focus()
@@ -103,7 +110,7 @@
     {type}
     class="spectrum-Textfield-input"
     style={align ? `text-align: ${align};` : ""}
-    inputmode={type === "number" ? "decimal" : "text"}
+    inputmode={getInputMode(type)}
     {autocomplete}
   />
 </div>

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -4,6 +4,7 @@ import { getSchemaForDatasource } from "../../../dataBinding"
 const fieldTypeToComponentMap = {
   string: "stringfield",
   number: "numberfield",
+  bigint: "bigintfield",
   options: "optionsfield",
   array: "multifieldselect",
   boolean: "booleanfield",

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -330,6 +330,7 @@
         FIELDS.NUMBER,
         FIELDS.BOOLEAN,
         FIELDS.FORMULA,
+        FIELDS.BIGINT,
       ]
       // no-sql or a spreadsheet
       if (!external || table.sql) {

packages/builder/src/components/design/settings/componentSettings.js

@@ -52,6 +52,7 @@ const componentMap = {
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
+  "field/bigint": FormFieldSelect,
   "field/options": FormFieldSelect,
   "field/boolean": FormFieldSelect,
   "field/longform": FormFieldSelect,

packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte

@@ -228,7 +228,7 @@
                   on:change={event => (filter.value = event.detail)}
                   {fillWidth}
                 />
-              {:else if ["string", "longform", "number", "formula"].includes(filter.type)}
+              {:else if ["string", "longform", "number", "bigint", "formula"].includes(filter.type)}
                 <Input disabled={filter.noValue} bind:value={filter.value} />
               {:else if filter.type === "array" || (filter.type === "options" && filter.operator === "oneOf")}
                 <Multiselect

packages/builder/src/constants/backend/index.js

@@ -53,6 +53,10 @@ export const FIELDS = {
       numericality: { greaterThanOrEqualTo: "", lessThanOrEqualTo: "" },
     },
   },
+  BIGINT: {
+    name: "BigInt",
+    type: "bigint",
+  },
   BOOLEAN: {
     name: "Boolean",
     type: "boolean",

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json

@@ -15,12 +15,7 @@
   {
     "name": "Layout",
     "icon": "ClassicGridView",
-    "children": [
+    "children": ["container", "section", "grid", "sidepanel"]
-      "container",
-      "section",
-      "grid",
-      "sidepanel"
-    ]
   },
   {
     "name": "Data",
@@ -63,6 +58,7 @@
       "fieldgroup",
       "stringfield",
       "numberfield",
+      "bigintfield",
       "passwordfield",
       "optionsfield",
       "booleanfield",
@@ -79,13 +75,6 @@
   {
     "name": "Chart",
     "icon": "GraphBarVertical",
-    "children": [
+    "children": ["bar", "line", "area", "candlestick", "pie", "donut"]
-      "bar",
-      "line",
-      "area",
-      "candlestick",
-      "pie",
-      "donut"
-    ]
   }
 ]

packages/client/manifest.json

@@ -2509,6 +2509,57 @@
       }
     ]
   },
+  "bigintfield": {
+    "name": "BigInt Field",
+    "icon": "TagBold",
+    "styles": ["size"],
+    "requiredAncestors": ["form"],
+    "editable": true,
+    "size": {
+      "width": 400,
+      "height": 50
+    },
+    "settings": [
+      {
+        "type": "field/bigint",
+        "label": "Field",
+        "key": "field",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "text",
+        "label": "Placeholder",
+        "key": "placeholder"
+      },
+      {
+        "type": "text",
+        "label": "Default value",
+        "key": "defaultValue"
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      }
+    ]
+  },
   "passwordfield": {
     "name": "Password Field",
     "icon": "LockClosed",

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -21,6 +21,7 @@
   const FieldTypeToComponentMap = {
     string: "stringfield",
     number: "numberfield",
+    bigint: "bigintfield",
     options: "optionsfield",
     array: "multifieldselect",
     boolean: "booleanfield",

packages/client/src/components/app/dynamic-filter/FilterModal.svelte

@@ -133,7 +133,7 @@
             on:change={e => onOperatorChange(filter, e.detail)}
             placeholder={null}
           />
-          {#if ["string", "longform", "number", "formula"].includes(filter.type)}
+          {#if ["string", "longform", "number", "bigint", "formula"].includes(filter.type)}
             <Input disabled={filter.noValue} bind:value={filter.value} />
           {:else if ["options", "array"].includes(filter.type)}
             <Combobox

packages/client/src/components/app/forms/BigIntField.svelte

@@ -0,0 +1,7 @@
+<script>
+  import StringField from "./StringField.svelte"
+
+  export let defaultValue
+</script>
+
+<StringField {...$$props} type="bigint" {defaultValue} />

packages/client/src/components/app/forms/Field.svelte

@@ -33,7 +33,10 @@
     formStep
   )
 
-  $: schemaType = fieldSchema?.type !== "formula" ? fieldSchema?.type : "string"
+  $: schemaType =
+    fieldSchema?.type !== "formula" && fieldSchema?.type !== "bigint"
+      ? fieldSchema?.type
+      : "string"
 
   // Focus label when editing
   let labelNode

packages/client/src/components/app/forms/index.js

@@ -2,6 +2,7 @@ export { default as form } from "./Form.svelte"
 export { default as fieldgroup } from "./FieldGroup.svelte"
 export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
+export { default as bigintfield } from "./BigIntField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"
 export { default as multifieldselect } from "./MultiFieldSelect.svelte"
 export { default as booleanfield } from "./BooleanField.svelte"

packages/client/src/utils/blocks.js

@@ -6,6 +6,7 @@ const schemaComponentMap = {
   string: "stringfield",
   options: "optionsfield",
   number: "numberfield",
+  bigint: "bigintfield",
   datetime: "datetimefield",
   boolean: "booleanfield",
   formula: "stringfield",

packages/frontend-core/src/components/grid/cells/HeaderCell.svelte

@@ -37,8 +37,12 @@
   $: sortedBy = column.name === $sort.column
   $: canMoveLeft = orderable && idx > 0
   $: canMoveRight = orderable && idx < $renderedColumns.length - 1
-  $: ascendingLabel = column.schema?.type === "number" ? "low-high" : "A-Z"
+  $: ascendingLabel = ["number", "bigint"].includes(column.schema?.type)
-  $: descendingLabel = column.schema?.type === "number" ? "high-low" : "Z-A"
+    ? "low-high"
+    : "A-Z"
+  $: descendingLabel = ["number", "bigint"].includes(column.schema?.type)
+    ? "high-low"
+    : "Z-A"
 
   const editColumn = () => {
     dispatch("edit-column", column.schema)

packages/frontend-core/src/components/grid/lib/utils.js

@@ -18,6 +18,7 @@ const TypeIconMap = {
   link: "DataCorrelated",
   formula: "Calculator",
   json: "Brackets",
+  bigint: "TagBold",
 }
 
 export const getColumnIcon = column => {

packages/frontend-core/src/fetch/DataFetch.js

@@ -155,7 +155,7 @@ export default class DataFetch {
     let sortType = "string"
     if (sortColumn) {
       const type = schema?.[sortColumn]?.type
-      sortType = type === "number" ? "number" : "string"
+      sortType = type === "number" || type === "bigint" ? "number" : "string"
     }
     this.options.sortType = sortType
 

packages/server/src/integrations/base/sqlTable.ts

@@ -53,6 +53,9 @@ function generateSchema(
           schema.float(key)
         }
         break
+      case FieldTypes.BIGINT:
+        schema.bigint(key)
+        break
       case FieldTypes.BOOLEAN:
         schema.boolean(key)
         break

packages/server/src/integrations/utils.ts

@@ -48,7 +48,6 @@ const SQL_STRING_TYPE_MAP = {
   blob: FieldTypes.STRING,
   long: FieldTypes.STRING,
   text: FieldTypes.STRING,
-  bigint: FieldTypes.STRING,
 }
 
 const SQL_BOOLEAN_TYPE_MAP = {
@@ -59,6 +58,7 @@ const SQL_BOOLEAN_TYPE_MAP = {
 
 const SQL_MISC_TYPE_MAP = {
   json: FieldTypes.JSON,
+  bigint: FieldTypes.BIGINT,
 }
 
 const SQL_TYPE_MAP = {

packages/shared-core/src/filters.ts

@@ -38,7 +38,7 @@ export const getValidOperatorsForType = (
   }[] = []
   if (type === "string") {
     ops = stringOps
-  } else if (type === "number") {
+  } else if (type === "number" || type === "bigint") {
     ops = numOps
   } else if (type === "options") {
     ops = [Op.Equals, Op.NotEquals, Op.Empty, Op.NotEmpty, Op.In]

packages/types/src/documents/app/row.ts

@@ -15,6 +15,7 @@ export enum FieldType {
   JSON = "json",
   INTERNAL = "internal",
   BARCODEQR = "barcodeqr",
+  BIGINT = "bigint",
 }
 
 export interface RowAttachment {