@budibase/frontend-core 2.29.21 → 2.29.23

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

@@ -2,12 +2,11 @@ import { writable, get, derived } from "svelte/store"
 import { tick } from "svelte"
 import {
   DefaultRowHeight,
-  GutterWidth,
   LargeRowHeight,
   MediumRowHeight,
   NewRowID,
 } from "../lib/constants"
-import { parseCellID } from "../lib/utils"
+import { getCellID, parseCellID } from "../lib/utils"
 
 export const createStores = context => {
   const { props } = context
@@ -22,34 +21,15 @@ export const createStores = context => {
   const keyboardBlocked = writable(false)
   const isDragging = writable(false)
   const buttonColumnWidth = writable(0)
-
-  // Derive the current focused row ID
-  const focusedRowId = derived(
-    focusedCellId,
-    $focusedCellId => {
-      return parseCellID($focusedCellId)?.id
-    },
-    null
-  )
-
-  // Toggles whether a certain row ID is selected or not
-  const toggleSelectedRow = id => {
-    selectedRows.update(state => {
-      let newState = {
-        ...state,
-        [id]: !state[id],
-      }
-      if (!newState[id]) {
-        delete newState[id]
-      }
-      return newState
-    })
-  }
+  const cellSelection = writable({
+    active: false,
+    sourceCellId: null,
+    targetCellId: null,
+  })
 
   return {
     focusedCellId,
     focusedCellAPI,
-    focusedRowId,
     previousFocusedRowId,
     previousFocusedCellId,
     hoveredRowId,
@@ -58,35 +38,38 @@ export const createStores = context => {
     keyboardBlocked,
     isDragging,
     buttonColumnWidth,
-    selectedRows: {
-      ...selectedRows,
-      actions: {
-        toggleRow: toggleSelectedRow,
-      },
-    },
+    selectedRows,
+    cellSelection,
   }
 }
 
 export const deriveStores = context => {
-  const { focusedCellId, rows, rowLookupMap, rowHeight, stickyColumn, width } =
-    context
+  const {
+    focusedCellId,
+    rows,
+    rowLookupMap,
+    rowHeight,
+    width,
+    selectedRows,
+    cellSelection,
+    columnLookupMap,
+    visibleColumns,
+  } = context
+
+  // Derive the current focused row ID
+  const focusedRowId = derived(focusedCellId, $focusedCellId => {
+    return parseCellID($focusedCellId).rowId
+  })
 
   // Derive the row that contains the selected cell
   const focusedRow = derived(
-    [focusedCellId, rowLookupMap, rows],
-    ([$focusedCellId, $rowLookupMap, $rows]) => {
-      const rowId = parseCellID($focusedCellId)?.id
-
-      // Edge case for new rows
-      if (rowId === NewRowID) {
+    [focusedRowId, rowLookupMap],
+    ([$focusedRowId, $rowLookupMap]) => {
+      if ($focusedRowId === NewRowID) {
         return { _id: NewRowID }
       }
-
-      // All normal rows
-      const index = $rowLookupMap[rowId]
-      return $rows[index]
-    },
-    null
+      return $rowLookupMap[$focusedRowId]
+    }
   )
 
   // Derive the amount of content lines to show in cells depending on row height
@@ -100,24 +83,200 @@ export const deriveStores = context => {
   })
 
   // Derive whether we should use the compact UI, depending on width
-  const compact = derived([stickyColumn, width], ([$stickyColumn, $width]) => {
-    return ($stickyColumn?.width || 0) + $width + GutterWidth < 800
+  const compact = derived(width, $width => {
+    return $width < 600
+  })
+
+  // Derive we have any selected rows or not
+  const selectedRowCount = derived(selectedRows, $selectedRows => {
+    return Object.keys($selectedRows).length
+  })
+
+  // Derive whether or not we're actively selecting cells
+  const isSelectingCells = derived(cellSelection, $cellSelection => {
+    return $cellSelection.active
+  })
+
+  // Derive the full extent of all selected cells
+  const selectedCells = derived(
+    [cellSelection, rowLookupMap, columnLookupMap],
+    ([$cellSelection, $rowLookupMap, $columnLookupMap]) => {
+      const { sourceCellId, targetCellId } = $cellSelection
+      if (!sourceCellId || !targetCellId || sourceCellId === targetCellId) {
+        return []
+      }
+      const $rows = get(rows)
+      const $visibleColumns = get(visibleColumns)
+
+      // Get source and target row and column indices
+      const sourceInfo = parseCellID(sourceCellId)
+      const targetInfo = parseCellID(targetCellId)
+      if (sourceInfo.rowId === NewRowID) {
+        return []
+      }
+
+      // Row indices
+      const sourceRowIndex = $rowLookupMap[sourceInfo.rowId]?.__idx
+      const targetRowIndex = $rowLookupMap[targetInfo.rowId]?.__idx
+      if (sourceRowIndex == null || targetRowIndex == null) {
+        return []
+      }
+      const lowerRowIndex = Math.min(sourceRowIndex, targetRowIndex)
+      let upperRowIndex = Math.max(sourceRowIndex, targetRowIndex)
+
+      // Cap rows at 50
+      upperRowIndex = Math.min(upperRowIndex, lowerRowIndex + 49)
+
+      // Column indices
+      const sourceColIndex = $columnLookupMap[sourceInfo.field].__idx
+      const targetColIndex = $columnLookupMap[targetInfo.field].__idx
+      const lowerColIndex = Math.min(sourceColIndex, targetColIndex)
+      const upperColIndex = Math.max(sourceColIndex, targetColIndex)
+
+      // Build 2 dimensional array of all cells inside these bounds
+      let cells = []
+      let rowId, colName
+      for (let rowIdx = lowerRowIndex; rowIdx <= upperRowIndex; rowIdx++) {
+        let rowCells = []
+        for (let colIdx = lowerColIndex; colIdx <= upperColIndex; colIdx++) {
+          rowId = $rows[rowIdx]._id
+          colName = $visibleColumns[colIdx].name
+          rowCells.push(getCellID(rowId, colName))
+        }
+        cells.push(rowCells)
+      }
+      return cells
+    }
+  )
+
+  // Derive a quick lookup map of the selected cells
+  const selectedCellMap = derived(selectedCells, $selectedCells => {
+    let map = {}
+    for (let row of $selectedCells) {
+      for (let cell of row) {
+        map[cell] = true
+      }
+    }
+    return map
+  })
+
+  // Derive the count of the selected cells
+  const selectedCellCount = derived(selectedCellMap, $selectedCellMap => {
+    return Object.keys($selectedCellMap).length
   })
 
   return {
+    focusedRowId,
     focusedRow,
     contentLines,
     compact,
+    selectedRowCount,
+    isSelectingCells,
+    selectedCells,
+    selectedCellMap,
+    selectedCellCount,
   }
 }
 
 export const createActions = context => {
-  const { focusedCellId, hoveredRowId } = context
+  const {
+    focusedCellId,
+    hoveredRowId,
+    selectedRows,
+    rowLookupMap,
+    rows,
+    selectedRowCount,
+    cellSelection,
+    selectedCells,
+  } = context
+  // Keep the last selected index to use with bulk selection
+  let lastSelectedIndex = null
 
   // Callback when leaving the grid, deselecting all focussed or selected items
   const blur = () => {
     focusedCellId.set(null)
     hoveredRowId.set(null)
+    clearCellSelection()
+  }
+
+  // Toggles whether a certain row ID is selected or not
+  const toggleSelectedRow = id => {
+    selectedRows.update(state => {
+      let newState = {
+        ...state,
+        [id]: !state[id],
+      }
+      if (!newState[id]) {
+        delete newState[id]
+      } else {
+        lastSelectedIndex = get(rowLookupMap)[id].__idx
+      }
+      return newState
+    })
+  }
+
+  const bulkSelectRows = id => {
+    if (!get(selectedRowCount)) {
+      toggleSelectedRow(id)
+      return
+    }
+    if (lastSelectedIndex == null) {
+      return
+    }
+    const thisIndex = get(rowLookupMap)[id].__idx
+
+    // Skip if indices are the same
+    if (lastSelectedIndex === thisIndex) {
+      return
+    }
+
+    const from = Math.min(lastSelectedIndex, thisIndex)
+    const to = Math.max(lastSelectedIndex, thisIndex)
+    const $rows = get(rows)
+    selectedRows.update(state => {
+      for (let i = from; i <= to; i++) {
+        state[$rows[i]._id] = true
+      }
+      return state
+    })
+  }
+
+  const startCellSelection = sourceCellId => {
+    cellSelection.set({
+      active: true,
+      sourceCellId,
+      targetCellId: sourceCellId,
+    })
+  }
+
+  const updateCellSelection = targetCellId => {
+    cellSelection.update(state => ({
+      ...state,
+      targetCellId,
+    }))
+  }
+
+  const stopCellSelection = () => {
+    cellSelection.update(state => ({
+      ...state,
+      active: false,
+    }))
+  }
+
+  const selectCellRange = (source, target) => {
+    cellSelection.set({
+      active: false,
+      sourceCellId: source,
+      targetCellId: target,
+    })
+  }
+
+  const clearCellSelection = () => {
+    cellSelection.set({
+      active: false,
+      sourceCellId: null,
+      targetCellId: null,
+    })
   }
 
   return {
@@ -126,6 +285,23 @@ export const createActions = context => {
         blur,
       },
     },
+    selectedRows: {
+      ...selectedRows,
+      actions: {
+        toggleRow: toggleSelectedRow,
+        bulkSelectRows,
+      },
+    },
+    selectedCells: {
+      ...selectedCells,
+      actions: {
+        startSelecting: startCellSelection,
+        updateTarget: updateCellSelection,
+        stopSelecting: stopCellSelection,
+        selectRange: selectCellRange,
+        clear: clearCellSelection,
+      },
+    },
   }
 }
 
@@ -134,28 +310,32 @@ export const initialise = context => {
     focusedRowId,
     previousFocusedRowId,
     previousFocusedCellId,
-    rows,
+    rowLookupMap,
     focusedCellId,
     selectedRows,
     hoveredRowId,
     definition,
     rowHeight,
     fixedRowHeight,
+    selectedRowCount,
+    menu,
+    selectedCellCount,
+    selectedCells,
+    cellSelection,
   } = context
 
   // Ensure we clear invalid rows from state if they disappear
-  rows.subscribe(async () => {
+  rowLookupMap.subscribe(async $rowLookupMap => {
     // We tick here to ensure other derived stores have properly updated.
     // We depend on the row lookup map which is a derived store,
     await tick()
-    const $focusedCellId = get(focusedCellId)
+    const $focusedRowId = get(focusedRowId)
     const $selectedRows = get(selectedRows)
     const $hoveredRowId = get(hoveredRowId)
-    const hasRow = rows.actions.hasRow
+    const hasRow = id => $rowLookupMap[id] != null
 
-    // Check selected cell
-    const selectedRowId = parseCellID($focusedCellId)?.id
-    if (selectedRowId && !hasRow(selectedRowId)) {
+    // Check focused cell
+    if ($focusedRowId && !hasRow($focusedRowId)) {
       focusedCellId.set(null)
     }
 
@@ -165,17 +345,19 @@ export const initialise = context => {
     }
 
     // Check selected rows
-    let newSelectedRows = { ...$selectedRows }
-    let selectedRowsNeedsUpdate = false
     const selectedIds = Object.keys($selectedRows)
-    for (let i = 0; i < selectedIds.length; i++) {
-      if (!hasRow(selectedIds[i])) {
-        delete newSelectedRows[selectedIds[i]]
-        selectedRowsNeedsUpdate = true
+    if (selectedIds.length) {
+      let newSelectedRows = { ...$selectedRows }
+      let selectedRowsNeedsUpdate = false
+      for (let i = 0; i < selectedIds.length; i++) {
+        if (!hasRow(selectedIds[i])) {
+          delete newSelectedRows[selectedIds[i]]
+          selectedRowsNeedsUpdate = true
+        }
+      }
+      if (selectedRowsNeedsUpdate) {
+        selectedRows.set(newSelectedRows)
       }
-    }
-    if (selectedRowsNeedsUpdate) {
-      selectedRows.set(newSelectedRows)
     }
   })
 
@@ -186,18 +368,29 @@ export const initialise = context => {
     lastFocusedRowId = id
   })
 
-  // Remember the last focused cell ID so that we can store the previous one
   let lastFocusedCellId = null
   focusedCellId.subscribe(id => {
+    // Remember the last focused cell ID so that we can store the previous one
     previousFocusedCellId.set(lastFocusedCellId)
     lastFocusedCellId = id
-  })
 
-  // Remove hovered row when a cell is selected
-  focusedCellId.subscribe(cell => {
-    if (cell && get(hoveredRowId)) {
+    // Remove hovered row when a cell is selected
+    if (id && get(hoveredRowId)) {
       hoveredRowId.set(null)
     }
+
+    // Clear row selection when focusing a cell
+    if (id && get(selectedRowCount)) {
+      selectedRows.set({})
+    }
+
+    // Clear cell selection when focusing a cell
+    if (id && get(selectedCellCount)) {
+      selectedCells.actions.clear()
+    }
+
+    // Close the menu if it was open
+    menu.actions.close()
   })
 
   // Pull row height from table as long as we don't have a fixed height
@@ -215,4 +408,36 @@ export const initialise = context => {
       rowHeight.set(get(definition)?.rowHeight || DefaultRowHeight)
     }
   })
+
+  // Clear focused cell when selecting rows
+  selectedRowCount.subscribe(count => {
+    if (count) {
+      if (get(focusedCellId)) {
+        focusedCellId.set(null)
+      }
+      if (get(selectedCellCount)) {
+        selectedCells.actions.clear()
+      }
+    }
+  })
+
+  // Clear state when selecting cells
+  selectedCellCount.subscribe($selectedCellCount => {
+    if ($selectedCellCount) {
+      if (get(selectedRowCount)) {
+        selectedRows.set({})
+      }
+    }
+  })
+
+  // Ensure the source of cell selection is focused
+  cellSelection.subscribe(async ({ sourceCellId, targetCellId }) => {
+    if (
+      sourceCellId &&
+      sourceCellId !== targetCellId &&
+      get(focusedCellId) !== sourceCellId
+    ) {
+      focusedCellId.set(sourceCellId)
+    }
+  })
 }

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

@@ -25,7 +25,7 @@ export const deriveStores = context => {
 
   // Generate a lookup map of cell ID to the user that has it selected, to make
   // lookups inside cells extremely fast
-  const selectedCellMap = derived(
+  const userCellMap = derived(
     [users, focusedCellId],
     ([$users, $focusedCellId]) => {
       let map = {}
@@ -40,7 +40,7 @@ export const deriveStores = context => {
   )
 
   return {
-    selectedCellMap,
+    userCellMap,
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { writable, get, derived } from "svelte/store"
-import { getCellID, parseCellID } from "../lib/utils"
+import { parseCellID } from "../lib/utils"
 
 // Normally we would break out actions into the explicit "createActions"
 // function, but for validation all these actions are pure so can go into
@@ -7,18 +7,38 @@ import { getCellID, parseCellID } from "../lib/utils"
 export const createStores = () => {
   const validation = writable({})
 
+  return {
+    validation,
+  }
+}
+
+export const deriveStores = context => {
+  const { validation } = context
+
   // Derive which rows have errors so that we can use that info later
-  const rowErrorMap = derived(validation, $validation => {
+  const validationRowLookupMap = derived(validation, $validation => {
     let map = {}
     Object.entries($validation).forEach(([key, error]) => {
       // Extract row ID from all errored cell IDs
       if (error) {
-        map[parseCellID(key).id] = true
+        const { rowId } = parseCellID(key)
+        if (!map[rowId]) {
+          map[rowId] = []
+        }
+        map[rowId].push(key)
       }
     })
     return map
   })
 
+  return {
+    validationRowLookupMap,
+  }
+}
+
+export const createActions = context => {
+  const { validation, focusedCellId, validationRowLookupMap } = context
+
   const setError = (cellId, error) => {
     if (!cellId) {
       return
@@ -30,7 +50,15 @@ export const createStores = () => {
   }
 
   const rowHasErrors = rowId => {
-    return get(rowErrorMap)[rowId]
+    return get(validationRowLookupMap)[rowId]?.length > 0
+  }
+
+  const focusFirstRowError = rowId => {
+    const errorCells = get(validationRowLookupMap)[rowId]
+    const cellId = errorCells?.[0]
+    if (cellId) {
+      focusedCellId.set(cellId)
+    }
   }
 
   return {
@@ -39,28 +67,27 @@ export const createStores = () => {
       actions: {
         setError,
         rowHasErrors,
+        focusFirstRowError,
       },
     },
   }
 }
 
 export const initialise = context => {
-  const { validation, previousFocusedRowId, columns, stickyColumn } = context
+  const { validation, previousFocusedRowId, validationRowLookupMap } = context
 
-  // Remove validation errors from previous focused row
+  // Remove validation errors when changing rows
   previousFocusedRowId.subscribe(id => {
     if (id) {
-      const $columns = get(columns)
-      const $stickyColumn = get(stickyColumn)
-      validation.update(state => {
-        $columns.forEach(column => {
-          state[getCellID(id, column.name)] = null
+      const errorCells = get(validationRowLookupMap)[id]
+      if (errorCells?.length) {
+        validation.update(state => {
+          for (let cellId of errorCells) {
+            delete state[cellId]
+          }
+          return state
         })
-        if ($stickyColumn) {
-          state[getCellID(id, stickyColumn.name)] = null
-        }
-        return state
-      })
+      }
     }
   })
 }

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

@@ -4,12 +4,14 @@ import { MinColumnWidth } from "../lib/constants"
 export const deriveStores = context => {
   const {
     rowHeight,
-    visibleColumns,
+    scrollableColumns,
     rows,
     scrollTop,
     scrollLeft,
     width,
     height,
+    rowChangeCache,
+    metadata,
   } = context
 
   // Derive visible rows
@@ -19,25 +21,31 @@ export const deriveStores = context => {
     [scrollTop, rowHeight],
     ([$scrollTop, $rowHeight]) => {
       return Math.floor($scrollTop / $rowHeight)
-    },
-    0
+    }
   )
   const visualRowCapacity = derived(
     [height, rowHeight],
     ([$height, $rowHeight]) => {
       return Math.ceil($height / $rowHeight) + 1
-    },
-    0
+    }
   )
   const renderedRows = derived(
-    [rows, scrolledRowCount, visualRowCapacity],
-    ([$rows, $scrolledRowCount, $visualRowCapacity]) => {
-      return $rows.slice(
-        $scrolledRowCount,
-        $scrolledRowCount + $visualRowCapacity
-      )
-    },
-    []
+    [rows, scrolledRowCount, visualRowCapacity, rowChangeCache, metadata],
+    ([
+      $rows,
+      $scrolledRowCount,
+      $visualRowCapacity,
+      $rowChangeCache,
+      $metadata,
+    ]) => {
+      return $rows
+        .slice($scrolledRowCount, $scrolledRowCount + $visualRowCapacity)
+        .map(row => ({
+          ...row,
+          ...$rowChangeCache[row._id],
+          __metadata: $metadata[row._id],
+        }))
+    }
   )
 
   // Derive visible columns
@@ -46,33 +54,31 @@ export const deriveStores = context => {
     return Math.round($scrollLeft / interval) * interval
   })
   const columnRenderMap = derived(
-    [visibleColumns, scrollLeftRounded, width],
-    ([$visibleColumns, $scrollLeft, $width]) => {
-      if (!$visibleColumns.length) {
+    [scrollableColumns, scrollLeftRounded, width],
+    ([$scrollableColumns, $scrollLeft, $width]) => {
+      if (!$scrollableColumns.length) {
         return {}
       }
       let startColIdx = 0
-      let rightEdge = $visibleColumns[0].width
+      let rightEdge = $scrollableColumns[0].width
       while (
         rightEdge < $scrollLeft &&
-        startColIdx < $visibleColumns.length - 1
+        startColIdx < $scrollableColumns.length - 1
       ) {
         startColIdx++
-        rightEdge += $visibleColumns[startColIdx].width
+        rightEdge += $scrollableColumns[startColIdx].width
       }
       let endColIdx = startColIdx + 1
       let leftEdge = rightEdge
       while (
         leftEdge < $width + $scrollLeft &&
-        endColIdx < $visibleColumns.length
+        endColIdx < $scrollableColumns.length
       ) {
-        leftEdge += $visibleColumns[endColIdx].width
+        leftEdge += $scrollableColumns[endColIdx].width
         endColIdx++
       }
-
-      // Only update the store if different
       let next = {}
-      $visibleColumns
+      $scrollableColumns
         .slice(Math.max(0, startColIdx), endColIdx)
         .forEach(col => {
           next[col.name] = true

package/src/components/index.js

@@ -8,3 +8,4 @@ export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
 export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
 export { default as FilterBuilder } from "./FilterBuilder.svelte"
+export { default as FilterUsers } from "./FilterUsers.svelte"