Add support for creating and displaying calculation views

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte

@@ -14,11 +14,12 @@
   import GridScreensButton from "components/backend/DataTable/buttons/grid/GridScreensButton.svelte"
   import GridRowActionsButton from "components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte"
   import GridViewCalculationButton from "components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte"
+  import { ViewV2Type } from "@budibase/types"
 
   let generateButton
 
   $: view = $viewsV2.selected
-  $: calculation = view?.uiMetadata?.calculation
+  $: calculation = view?.type === ViewV2Type.CALCULATION
   $: id = view?.id
   $: datasource = {
     type: "viewV2",

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewButton.svelte

@@ -3,6 +3,7 @@
   import { Input, notifications, Button, Icon, ListItem } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import { viewsV2 } from "stores/builder"
+  import { CalculationType, ViewV2Type } from "@budibase/types"
 
   export let table
   export let firstView = false
@@ -40,9 +41,7 @@
         tableId: table._id,
         schema: enrichSchema(table.schema),
         primaryDisplay: calculation ? undefined : table.primaryDisplay,
-        uiMetadata: {
-          calculation,
-        },
+        type: calculation ? ViewV2Type.CALCULATION : undefined,
       })
       notifications.success(`View ${name} created`)
       $goto(`./${newView.id}`)

packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte

@@ -20,6 +20,7 @@
       }
       notifications.success("View deleted")
     } catch (error) {
+      console.error(error)
       notifications.error("Error deleting view")
     }
   }

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

@@ -35,6 +35,9 @@ const TypeComponentMap = {
   [FieldType.BB_REFERENCE_SINGLE]: BBReferenceSingleCell,
 }
 export const getCellRenderer = column => {
+  if (column.calculation) {
+    return NumberCell
+  }
   return (
     TypeComponentMap[column?.schema?.cellRenderType] ||
     TypeComponentMap[column?.schema?.type] ||

packages/frontend-core/src/components/grid/stores/columns.js

@@ -160,6 +160,7 @@ export const initialise = context => {
             order: fieldSchema.order ?? oldColumn?.order,
             conditions: fieldSchema.conditions,
             related: fieldSchema.related,
+            calculation: fieldSchema.calculationType != null,
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {

packages/frontend-core/src/components/grid/stores/config.js

@@ -1,5 +1,6 @@
 import { derivedMemo } from "../../../utils"
 import { derived } from "svelte/store"
+import { ViewV2Type } from "@budibase/types"
 
 export const createStores = context => {
   const { props } = context
@@ -30,12 +31,12 @@ export const createStores = context => {
 }
 
 export const deriveStores = context => {
-  const { props, hasNonAutoColumn } = context
+  const { props, definition, hasNonAutoColumn } = context
 
   // Derive features
   const config = derived(
-    [props, hasNonAutoColumn],
-    ([$props, $hasNonAutoColumn]) => {
+    [props, definition, hasNonAutoColumn],
+    ([$props, $definition, $hasNonAutoColumn]) => {
       let config = { ...$props }
       const type = $props.datasource?.type
 
@@ -59,6 +60,14 @@ export const deriveStores = context => {
         config.canEditColumns = false
       }
 
+      // Disable features for calculation views
+      if (type === "viewV2" && $definition?.type === ViewV2Type.CALCULATION) {
+        config.canAddRows = false
+        config.canEditRows = false
+        config.canDeleteRows = false
+        config.canExpandRows = false
+      }
+
       return config
     }
   )

packages/frontend-core/src/utils/schema.js

@@ -2,14 +2,15 @@ import { helpers } from "@budibase/shared-core"
 import { TypeIconMap } from "../constants"
 
 export const getColumnIcon = column => {
+  if (column.calculation) {
+    return "Calculator"
+  }
   if (column.schema.autocolumn) {
     return "MagicWand"
   }
-
   if (helpers.schema.isDeprecatedSingleUserColumn(column.schema)) {
     return "User"
   }
-
   const { type, subtype } = column.schema
   const result =
     typeof TypeIconMap[type] === "object" && subtype