@budibase/frontend-core 2.32.8 → 2.32.9

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.32.8",
+  "version": "2.32.9",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.32.8",
-    "@budibase/shared-core": "2.32.8",
-    "@budibase/types": "2.32.8",
+    "@budibase/bbui": "2.32.9",
+    "@budibase/shared-core": "2.32.9",
+    "@budibase/types": "2.32.9",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.7.5"
   },
-  "gitHead": "2fb4f8e8807ae0d134a6aa1037f303f2f8de5493"
+  "gitHead": "c3d1bac34a42f0707e0cba968a4df9f58fa5088e"
 }

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

@@ -2,6 +2,7 @@
   import { onMount, getContext } from "svelte"
   import { Dropzone } from "@budibase/bbui"
   import GridPopover from "../overlays/GridPopover.svelte"
+  import { FieldType } from "@budibase/types"
 
   export let value
   export let focused = false
@@ -81,7 +82,12 @@
 >
   {#each value || [] as attachment}
     {#if isImage(attachment.extension)}
-      <img src={attachment.url} alt={attachment.extension} />
+      <img
+        class:light={!$props?.darkMode &&
+          schema.type === FieldType.SIGNATURE_SINGLE}
+        src={attachment.url}
+        alt={attachment.extension}
+      />
     {:else}
       <div class="file" title={attachment.name}>
         {attachment.extension}
@@ -140,4 +146,9 @@
     width: 320px;
     padding: var(--cell-padding);
   }
+
+  .attachment-cell img.light {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+  }
 </style>

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

@@ -1,6 +1,6 @@
 <script>
   import { getContext, onMount, tick } from "svelte"
-  import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
+  import { canBeSortColumn, canBeDisplayColumn } from "@budibase/frontend-core"
   import { Icon, Menu, MenuItem, Modal } from "@budibase/bbui"
   import GridCell from "./GridCell.svelte"
   import { getColumnIcon } from "../lib/utils"
@@ -165,7 +165,17 @@
   }
 
   const hideColumn = () => {
-    datasource.actions.addSchemaMutation(column.name, { visible: false })
+    const { related } = column
+    const mutation = { visible: false }
+    if (!related) {
+      datasource.actions.addSchemaMutation(column.name, mutation)
+    } else {
+      datasource.actions.addSubSchemaMutation(
+        related.subField,
+        related.field,
+        mutation
+      )
+    }
     datasource.actions.saveSchemaMutations()
     open = false
   }
@@ -347,15 +357,14 @@
         <MenuItem
           icon="Label"
           on:click={makeDisplayColumn}
-          disabled={column.primaryDisplay ||
-            !canBeDisplayColumn(column.schema.type)}
+          disabled={column.primaryDisplay || !canBeDisplayColumn(column.schema)}
         >
           Use as display column
         </MenuItem>
         <MenuItem
           icon="SortOrderUp"
           on:click={sortAscending}
-          disabled={!canBeSortColumn(column.schema.type) ||
+          disabled={!canBeSortColumn(column.schema) ||
             (column.name === $sort.column && $sort.order === "ascending")}
         >
           Sort {sortingLabels.ascending}
@@ -363,7 +372,7 @@
         <MenuItem
           icon="SortOrderDown"
           on:click={sortDescending}
-          disabled={!canBeSortColumn(column.schema.type) ||
+          disabled={!canBeSortColumn(column.schema) ||
             (column.name === $sort.column && $sort.order === "descending")}
         >
           Sort {sortingLabels.descending}

package/src/components/grid/controls/ColumnsSettingButton.svelte

@@ -4,13 +4,15 @@
   import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
   import { FieldPermissions } from "../../../constants"
 
-  const { columns, datasource } = getContext("grid")
+  const { tableColumns, datasource } = getContext("grid")
 
   let open = false
   let anchor
 
-  $: anyRestricted = $columns.filter(col => !col.visible || col.readonly).length
-  $: text = anyRestricted ? `Columns: (${anyRestricted} restricted)` : "Columns"
+  $: anyRestricted = $tableColumns.filter(
+    col => !col.visible || col.readonly
+  ).length
+  $: text = anyRestricted ? `Columns (${anyRestricted} restricted)` : "Columns"
   $: permissions =
     $datasource.type === "viewV2"
       ? [
@@ -28,12 +30,12 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open || anyRestricted}
-    disabled={!$columns.length}
+    disabled={!$tableColumns.length}
   >
     {text}
   </ActionButton>
 </div>
 
 <Popover bind:open {anchor} align="left">
-  <ColumnsSettingContent columns={$columns} {permissions} />
+  <ColumnsSettingContent columns={$tableColumns} {permissions} />
 </Popover>

package/src/components/grid/controls/ColumnsSettingContent.svelte

@@ -122,8 +122,10 @@
       label: name,
       schema: {
         type: column.type,
+        subtype: column.subtype,
         visible: column.visible,
         readonly: column.readonly,
+        constraints: column.constraints, // This is needed to properly display "users" column
       },
     }
   })

package/src/components/grid/controls/SortButton.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
-  import { canBeSortColumn } from "@budibase/shared-core"
+  import { canBeSortColumn } from "@budibase/frontend-core"
 
   const { sort, columns } = getContext("grid")
 
@@ -13,8 +13,9 @@
       label: col.label || col.name,
       value: col.name,
       type: col.schema?.type,
+      related: col.related,
     }))
-    .filter(col => canBeSortColumn(col.type))
+    .filter(col => canBeSortColumn(col))
   $: orderOptions = getOrderOptions($sort.column, columnOptions)
 
   const getOrderOptions = (column, columnOptions) => {

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

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

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

@@ -42,6 +42,11 @@ export const deriveStores = context => {
     return map
   })
 
+  // Derived list of columns which are direct part of the table
+  const tableColumns = derived(columns, $columns => {
+    return $columns.filter(col => !col.related)
+  })
+
   // Derived list of columns which have not been explicitly hidden
   const visibleColumns = derived(columns, $columns => {
     return $columns.filter(col => col.visible)
@@ -64,6 +69,7 @@ export const deriveStores = context => {
   })
 
   return {
+    tableColumns,
     displayColumn,
     columnLookupMap,
     visibleColumns,
@@ -73,16 +79,24 @@ export const deriveStores = context => {
 }
 
 export const createActions = context => {
-  const { columns, datasource, schema } = context
+  const { columns, datasource } = context
 
   // Updates the width of all columns
   const changeAllColumnWidths = async width => {
-    const $schema = get(schema)
-    let mutations = {}
-    Object.keys($schema).forEach(field => {
-      mutations[field] = { width }
+    const $columns = get(columns)
+    $columns.forEach(column => {
+      const { related } = column
+      const mutation = { width }
+      if (!related) {
+        datasource.actions.addSchemaMutation(column.name, mutation)
+      } else {
+        datasource.actions.addSubSchemaMutation(
+          related.subField,
+          related.field,
+          mutation
+        )
+      }
     })
-    datasource.actions.addSchemaMutations(mutations)
     await datasource.actions.saveSchemaMutations()
   }
 
@@ -136,7 +150,7 @@ export const initialise = context => {
         .map(field => {
           const fieldSchema = $enrichedSchema[field]
           const oldColumn = $columns?.find(col => col.name === field)
-          let column = {
+          const column = {
             name: field,
             label: fieldSchema.displayName || field,
             schema: fieldSchema,
@@ -145,6 +159,7 @@ export const initialise = context => {
             readonly: fieldSchema.readonly,
             order: fieldSchema.order ?? oldColumn?.order,
             conditions: fieldSchema.conditions,
+            related: fieldSchema.related,
           }
           // Override a few properties for primary display
           if (field === primaryDisplay) {

package/src/components/grid/stores/datasource.js

@@ -1,6 +1,6 @@
 import { derived, get } from "svelte/store"
 import { getDatasourceDefinition, getDatasourceSchema } from "../../../fetch"
-import { memo } from "../../../utils"
+import { enrichSchemaWithRelColumns, memo } from "../../../utils"
 
 export const createStores = () => {
   const definition = memo(null)
@@ -53,10 +53,13 @@ export const deriveStores = context => {
       if (!$schema) {
         return null
       }
-      let enrichedSchema = {}
-      Object.keys($schema).forEach(field => {
+
+      const schemaWithRelatedColumns = enrichSchemaWithRelColumns($schema)
+
+      const enrichedSchema = {}
+      Object.keys(schemaWithRelatedColumns).forEach(field => {
         enrichedSchema[field] = {
-          ...$schema[field],
+          ...schemaWithRelatedColumns[field],
           ...$schemaOverrides?.[field],
           ...$schemaMutations[field],
         }
@@ -202,24 +205,6 @@ export const createActions = context => {
     })
   }
 
-  // Adds schema mutations for multiple fields at once
-  const addSchemaMutations = mutations => {
-    const fields = Object.keys(mutations || {})
-    if (!fields.length) {
-      return
-    }
-    schemaMutations.update($schemaMutations => {
-      let newSchemaMutations = { ...$schemaMutations }
-      fields.forEach(field => {
-        newSchemaMutations[field] = {
-          ...newSchemaMutations[field],
-          ...mutations[field],
-        }
-      })
-      return newSchemaMutations
-    })
-  }
-
   // Saves schema changes to the server, if possible
   const saveSchemaMutations = async () => {
     // If we can't save schema changes then we just want to keep this in memory
@@ -309,7 +294,6 @@ export const createActions = context => {
         changePrimaryDisplay,
         addSchemaMutation,
         addSubSchemaMutation,
-        addSchemaMutations,
         saveSchemaMutations,
         resetSchemaMutations,
       },

package/src/components/grid/stores/datasources/viewV2.js

@@ -120,25 +120,29 @@ export const initialise = context => {
     // When sorting changes, ensure view definition is kept up to date
     unsubscribers.push(
       sort.subscribe(async $sort => {
+        // Ensure we're updating the correct view
+        const $view = get(definition)
+        if ($view?.id !== $datasource.id) {
+          return
+        }
+
+        // Skip if nothing actually changed
+        if (
+          $sort?.column === $view.sort?.field &&
+          $sort?.order === $view.sort?.order
+        ) {
+          return
+        }
+
         // If we can mutate schema then update the view definition
         if (get(config).canSaveSchema) {
-          // Ensure we're updating the correct view
-          const $view = get(definition)
-          if ($view?.id !== $datasource.id) {
-            return
-          }
-          if (
-            $sort?.column !== $view.sort?.field ||
-            $sort?.order !== $view.sort?.order
-          ) {
-            await datasource.actions.saveDefinition({
-              ...$view,
-              sort: {
-                field: $sort.column,
-                order: $sort.order || "ascending",
-              },
-            })
-          }
+          await datasource.actions.saveDefinition({
+            ...$view,
+            sort: {
+              field: $sort.column,
+              order: $sort.order || "ascending",
+            },
+          })
         }
 
         // Also update the fetch to ensure the new sort is respected.

package/src/components/grid/stores/reorder.js

@@ -214,11 +214,20 @@ export const createActions = context => {
     })
 
     // Extract new orders as schema mutations
-    let mutations = {}
     get(columns).forEach((column, idx) => {
-      mutations[column.name] = { order: idx }
+      const { related } = column
+      const mutation = { order: idx }
+      if (!related) {
+        datasource.actions.addSchemaMutation(column.name, mutation)
+      } else {
+        datasource.actions.addSubSchemaMutation(
+          related.subField,
+          related.field,
+          mutation
+        )
+      }
     })
-    datasource.actions.addSchemaMutations(mutations)
+
     await datasource.actions.saveSchemaMutations()
   }
 

package/src/components/grid/stores/resize.js

@@ -38,6 +38,7 @@ export const createActions = context => {
       initialWidth: column.width,
       initialMouseX: x,
       column: column.name,
+      related: column.related,
     })
 
     // Add mouse event listeners to handle resizing
@@ -50,7 +51,7 @@ export const createActions = context => {
 
   // Handler for moving the mouse to resize columns
   const onResizeMouseMove = e => {
-    const { initialMouseX, initialWidth, width, column } = get(resize)
+    const { initialMouseX, initialWidth, width, column, related } = get(resize)
     const { x } = parseEventLocation(e)
     const dx = x - initialMouseX
     const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
@@ -61,7 +62,13 @@ export const createActions = context => {
     }
 
     // Update column state
-    datasource.actions.addSchemaMutation(column, { width })
+    if (!related) {
+      datasource.actions.addSchemaMutation(column, { width })
+    } else {
+      datasource.actions.addSubSchemaMutation(related.subField, related.field, {
+        width,
+      })
+    }
 
     // Update state
     resize.update(state => ({

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

@@ -6,6 +6,7 @@ import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 import { sleep } from "../../../utils/utils"
 import { FieldType } from "@budibase/types"
+import { getRelatedTableValues } from "../../../utils"
 
 export const createStores = () => {
   const rows = writable([])
@@ -42,15 +43,26 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { rows } = context
+  const { rows, enrichedSchema } = context
 
   // Enrich rows with an index property and any pending changes
-  const enrichedRows = derived(rows, $rows => {
-    return $rows.map((row, idx) => ({
-      ...row,
-      __idx: idx,
-    }))
-  })
+  const enrichedRows = derived(
+    [rows, enrichedSchema],
+    ([$rows, $enrichedSchema]) => {
+      const customColumns = Object.values($enrichedSchema || {}).filter(
+        f => f.related
+      )
+      return $rows.map((row, idx) => ({
+        ...row,
+        __idx: idx,
+        ...customColumns.reduce((map, column) => {
+          const fromField = $enrichedSchema[column.related.field]
+          map[column.name] = getRelatedTableValues(row, column, fromField)
+          return map
+        }, {}),
+      }))
+    }
+  )
 
   // Generate a lookup map to quick find a row by ID
   const rowLookupMap = derived(enrichedRows, $enrichedRows => {

package/src/utils/index.js

@@ -10,3 +10,5 @@ export { createWebsocket } from "./websocket"
 export * from "./download"
 export * from "./theme"
 export * from "./settings"
+export * from "./relatedColumns"
+export * from "./table"

package/src/utils/relatedColumns.js

@@ -0,0 +1,107 @@
+import { FieldType, RelationshipType } from "@budibase/types"
+import { Helpers } from "@budibase/bbui"
+
+const columnTypeManyTypeOverrides = {
+  [FieldType.DATETIME]: FieldType.STRING,
+  [FieldType.BOOLEAN]: FieldType.STRING,
+  [FieldType.SIGNATURE_SINGLE]: FieldType.ATTACHMENTS,
+}
+
+const columnTypeManyParser = {
+  [FieldType.DATETIME]: (value, field) => {
+    function parseDate(value) {
+      const { timeOnly, dateOnly, ignoreTimezones } = field || {}
+      const enableTime = !dateOnly
+      const parsedValue = Helpers.parseDate(value, {
+        timeOnly,
+        enableTime,
+        ignoreTimezones,
+      })
+      const parsed = Helpers.getDateDisplayValue(parsedValue, {
+        enableTime,
+        timeOnly,
+      })
+      return parsed
+    }
+
+    return value?.map(v => parseDate(v))
+  },
+  [FieldType.BOOLEAN]: value => value?.map(v => !!v),
+  [FieldType.BB_REFERENCE_SINGLE]: value => [
+    ...new Map(value.map(i => [i._id, i])).values(),
+  ],
+  [FieldType.BB_REFERENCE]: value => [
+    ...new Map(value.map(i => [i._id, i])).values(),
+  ],
+  [FieldType.ARRAY]: value => Array.from(new Set(value)),
+}
+
+export function enrichSchemaWithRelColumns(schema) {
+  if (!schema) {
+    return
+  }
+  const result = Object.keys(schema).reduce((result, fieldName) => {
+    const field = schema[fieldName]
+    result[fieldName] = field
+
+    if (field.visible !== false && field.columns) {
+      const fromSingle =
+        field?.relationshipType === RelationshipType.ONE_TO_MANY
+
+      for (const relColumn of Object.keys(field.columns)) {
+        const relField = field.columns[relColumn]
+        if (!relField.visible) {
+          continue
+        }
+        const name = `${field.name}.${relColumn}`
+        result[name] = {
+          ...relField,
+          name,
+          related: { field: fieldName, subField: relColumn },
+          cellRenderType:
+            (!fromSingle && columnTypeManyTypeOverrides[relField.type]) ||
+            relField.type,
+        }
+      }
+    }
+    return result
+  }, {})
+
+  return result
+}
+
+export function getRelatedTableValues(row, field, fromField) {
+  const fromSingle =
+    fromField?.relationshipType === RelationshipType.ONE_TO_MANY
+
+  let result = ""
+
+  if (fromSingle) {
+    result = row[field.related.field]?.[0]?.[field.related.subField]
+  } else {
+    const parser = columnTypeManyParser[field.type] || (value => value)
+
+    result = parser(
+      row[field.related.field]
+        ?.flatMap(r => r[field.related.subField])
+        ?.filter(i => i !== undefined && i !== null),
+      field
+    )
+
+    if (
+      [
+        FieldType.STRING,
+        FieldType.NUMBER,
+        FieldType.BIGINT,
+        FieldType.BOOLEAN,
+        FieldType.DATETIME,
+        FieldType.LONGFORM,
+        FieldType.BARCODEQR,
+      ].includes(field.type)
+    ) {
+      result = result?.join(", ")
+    }
+  }
+
+  return result
+}

package/src/utils/table.js

@@ -0,0 +1,27 @@
+import * as sharedCore from "@budibase/shared-core"
+
+export function canBeDisplayColumn(column) {
+  if (!sharedCore.canBeDisplayColumn(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
+  }
+
+  return true
+}
+
+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
+  }
+
+  return true
+}