Add initial differences for calculation views

packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+  import { getContext, createEventDispatcher } from "svelte"
+
+  const { datasource } = getContext("grid")
+  const dispatch = createEventDispatcher()
+
+  let modal
+</script>
+
+<ActionButton icon="WebPage" quiet on:click={modal?.show}>
+  Configure calculations
+</ActionButton>
+
+<Modal bind:this={modal}>
+  <ModalContent title="Calculations" confirmText="Save" size="L">
+    Show calculations which are based on
+  </ModalContent>
+</Modal>

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

@@ -12,14 +12,16 @@
   import GridGenerateButton from "components/backend/DataTable/buttons/grid/GridGenerateButton.svelte"
   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"
 
   let generateButton
 
-  $: id = $viewsV2.selected?.id
+  $: view = $viewsV2.selected
+  $: id = view?.id
   $: datasource = {
     type: "viewV2",
     id,
-    tableId: $viewsV2.selected?.tableId,
+    tableId: view?.tableId,
   }
   $: buttons = makeRowActionButtons($rowActions[id])
   $: rowActions.refreshRowActions(id)
@@ -50,13 +52,18 @@
   buttonsCollapsed
 >
   <svelte:fragment slot="controls">
+    {#if view?.calculation}
+      <GridViewCalculationButton />
+    {/if}
     <GridFilterButton />
     <GridSortButton />
     <GridSizeButton />
-    <GridColumnsSettingButton />
     <GridManageAccessButton />
-    <GridRowActionsButton />
-    <GridScreensButton on:request-generate={() => generateButton?.show()} />
+    {#if !view?.calculation}
+      <GridColumnsSettingButton />
+      <GridRowActionsButton />
+      <GridScreensButton on:request-generate={() => generateButton?.show()} />
+    {/if}
   </svelte:fragment>
   <svelte:fragment slot="controls-right">
     <GridGenerateButton bind:this={generateButton} />

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

@@ -38,8 +38,8 @@
       const newView = await viewsV2.create({
         name: trimmedName,
         tableId: table._id,
-        schema: enrichSchema(table.schema),
-        primaryDisplay: table.primaryDisplay,
+        schema: calculation ? {} : enrichSchema(table.schema),
+        primaryDisplay: calculation ? undefined : table.primaryDisplay,
         calculation,
       })
       notifications.success(`View ${name} created`)

packages/server/src/api/controllers/view/viewsV2.ts

@@ -106,6 +106,7 @@ export async function create(ctx: Ctx<CreateViewRequest, ViewResponse>) {
     sort: view.sort,
     schema,
     primaryDisplay: view.primaryDisplay,
+    calculation: view.calculation,
   }
   const result = await sdk.views.create(tableId, parsedView)
   ctx.status = 201
@@ -141,6 +142,7 @@ export async function update(ctx: Ctx<UpdateViewRequest, ViewResponse>) {
     sort: view.sort,
     schema,
     primaryDisplay: view.primaryDisplay,
+    calculation: view.calculation,
   }
 
   const result = await sdk.views.update(tableId, parsedView)