@budibase/frontend-core 2.29.21 → 2.29.23

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

@@ -0,0 +1,157 @@
+import { writable, get } from "svelte/store"
+import { derivedMemo, QueryUtils } from "../../../utils"
+import { FieldType, EmptyFilterOption } from "@budibase/types"
+
+export const createStores = () => {
+  const metadata = writable({})
+  return {
+    metadata,
+  }
+}
+
+export const deriveStores = context => {
+  const { columns } = context
+
+  // Derive and memoize the cell conditions present in our columns so that we
+  // only recompute condition metadata when absolutely necessary
+  const conditions = derivedMemo(columns, $columns => {
+    let newConditions = []
+    for (let column of $columns) {
+      for (let condition of column.conditions || []) {
+        newConditions.push({
+          ...condition,
+          column: column.name,
+          type: column.schema.type,
+        })
+      }
+    }
+    return newConditions
+  })
+
+  return {
+    conditions,
+  }
+}
+
+export const initialise = context => {
+  const { metadata, conditions, rows } = context
+
+  // Recompute all metadata if conditions change
+  conditions.subscribe($conditions => {
+    let newMetadata = {}
+    if ($conditions?.length) {
+      for (let row of get(rows)) {
+        newMetadata[row._id] = evaluateConditions(row, $conditions)
+      }
+    }
+    metadata.set(newMetadata)
+  })
+
+  // Recompute metadata for specific rows when they change
+  rows.subscribe($rows => {
+    const $conditions = get(conditions)
+    if (!$conditions?.length) {
+      return
+    }
+    const $metadata = get(metadata)
+    let metadataUpdates = {}
+    for (let row of $rows) {
+      if (!row._rev || $metadata[row._id]?.version !== row._rev) {
+        metadataUpdates[row._id] = evaluateConditions(row, $conditions)
+      }
+    }
+    if (Object.keys(metadataUpdates).length) {
+      metadata.update(state => ({
+        ...state,
+        ...metadataUpdates,
+      }))
+    }
+  })
+}
+
+const TypeCoercionMap = {
+  [FieldType.NUMBER]: parseFloat,
+  [FieldType.DATETIME]: val => {
+    if (val) {
+      return new Date(val).toISOString()
+    }
+    return null
+  },
+  [FieldType.BOOLEAN]: val => {
+    if (`${val}`.toLowerCase().trim() === "true") {
+      return true
+    }
+    if (`${val}`.toLowerCase().trim() === "false") {
+      return false
+    }
+    return null
+  },
+}
+
+// Evaluates an array of cell conditions against a certain row and returns the
+// resultant metadata
+const evaluateConditions = (row, conditions) => {
+  let metadata = {
+    version: row._rev,
+    row: {},
+    cell: {},
+  }
+  for (let condition of conditions) {
+    try {
+      let {
+        column,
+        type,
+        referenceValue,
+        operator,
+        metadataKey,
+        metadataValue,
+        target,
+      } = condition
+      let value = row[column]
+
+      // Coerce values into correct types for primitives
+      let coercedType = type
+      if (type === FieldType.FORMULA) {
+        // For formulas we want to ensure that the reference type matches the
+        // real type
+        if (value === true || value === false) {
+          coercedType = FieldType.BOOLEAN
+        } else if (typeof value === "number") {
+          coercedType = FieldType.NUMBER
+        }
+      }
+      const coerce = TypeCoercionMap[coercedType]
+      if (coerce) {
+        value = coerce(value)
+        referenceValue = coerce(referenceValue)
+      }
+
+      // Build lucene compatible condition expression
+      const luceneFilter = {
+        operator,
+        type,
+        field: "value",
+        value: referenceValue,
+      }
+      let query = QueryUtils.buildQuery([luceneFilter])
+      query.onEmptyFilter = EmptyFilterOption.RETURN_NONE
+      const result = QueryUtils.runQuery([{ value }], query)
+      if (result.length > 0) {
+        if (target === "row") {
+          metadata.row = {
+            ...metadata.row,
+            [metadataKey]: metadataValue,
+          }
+        } else {
+          metadata.cell[column] = {
+            ...metadata.cell[column],
+            [metadataKey]: metadataValue,
+          }
+        }
+      }
+    } catch {
+      // Swallow
+    }
+  }
+  return metadata
+}

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

@@ -12,9 +12,9 @@ export const createStores = context => {
   const initialFilter = getProp("initialFilter")
   const fixedRowHeight = getProp("fixedRowHeight")
   const schemaOverrides = getProp("schemaOverrides")
-  const columnWhitelist = getProp("columnWhitelist")
   const notifySuccess = getProp("notifySuccess")
   const notifyError = getProp("notifyError")
+  const rowConditions = getProp("rowConditions")
 
   return {
     datasource,
@@ -23,9 +23,9 @@ export const createStores = context => {
     initialFilter,
     fixedRowHeight,
     schemaOverrides,
-    columnWhitelist,
     notifySuccess,
     notifyError,
+    rowConditions,
   }
 }
 

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

@@ -13,14 +13,8 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const {
-    API,
-    definition,
-    schemaOverrides,
-    columnWhitelist,
-    datasource,
-    schemaMutations,
-  } = context
+  const { API, definition, schemaOverrides, datasource, schemaMutations } =
+    context
 
   const schema = derived(definition, $definition => {
     let schema = getDatasourceSchema({
@@ -46,17 +40,13 @@ export const deriveStores = context => {
   // Derives the total enriched schema, made up of the saved schema and any
   // prop and user overrides
   const enrichedSchema = derived(
-    [schema, schemaOverrides, schemaMutations, columnWhitelist],
-    ([$schema, $schemaOverrides, $schemaMutations, $columnWhitelist]) => {
+    [schema, schemaOverrides, schemaMutations],
+    ([$schema, $schemaOverrides, $schemaMutations]) => {
       if (!$schema) {
         return null
       }
       let enrichedSchema = {}
       Object.keys($schema).forEach(field => {
-        // Apply whitelist if provided
-        if ($columnWhitelist?.length && !$columnWhitelist.includes(field)) {
-          return
-        }
         enrichedSchema[field] = {
           ...$schema[field],
           ...$schemaOverrides?.[field],

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

@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 
 export const createActions = context => {
-  const { columns, stickyColumn, table, viewV2 } = context
+  const { columns, table, viewV2 } = context
 
   const saveDefinition = async () => {
     throw "This datasource does not support updating the definition"
@@ -30,9 +30,7 @@ export const createActions = context => {
   }
 
   const canUseColumn = name => {
-    const $columns = get(columns)
-    const $sticky = get(stickyColumn)
-    return $columns.some(col => col.name === name) || $sticky?.name === name
+    return get(columns).some(col => col.name === name)
   }
 
   return {

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

@@ -3,14 +3,17 @@ import { get } from "svelte/store"
 const SuppressErrors = true
 
 export const createActions = context => {
-  const { API, datasource, columns, stickyColumn } = context
+  const { API, datasource, columns } = context
 
   const saveDefinition = async newDefinition => {
     await API.saveTable(newDefinition)
   }
 
   const saveRow = async row => {
-    row.tableId = get(datasource)?.tableId
+    row = {
+      ...row,
+      tableId: get(datasource)?.tableId,
+    }
     return await API.saveRow(row, SuppressErrors)
   }
 
@@ -40,9 +43,7 @@ export const createActions = context => {
   }
 
   const canUseColumn = name => {
-    const $columns = get(columns)
-    const $sticky = get(stickyColumn)
-    return $columns.some(col => col.name === name) || $sticky?.name === name
+    return get(columns).some(col => col.name === name)
   }
 
   return {

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

@@ -3,7 +3,7 @@ import { get } from "svelte/store"
 const SuppressErrors = true
 
 export const createActions = context => {
-  const { API, datasource, columns, stickyColumn } = context
+  const { API, datasource, columns } = context
 
   const saveDefinition = async newDefinition => {
     await API.viewV2.update(newDefinition)
@@ -11,8 +11,11 @@ export const createActions = context => {
 
   const saveRow = async row => {
     const $datasource = get(datasource)
-    row.tableId = $datasource?.tableId
-    row._viewId = $datasource?.id
+    row = {
+      ...row,
+      tableId: $datasource?.tableId,
+      _viewId: $datasource?.id,
+    }
     return {
       ...(await API.saveRow(row, SuppressErrors)),
       _viewId: row._viewId,
@@ -37,12 +40,7 @@ export const createActions = context => {
   }
 
   const canUseColumn = name => {
-    const $columns = get(columns)
-    const $sticky = get(stickyColumn)
-    return (
-      $columns.some(col => col.name === name && col.visible) ||
-      $sticky?.name === name
-    )
+    return get(columns).some(col => col.name === name && col.visible)
   }
 
   return {

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

@@ -20,28 +20,30 @@ import * as Table from "./datasources/table"
 import * as ViewV2 from "./datasources/viewV2"
 import * as NonPlus from "./datasources/nonPlus"
 import * as Cache from "./cache"
+import * as Conditions from "./conditions"
 
 const DependencyOrderedStores = [
   Sort,
   Filter,
   Bounds,
-  Scroll,
   Table,
   ViewV2,
   NonPlus,
   Datasource,
   Columns,
+  Scroll,
+  Validation,
   Rows,
+  Conditions,
   UI,
-  Validation,
   Resize,
   Viewport,
   Reorder,
   Users,
   Menu,
   Pagination,
-  Clipboard,
   Config,
+  Clipboard,
   Notifications,
   Cache,
 ]

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

@@ -1,11 +1,13 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
+import { parseCellID } from "../lib/utils"
 
 export const createStores = () => {
   const menu = writable({
-    x: 0,
-    y: 0,
+    left: 0,
+    top: 0,
     visible: false,
-    selectedRow: null,
+    multiRowMode: false,
+    multiCellMode: false,
   })
   return {
     menu,
@@ -13,7 +15,15 @@ export const createStores = () => {
 }
 
 export const createActions = context => {
-  const { menu, focusedCellId, gridID } = context
+  const {
+    menu,
+    focusedCellId,
+    gridID,
+    selectedRows,
+    selectedRowCount,
+    selectedCellMap,
+    selectedCellCount,
+  } = context
 
   const open = (cellId, e) => {
     e.preventDefault()
@@ -29,11 +39,35 @@ export const createActions = context => {
     // Compute bounds of cell relative to outer data node
     const targetBounds = e.target.getBoundingClientRect()
     const dataBounds = dataNode.getBoundingClientRect()
-    focusedCellId.set(cellId)
+
+    // Check if there are multiple rows selected, and if this is one of them
+    let multiRowMode = false
+    if (get(selectedRowCount) > 1) {
+      const { rowId } = parseCellID(cellId)
+      if (get(selectedRows)[rowId]) {
+        multiRowMode = true
+      }
+    }
+
+    // Check if there are multiple cells selected, and if this is one of them
+    let multiCellMode = false
+    if (!multiRowMode && get(selectedCellCount) > 1) {
+      if (get(selectedCellMap)[cellId]) {
+        multiCellMode = true
+      }
+    }
+
+    // Only focus this cell if not in multi row mode
+    if (!multiRowMode && !multiCellMode) {
+      focusedCellId.set(cellId)
+    }
+
     menu.set({
       left: targetBounds.left - dataBounds.left + e.offsetX,
       top: targetBounds.top - dataBounds.top + e.offsetY,
       visible: true,
+      multiRowMode,
+      multiCellMode,
     })
   }
 

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

@@ -1,4 +1,4 @@
-import { derived, get } from "svelte/store"
+import { derived } from "svelte/store"
 
 export const initialise = context => {
   const { scrolledRowCount, rows, visualRowCapacity } = context
@@ -15,8 +15,14 @@ export const initialise = context => {
   )
 
   // Fetch next page when fewer than 25 remaining rows to scroll
-  remainingRows.subscribe(remaining => {
-    if (remaining < 25 && get(rowCount)) {
+  const needsNewPage = derived(
+    [remainingRows, rowCount],
+    ([$remainingRows, $rowCount]) => {
+      return $remainingRows < 25 && $rowCount
+    }
+  )
+  needsNewPage.subscribe($needsNewPage => {
+    if ($needsNewPage) {
       rows.actions.loadNextPage()
     }
   })

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

@@ -4,10 +4,10 @@ import { parseEventLocation } from "../lib/utils"
 const reorderInitialState = {
   sourceColumn: null,
   targetColumn: null,
+  insertAfter: false,
   breakpoints: [],
   gridLeft: 0,
   width: 0,
-  latestX: 0,
   increment: 0,
 }
 
@@ -28,38 +28,41 @@ export const createActions = context => {
   const {
     reorder,
     columns,
-    visibleColumns,
+    columnLookupMap,
+    scrollableColumns,
     scroll,
     bounds,
-    stickyColumn,
-    maxScrollLeft,
-    width,
+    visibleColumns,
     datasource,
+    stickyWidth,
+    width,
+    scrollLeft,
+    maxScrollLeft,
   } = context
-
+  let latestX = 0
   let autoScrollInterval
   let isAutoScrolling
 
   // Callback when dragging on a colum header and starting reordering
   const startReordering = (column, e) => {
-    const $visibleColumns = get(visibleColumns)
+    const $scrollableColumns = get(scrollableColumns)
     const $bounds = get(bounds)
-    const $stickyColumn = get(stickyColumn)
+    const $stickyWidth = get(stickyWidth)
 
     // Generate new breakpoints for the current columns
-    let breakpoints = $visibleColumns.map(col => ({
-      x: col.left + col.width,
+    const breakpoints = $scrollableColumns.map(col => ({
+      x: col.__left - $stickyWidth,
       column: col.name,
+      insertAfter: false,
     }))
-    if ($stickyColumn) {
-      breakpoints.unshift({
-        x: 0,
-        column: $stickyColumn.name,
-      })
-    } else if (!$visibleColumns[0].primaryDisplay) {
-      breakpoints.unshift({
-        x: 0,
-        column: null,
+
+    // Add a very left breakpoint as well
+    const lastCol = $scrollableColumns[$scrollableColumns.length - 1]
+    if (lastCol) {
+      breakpoints.push({
+        x: lastCol.__left + lastCol.width - $stickyWidth,
+        column: lastCol.name,
+        insertAfter: true,
       })
     }
 
@@ -87,24 +90,23 @@ export const createActions = context => {
   const onReorderMouseMove = e => {
     // Immediately handle the current position
     const { x } = parseEventLocation(e)
-    reorder.update(state => ({
-      ...state,
-      latestX: x,
-    }))
+    latestX = x
     considerReorderPosition()
 
     // Check if we need to start auto-scrolling
+    const $scrollLeft = get(scrollLeft)
+    const $maxScrollLeft = get(maxScrollLeft)
     const $reorder = get(reorder)
     const proximityCutoff = Math.min(140, get(width) / 6)
     const speedFactor = 16
     const rightProximity = Math.max(0, $reorder.gridLeft + $reorder.width - x)
     const leftProximity = Math.max(0, x - $reorder.gridLeft)
-    if (rightProximity < proximityCutoff) {
+    if (rightProximity < proximityCutoff && $scrollLeft < $maxScrollLeft) {
       const weight = proximityCutoff - rightProximity
       const increment = (weight / proximityCutoff) * speedFactor
       reorder.update(state => ({ ...state, increment }))
       startAutoScroll()
-    } else if (leftProximity < proximityCutoff) {
+    } else if (leftProximity < proximityCutoff && $scrollLeft > 0) {
       const weight = -1 * (proximityCutoff - leftProximity)
       const increment = (weight / proximityCutoff) * speedFactor
       reorder.update(state => ({ ...state, increment }))
@@ -117,23 +119,28 @@ export const createActions = context => {
   // Actual logic to consider the current position and determine the new order
   const considerReorderPosition = () => {
     const $reorder = get(reorder)
-    const $scroll = get(scroll)
+    const $scrollLeft = get(scrollLeft)
 
     // Compute the closest breakpoint to the current position
-    let targetColumn
+    let breakpoint
     let minDistance = Number.MAX_SAFE_INTEGER
-    const mouseX = $reorder.latestX - $reorder.gridLeft + $scroll.left
+    const mouseX = latestX - $reorder.gridLeft + $scrollLeft
     $reorder.breakpoints.forEach(point => {
       const distance = Math.abs(point.x - mouseX)
       if (distance < minDistance) {
         minDistance = distance
-        targetColumn = point.column
+        breakpoint = point
       }
     })
-    if (targetColumn !== $reorder.targetColumn) {
+    if (
+      breakpoint &&
+      (breakpoint.column !== $reorder.targetColumn ||
+        breakpoint.insertAfter !== $reorder.insertAfter)
+    ) {
       reorder.update(state => ({
         ...state,
-        targetColumn,
+        targetColumn: breakpoint.column,
+        insertAfter: breakpoint.insertAfter,
       }))
     }
   }
@@ -175,20 +182,29 @@ export const createActions = context => {
     document.removeEventListener("touchcancel", stopReordering)
 
     // Ensure there's actually a change before saving
-    const { sourceColumn, targetColumn } = get(reorder)
+    const { sourceColumn, targetColumn, insertAfter } = get(reorder)
     reorder.set(reorderInitialState)
     if (sourceColumn !== targetColumn) {
-      await moveColumn(sourceColumn, targetColumn)
+      await moveColumn({ sourceColumn, targetColumn, insertAfter })
     }
   }
 
   // Moves a column after another columns.
   // An undefined target column will move the source to index 0.
-  const moveColumn = async (sourceColumn, targetColumn) => {
-    let $columns = get(columns)
-    let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
-    let targetIdx = $columns.findIndex(x => x.name === targetColumn)
-    targetIdx++
+  const moveColumn = async ({
+    sourceColumn,
+    targetColumn,
+    insertAfter = false,
+  }) => {
+    // Find the indices in the overall columns array
+    const $columns = get(columns)
+    let sourceIdx = $columns.findIndex(col => col.name === sourceColumn)
+    let targetIdx = $columns.findIndex(col => col.name === targetColumn)
+    if (insertAfter) {
+      targetIdx++
+    }
+
+    // Reorder columns
     columns.update(state => {
       const removed = state.splice(sourceIdx, 1)
       if (--targetIdx < sourceIdx) {
@@ -209,18 +225,27 @@ export const createActions = context => {
   // Moves a column one place left (as appears visually)
   const moveColumnLeft = async column => {
     const $visibleColumns = get(visibleColumns)
-    const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
-    await moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
+    const $columnLookupMap = get(columnLookupMap)
+    const sourceIdx = $columnLookupMap[column].__idx
+    await moveColumn({
+      sourceColumn: column,
+      targetColumn: $visibleColumns[sourceIdx - 1]?.name,
+    })
   }
 
   // Moves a column one place right (as appears visually)
   const moveColumnRight = async column => {
     const $visibleColumns = get(visibleColumns)
-    const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
+    const $columnLookupMap = get(columnLookupMap)
+    const sourceIdx = $columnLookupMap[column].__idx
     if (sourceIdx === $visibleColumns.length - 1) {
       return
     }
-    await moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
+    await moveColumn({
+      sourceColumn: column,
+      targetColumn: $visibleColumns[sourceIdx + 1]?.name,
+      insertAfter: true,
+    })
   }
 
   return {

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

@@ -34,7 +34,7 @@ export const createActions = context => {
     // Set initial store state
     resize.set({
       width: column.width,
-      left: column.left,
+      left: column.__left,
       initialWidth: column.width,
       initialMouseX: x,
       column: column.name,