From 8be7f82ccb04ae04e5ab6b8590737571ef282f4c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 11 Oct 2024 09:27:04 +0100
Subject: [PATCH] Improve view calculation config

---
 .../grid/GridViewCalculationButton.svelte     | 44 ++++++++-----------
 packages/frontend-core/src/utils/table.js     |  4 --
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
index b61163c5ce..f9833a981b 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
@@ -121,7 +121,7 @@
   }
 
   const addCalc = () => {
-    calculations = [...calculations, {}]
+    calculations = [...calculations, { type: CalculationType.AVG }]
   }
 
   const deleteCalc = idx => {
@@ -188,20 +188,14 @@
     size="M"
     onConfirm={save}
   >
-    {#if !calculations.length}
-      <div>
-        <ActionButton quiet icon="Add" on:click={addCalc}>
-          Add your first calculation
-        </ActionButton>
-      </div>
-    {:else}
+    {#if calculations.length}
       <div class="calculations">
         {#each calculations as calc, idx}
           <span>{idx === 0 ? "Calculate" : "and"} the</span>
           <Select
             options={getTypeOptions(calc, calculations)}
             bind:value={calc.type}
-            placeholder="Function"
+            placeholder={false}
           />
           <span>of</span>
           <Select
@@ -211,7 +205,7 @@
           />
           <Icon
             hoverable
-            name="Close"
+            name="Delete"
             size="S"
             on:click={() => deleteCalc(idx)}
             color="var(--spectrum-global-color-gray-700)"
@@ -226,22 +220,22 @@
           />
         </div>
       </div>
-      <div class="buttons">
-        <ActionButton
-          quiet
-          icon="Add"
-          on:click={addCalc}
-          disabled={calculations.length >= 5}
-        >
-          Add calculation
-        </ActionButton>
-      </div>
-      <InfoDisplay
-        icon="Help"
-        quiet
-        body="Calculations only work with numeric columns and a maximum of 5 calculations can be added at once."
-      />
     {/if}
+    <div class="buttons">
+      <ActionButton
+        quiet
+        icon="Add"
+        on:click={addCalc}
+        disabled={calculations.length >= 5}
+      >
+        Add calculation
+      </ActionButton>
+    </div>
+    <InfoDisplay
+      icon="Help"
+      quiet
+      body="Calculations only work with numeric columns and a maximum of 5 calculations can be added at once."
+    />
   </ModalContent>
 </Modal>
 
diff --git a/packages/frontend-core/src/utils/table.js b/packages/frontend-core/src/utils/table.js
index 193848ec4d..7dd8cfac7d 100644
--- a/packages/frontend-core/src/utils/table.js
+++ b/packages/frontend-core/src/utils/table.js
@@ -14,10 +14,6 @@ export function canBeDisplayColumn(column) {
 }
 
 export function canBeSortColumn(column) {
-  if (!sharedCore.canBeSortColumn(column.type)) {
-    return false
-  }
-
   if (column.related) {
     // If it's a related column (only available in the frontend), don't allow using it as display column
     return false