@budibase/frontend-core 3.3.5 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "3.3.5",
+  "version": "3.4.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
@@ -20,5 +20,5 @@
   "devDependencies": {
     "svelte-check": "^4.1.0"
   },
-  "gitHead": "e7d337d75d1d36365d07aa7bfa273db522bbe822"
+  "gitHead": "079956852a2be6d40f7d1e3b19335271cfff2d7f"
 }

package/src/components/grid/cells/DataCell.svelte

@@ -3,6 +3,7 @@
   import GridCell from "./GridCell.svelte"
   import { getCellRenderer } from "../lib/renderers"
   import { derived, writable } from "svelte/store"
+  import TextCell from "./TextCell.svelte"
 
   const {
     rows,
@@ -36,11 +37,17 @@
 
   let api
 
+  // Get the appropriate cell renderer and value
+  $: hasCustomFormat = column.format && !row._isNewRow
+  $: renderer = hasCustomFormat ? TextCell : getCellRenderer(column)
+  $: value = hasCustomFormat ? row.__formatted?.[column.name] : row[column.name]
+
   // Get the error for this cell if the cell is focused or selected
   $: error = getErrorStore(rowFocused, cellId)
 
   // Determine if the cell is editable
   $: readonly =
+    hasCustomFormat ||
     columns.actions.isReadonly(column) ||
     (!$config.canEditRows && !row._isNewRow)
 
@@ -69,7 +76,7 @@
     onKeyDown: (...params) => api?.onKeyDown?.(...params),
     isReadonly: () => readonly,
     getType: () => column.schema.type,
-    getValue: () => row[column.name],
+    getValue: () => value,
     setValue: (value, options = { apply: true }) => {
       validation.actions.setError(cellId, null)
       updateValue({
@@ -136,9 +143,9 @@
   }}
 >
   <svelte:component
-    this={getCellRenderer(column)}
+    this={renderer}
     bind:api
-    value={row[column.name]}
+    {value}
     schema={column.schema}
     onChange={cellAPI.setValue}
     {focused}

package/src/components/grid/lib/renderers.ts

@@ -53,7 +53,6 @@ export const getCellRenderer = (column: UIColumn) => {
   if (column.calculationType) {
     return NumberCell
   }
-
   return (
     getCellRendererByType(column.schema?.cellRenderType) ||
     getCellRendererByType(column.schema?.type) ||

package/src/components/grid/stores/columns.ts

@@ -188,6 +188,7 @@ export const initialise = (context: StoreContext) => {
             conditions: fieldSchema.conditions,
             related: fieldSchema.related,
             calculationType: fieldSchema.calculationType,
+            format: fieldSchema.format,
             __left: undefined as any, // TODO
             __idx: undefined as any, // TODO
           }

package/src/components/grid/stores/rows.ts

@@ -16,6 +16,7 @@ import { Store as StoreContext } from "."
 
 interface IndexedUIRow extends UIRow {
   __idx: number
+  __formatted: Record<string, any>
 }
 
 interface RowStore {
@@ -114,26 +115,44 @@ export const createStores = (): RowStore => {
 export const deriveStores = (context: StoreContext): RowDerivedStore => {
   const { rows, enrichedSchema } = context
 
-  // Enrich rows with an index property and any pending changes
+  // Enrich rows with an index property and additional values
   const enrichedRows = derived(
     [rows, enrichedSchema],
     ([$rows, $enrichedSchema]) => {
-      const customColumns = Object.values($enrichedSchema || {}).filter(
-        f => f.related
-      )
-      return $rows.map<IndexedUIRow>((row, idx) => ({
-        ...row,
-        __idx: idx,
-        ...customColumns.reduce<Record<string, string>>((map, column) => {
-          const fromField = $enrichedSchema![column.related!.field]
-          map[column.name] = getRelatedTableValues(
-            row,
-            { ...column, related: column.related! },
-            fromField
-          )
-          return map
-        }, {}),
-      }))
+      // Find columns which require additional processing
+      const cols = Object.values($enrichedSchema || {})
+      const relatedColumns = cols.filter(col => col.related)
+      const formattedColumns = cols.filter(col => col.format)
+
+      return $rows.map<IndexedUIRow>((row, idx) => {
+        // Derive any values that need enriched from related rows
+        const relatedValues = relatedColumns.reduce<Record<string, string>>(
+          (map, column) => {
+            const fromField = $enrichedSchema![column.related!.field]
+            map[column.name] = getRelatedTableValues(
+              row,
+              { ...column, related: column.related! },
+              fromField
+            )
+            return map
+          },
+          {}
+        )
+        // Derive any display-only formatted values for this row
+        const formattedValues = formattedColumns.reduce<Record<string, any>>(
+          (map, column) => {
+            map[column.name] = column.format!(row)
+            return map
+          },
+          {}
+        )
+        return {
+          ...row,
+          ...relatedValues,
+          __formatted: formattedValues,
+          __idx: idx,
+        }
+      })
     }
   )
 
@@ -791,6 +810,7 @@ export const createActions = (context: StoreContext): RowActionStore => {
     let clone: Row = { ...row }
     delete clone.__idx
     delete clone.__metadata
+    delete clone.__formatted
     if (!get(hasBudibaseIdentifiers) && isGeneratedRowID(clone._id!)) {
       delete clone._id
     }