Add BigInt type support (#11145)

* Add BigInt type * Allow BigInt columns to be added * Sort fixes * Add BigInt field
2024-07-06 15:00:49 +12:00 · 2023-07-07 15:11:41 +01:00 · 2023-07-07 15:11:41 +01:00 · 7a06fcee0f
parent 02b213b404
commit 7a06fcee0f
21 changed files with 99 additions and 23 deletions
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/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>
--- a/packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
+++ b/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",
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -326,6 +326,7 @@
        FIELDS.NUMBER,
        FIELDS.BOOLEAN,
        FIELDS.FORMULA,
+        FIELDS.BIGINT,
      ]
      // no-sql or a spreadsheet
      if (!external || table.sql) {
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/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,
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterDrawer.svelte
+++ b/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
--- a/packages/builder/src/constants/backend/index.js
+++ b/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",
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
@ -15,12 +15,7 @@
  {
    "name": "Layout",
    "icon": "ClassicGridView",
-    "children": [
-      "container",
-      "section",
-      "grid",
-      "sidepanel"
-    ]
+    "children": ["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": [
-      "bar",
-      "line",
-      "area",
-      "candlestick",
-      "pie",
-      "donut"
-    ]
+    "children": ["bar", "line", "area", "candlestick", "pie", "donut"]
  }
 ]
--- a/packages/client/manifest.json
+++ b/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",
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/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",
--- a/packages/client/src/components/app/dynamic-filter/FilterModal.svelte
+++ b/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
--- a/packages/client/src/components/app/forms/BigIntField.svelte
+++ b/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} />
--- a/packages/client/src/components/app/forms/Field.svelte
+++ b/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
--- a/packages/client/src/components/app/forms/index.js
+++ b/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"
--- a/packages/client/src/utils/blocks.js
+++ b/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",
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/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"
-  $: descendingLabel = column.schema?.type === "number" ? "high-low" : "Z-A"
+  $: ascendingLabel = ["number", "bigint"].includes(column.schema?.type)
+    ? "low-high"
+    : "A-Z"
+  $: descendingLabel = ["number", "bigint"].includes(column.schema?.type)
+    ? "high-low"
+    : "Z-A"

  const editColumn = () => {
    dispatch("edit-column", column.schema)
--- a/packages/frontend-core/src/components/grid/lib/utils.js
+++ b/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 => {
--- a/packages/frontend-core/src/fetch/DataFetch.js
+++ b/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

--- a/packages/server/src/integrations/base/sqlTable.ts
+++ b/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
--- a/packages/server/src/integrations/utils.ts
+++ b/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 = {
--- a/packages/shared-core/src/filters.ts
+++ b/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]
--- a/packages/types/src/documents/app/row.ts
+++ b/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 {