Add uiMetadata to viewv2

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

@@ -1,11 +1,26 @@
 <script>
   import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+  import { CalculationType } from "@budibase/types"
+  import { API } from "api"
   import { getContext, createEventDispatcher } from "svelte"
 
-  const { datasource } = getContext("grid")
+  const { definition } = getContext("grid")
   const dispatch = createEventDispatcher()
 
   let modal
+
+  const save = async () => {
+    await API.viewV2.update({
+      ...$definition,
+      schema: {
+        "Average game length": {
+          visible: true,
+          calculationType: CalculationType.AVG,
+          field: "Game Length",
+        },
+      },
+    })
+  }
 </script>
 
 <ActionButton icon="WebPage" quiet on:click={modal?.show}>
@@ -13,7 +28,12 @@
 </ActionButton>
 
 <Modal bind:this={modal}>
-  <ModalContent title="Calculations" confirmText="Save" size="L">
+  <ModalContent
+    title="Calculations"
+    confirmText="Save"
+    size="L"
+    onConfirm={save}
+  >
     Show calculations which are based on
   </ModalContent>
 </Modal>

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

@@ -17,6 +17,7 @@
   let generateButton
 
   $: view = $viewsV2.selected
+  $: calculation = view?.uiMetadata?.calculation
   $: id = view?.id
   $: datasource = {
     type: "viewV2",
@@ -28,9 +29,6 @@
   $: currentTheme = $themeStore?.theme
   $: darkMode = !currentTheme.includes("light")
 
-  $: currentTheme = $themeStore?.theme
-  $: darkMode = !currentTheme.includes("light")
-
   const makeRowActionButtons = actions => {
     return (actions || []).map(action => ({
       text: action.name,
@@ -58,14 +56,14 @@
   buttonsCollapsed
 >
   <svelte:fragment slot="controls">
-    {#if view?.calculation}
+    {#if calculation}
       <GridViewCalculationButton />
     {/if}
     <GridFilterButton />
     <GridSortButton />
     <GridSizeButton />
     <GridManageAccessButton />
-    {#if !view?.calculation}
+    {#if !calculation}
       <GridColumnsSettingButton />
       <GridRowActionsButton />
       <GridScreensButton on:request-generate={() => generateButton?.show()} />

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

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

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

@@ -39,6 +39,18 @@ export default class ViewV2Fetch extends DataFetch {
       this.options
     const { cursor, query, definition } = get(this.store)
 
+    // If this is a calculation view and there are no schema fields then do nothing
+    console.log(definition)
+    if (
+      definition.calculation &&
+      !Object.keys(definition.schema || {}).length
+    ) {
+      return {
+        rows: [],
+        hasNextPage: false,
+      }
+    }
+
     // If sort/filter params are not defined, update options to store the
     // params built in to this view. This ensures that we can accurately
     // compare old and new params and skip a redundant API call.

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

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

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

@@ -72,7 +72,7 @@ export interface ViewV2 {
     type?: SortType
   }
   schema?: Record<string, ViewFieldMetadata>
-  calculation?: boolean
+  uiMetadata?: Record<string, any>
 }
 
 export type ViewSchema = ViewCountOrSumSchema | ViewStatisticsSchema