@budibase/frontend-core 2.29.21 → 2.29.23

package/src/components/grid/overlays/ReorderOverlay.svelte

@@ -1,37 +1,33 @@
 <script>
   import { getContext } from "svelte"
   import GridScrollWrapper from "../layout/GridScrollWrapper.svelte"
-  import { DefaultRowHeight, GutterWidth } from "../lib/constants"
+  import { DefaultRowHeight } from "../lib/constants"
 
   const {
     isReordering,
     reorder,
-    visibleColumns,
-    stickyColumn,
+    columnLookupMap,
     rowHeight,
     renderedRows,
     scrollLeft,
+    stickyWidth,
   } = getContext("grid")
 
-  $: targetColumn = $reorder.targetColumn
-  $: minLeft = GutterWidth + ($stickyColumn?.width || 0)
-  $: left = getLeft(targetColumn, $stickyColumn, $visibleColumns, $scrollLeft)
+  $: targetColumn = $columnLookupMap[$reorder.targetColumn]
+  $: insertAfter = $reorder.insertAfter
+  $: left = getLeft(targetColumn, insertAfter, $scrollLeft)
   $: height = $rowHeight * $renderedRows.length + DefaultRowHeight
   $: style = `left:${left}px; height:${height}px;`
-  $: visible = $isReordering && left >= minLeft
+  $: visible = $isReordering && left >= $stickyWidth
 
-  const getLeft = (targetColumn, stickyColumn, visibleColumns, scrollLeft) => {
-    let left = GutterWidth + (stickyColumn?.width || 0) - scrollLeft
-
-    // If this is not the sticky column, add additional left space
-    if (targetColumn !== stickyColumn?.name) {
-      const column = visibleColumns.find(x => x.name === targetColumn)
-      if (!column) {
-        return left
-      }
-      left += column.left + column.width
+  const getLeft = (targetColumn, insertAfter, scrollLeft) => {
+    if (!targetColumn) {
+      return 0
+    }
+    let left = targetColumn.__left - scrollLeft
+    if (insertAfter) {
+      left += targetColumn.width
     }
-
     return left
   }
 </script>

package/src/components/grid/overlays/ResizeOverlay.svelte

@@ -1,41 +1,28 @@
 <script>
   import { getContext } from "svelte"
-  import { GutterWidth } from "../lib/constants"
 
-  const { resize, visibleColumns, stickyColumn, isReordering, scrollLeft } =
+  const { resize, visibleColumns, isReordering, scrollLeft } =
     getContext("grid")
 
-  $: offset = GutterWidth + ($stickyColumn?.width || 0)
-  $: activeColumn = $resize.column
-
-  const getStyle = (column, offset, scrollLeft) => {
-    const left = offset + column.left + column.width - scrollLeft
+  const getStyle = (column, scrollLeft) => {
+    let left = column.__left + column.width
+    if (!column.primaryDisplay) {
+      left -= scrollLeft
+    }
     return `left:${left}px;`
   }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 {#if !$isReordering}
-  {#if $stickyColumn}
-    <div
-      class="resize-slider"
-      class:visible={activeColumn === $stickyColumn.name}
-      on:mousedown={e => resize.actions.startResizing($stickyColumn, e)}
-      on:touchstart={e => resize.actions.startResizing($stickyColumn, e)}
-      on:dblclick={() => resize.actions.resetSize($stickyColumn)}
-      style="left:{GutterWidth + $stickyColumn.width}px;"
-    >
-      <div class="resize-indicator" />
-    </div>
-  {/if}
   {#each $visibleColumns as column}
     <div
       class="resize-slider"
-      class:visible={activeColumn === column.name}
+      class:visible={$resize.column === column.name}
       on:mousedown={e => resize.actions.startResizing(column, e)}
       on:touchstart={e => resize.actions.startResizing(column, e)}
       on:dblclick={() => resize.actions.resetSize(column)}
-      style={getStyle(column, offset, $scrollLeft)}
+      style={getStyle(column, $scrollLeft)}
     >
       <div class="resize-indicator" />
     </div>

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

@@ -1,40 +1,237 @@
-import { writable, get } from "svelte/store"
+import { derived, writable, get } from "svelte/store"
 import { Helpers } from "@budibase/bbui"
+import { parseCellID, getCellID } from "../lib/utils"
+import { NewRowID } from "../lib/constants"
 
 export const createStores = () => {
-  const copiedCell = writable(null)
+  const clipboard = writable({
+    value: null,
+    multiCellCopy: false,
+  })
+  return {
+    clipboard,
+  }
+}
+
+export const deriveStores = context => {
+  const { clipboard, focusedCellAPI, selectedCellCount, config, focusedRowId } =
+    context
+
+  // Derive whether or not we're able to copy
+  const copyAllowed = derived(focusedCellAPI, $focusedCellAPI => {
+    return $focusedCellAPI != null
+  })
+
+  // Derive whether or not we're able to paste
+  const pasteAllowed = derived(
+    [clipboard, focusedCellAPI, selectedCellCount, config, focusedRowId],
+    ([
+      $clipboard,
+      $focusedCellAPI,
+      $selectedCellCount,
+      $config,
+      $focusedRowId,
+    ]) => {
+      if (
+        $clipboard.value == null ||
+        !$config.canEditRows ||
+        !$focusedCellAPI ||
+        $focusedRowId === NewRowID
+      ) {
+        return false
+      }
+
+      // Prevent single-single pasting if the cell is readonly
+      const multiCellPaste = $selectedCellCount > 1
+      if (
+        !$clipboard.multiCellCopy &&
+        !multiCellPaste &&
+        $focusedCellAPI.isReadonly()
+      ) {
+        return false
+      }
+      return true
+    }
+  )
 
   return {
-    copiedCell,
+    copyAllowed,
+    pasteAllowed,
   }
 }
 
 export const createActions = context => {
-  const { copiedCell, focusedCellAPI } = context
+  const {
+    clipboard,
+    focusedCellAPI,
+    copyAllowed,
+    pasteAllowed,
+    selectedCells,
+    selectedCellCount,
+    rowLookupMap,
+    rowChangeCache,
+    rows,
+    focusedCellId,
+    columnLookupMap,
+    visibleColumns,
+  } = context
 
+  // Copies the currently selected value (or values)
   const copy = () => {
-    const value = get(focusedCellAPI)?.getValue()
-    copiedCell.set(value)
-
-    // Also copy a stringified version to the clipboard
-    let stringified = ""
-    if (value != null && value !== "") {
-      // Only conditionally stringify to avoid redundant quotes around text
-      stringified = typeof value === "object" ? JSON.stringify(value) : value
+    if (!get(copyAllowed)) {
+      return
+    }
+    const $selectedCells = get(selectedCells)
+    const $focusedCellAPI = get(focusedCellAPI)
+    const $selectedCellCount = get(selectedCellCount)
+    const multiCellCopy = $selectedCellCount > 1
+
+    // Multiple values to copy
+    if (multiCellCopy) {
+      const $rowLookupMap = get(rowLookupMap)
+      const $rowChangeCache = get(rowChangeCache)
+
+      // Extract value of each selected cell, accounting for the change cache
+      let value = []
+      for (let row of $selectedCells) {
+        const rowValues = []
+        for (let cellId of row) {
+          const { rowId, field } = parseCellID(cellId)
+          const row = {
+            ...$rowLookupMap[rowId],
+            ...$rowChangeCache[rowId],
+          }
+          rowValues.push(row[field])
+        }
+        value.push(rowValues)
+      }
+
+      // Update state
+      clipboard.set({
+        value,
+        multiCellCopy: true,
+      })
+    } else {
+      // Single value to copy
+      const value = $focusedCellAPI.getValue()
+      clipboard.set({
+        value,
+        multiCellCopy,
+      })
+
+      // Also copy a stringified version to the clipboard
+      let stringified = ""
+      if (value != null && value !== "") {
+        // Only conditionally stringify to avoid redundant quotes around text
+        stringified = typeof value === "object" ? JSON.stringify(value) : value
+      }
+      Helpers.copyToClipboard(stringified)
     }
-    Helpers.copyToClipboard(stringified)
   }
 
-  const paste = () => {
-    const $copiedCell = get(copiedCell)
-    const $focusedCellAPI = get(focusedCellAPI)
-    if ($copiedCell != null && $focusedCellAPI) {
-      $focusedCellAPI.setValue($copiedCell)
+  // Pastes the previously copied value(s) into the selected cell(s)
+  const paste = async progressCallback => {
+    if (!get(pasteAllowed)) {
+      return
+    }
+    const { value, multiCellCopy } = get(clipboard)
+    const multiCellPaste = get(selectedCellCount) > 1
+
+    // Choose paste strategy
+    if (multiCellCopy) {
+      if (multiCellPaste) {
+        // Multi to multi - try pasting into all selected cells
+        let newValue = value
+
+        // If we are pasting into more rows than we copied, but the number of
+        // columns match, then repeat the copied values as required
+        const $selectedCells = get(selectedCells)
+        const selectedRows = $selectedCells.length
+        const selectedColumns = $selectedCells[0].length
+        const copiedRows = value.length
+        const copiedColumns = value[0].length
+        if (selectedRows > copiedRows && selectedColumns === copiedColumns) {
+          newValue = []
+          for (let i = 0; i < selectedRows; i++) {
+            newValue.push(value[i % copiedRows])
+          }
+        }
+
+        // Paste the new value
+        await pasteIntoSelectedCells(newValue, progressCallback)
+      } else {
+        // Multi to single - expand to paste all values
+        // Get indices of focused cell
+        const $focusedCellId = get(focusedCellId)
+        const { rowId, field } = parseCellID($focusedCellId)
+        const $rowLookupMap = get(rowLookupMap)
+        const $columnLookupMap = get(columnLookupMap)
+        const rowIdx = $rowLookupMap[rowId].__idx
+        const colIdx = $columnLookupMap[field].__idx
+
+        // Get limits of how many rows and columns we're able to paste into
+        const $rows = get(rows)
+        const $visibleColumns = get(visibleColumns)
+        const colCount = $visibleColumns.length
+        const rowCount = $rows.length
+        const selectedRows = value.length
+        const selectedColumns = value[0].length
+        const rowExtent = Math.min(selectedRows, rowCount - rowIdx) - 1
+        const colExtent = Math.min(selectedColumns, colCount - colIdx) - 1
+
+        // Get the target cell ID (bottom right of our pastable extent)
+        const targetRowId = $rows[rowIdx + rowExtent]._id
+        const targetColName = $visibleColumns[colIdx + colExtent].name
+        const targetCellId = getCellID(targetRowId, targetColName)
+
+        // Paste into target cell range
+        if (targetCellId === $focusedCellId) {
+          // Single cell edge case
+          get(focusedCellAPI).setValue(value[0][0])
+        } else {
+          // Select the new cells to paste into, then paste
+          selectedCells.actions.selectRange($focusedCellId, targetCellId)
+          await pasteIntoSelectedCells(value, progressCallback)
+        }
+      }
+    } else {
+      if (multiCellPaste) {
+        // Single to multi - duplicate value to all selected cells
+        const newValue = get(selectedCells).map(row => row.map(() => value))
+        await pasteIntoSelectedCells(newValue, progressCallback)
+      } else {
+        // Single to single - just update the cell's value
+        get(focusedCellAPI).setValue(value)
+      }
+    }
+  }
+
+  // Paste the specified value into the currently selected cells
+  const pasteIntoSelectedCells = async (value, progressCallback) => {
+    const $selectedCells = get(selectedCells)
+
+    // Find the extent at which we can paste
+    const rowExtent = Math.min(value.length, $selectedCells.length)
+    const colExtent = Math.min(value[0].length, $selectedCells[0].length)
+
+    // Build change map
+    let changeMap = {}
+    for (let rowIdx = 0; rowIdx < rowExtent; rowIdx++) {
+      for (let colIdx = 0; colIdx < colExtent; colIdx++) {
+        const cellId = $selectedCells[rowIdx][colIdx]
+        const { rowId, field } = parseCellID(cellId)
+        if (!changeMap[rowId]) {
+          changeMap[rowId] = {}
+        }
+        changeMap[rowId][field] = value[rowIdx][colIdx]
+      }
     }
+    await rows.actions.bulkUpdate(changeMap, progressCallback)
   }
 
   return {
     clipboard: {
+      ...clipboard,
       actions: {
         copy,
         paste,

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

@@ -1,74 +1,73 @@
 import { derived, get, writable } from "svelte/store"
-import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
+import { DefaultColumnWidth, GutterWidth } from "../lib/constants"
 
 export const createStores = () => {
   const columns = writable([])
-  const stickyColumn = writable(null)
-
-  // Derive an enriched version of columns with left offsets and indexes
-  // automatically calculated
-  const enrichedColumns = derived(
-    columns,
-    $columns => {
-      let offset = 0
-      return $columns.map(column => {
-        const enriched = {
-          ...column,
-          left: offset,
-        }
-        if (column.visible) {
-          offset += column.width
-        }
-        return enriched
-      })
-    },
-    []
-  )
 
-  // Derived list of columns which have not been explicitly hidden
-  const visibleColumns = derived(
-    enrichedColumns,
-    $columns => {
-      return $columns.filter(col => col.visible)
-    },
-    []
-  )
+  // Enrich columns with metadata about their display position
+  const enrichedColumns = derived(columns, $columns => {
+    let offset = GutterWidth
+    let idx = 0
+    return $columns.map(col => {
+      const enriched = {
+        ...col,
+        __idx: idx,
+        __left: offset,
+      }
+      if (col.visible) {
+        idx++
+        offset += col.width
+      }
+      return enriched
+    })
+  })
 
   return {
     columns: {
       ...columns,
       subscribe: enrichedColumns.subscribe,
     },
-    stickyColumn,
-    visibleColumns,
   }
 }
 
 export const deriveStores = context => {
-  const { columns, stickyColumn } = context
-
-  // Quick access to all columns
-  const allColumns = derived(
-    [columns, stickyColumn],
-    ([$columns, $stickyColumn]) => {
-      let allCols = $columns || []
-      if ($stickyColumn) {
-        allCols = [...allCols, $stickyColumn]
-      }
-      return allCols
-    }
-  )
+  const { columns } = context
+
+  // Derive a lookup map for all columns by name
+  const columnLookupMap = derived(columns, $columns => {
+    let map = {}
+    $columns.forEach(column => {
+      map[column.name] = column
+    })
+    return map
+  })
+
+  // Derived list of columns which have not been explicitly hidden
+  const visibleColumns = derived(columns, $columns => {
+    return $columns.filter(col => col.visible)
+  })
+
+  // Split visible columns into their discrete types
+  const displayColumn = derived(visibleColumns, $visibleColumns => {
+    return $visibleColumns.find(col => col.primaryDisplay)
+  })
+  const scrollableColumns = derived(visibleColumns, $visibleColumns => {
+    return $visibleColumns.filter(col => !col.primaryDisplay)
+  })
 
   // Derive if we have any normal columns
-  const hasNonAutoColumn = derived(allColumns, $allColumns => {
-    const normalCols = $allColumns.filter(column => {
+  const hasNonAutoColumn = derived(columns, $columns => {
+    const normalCols = $columns.filter(column => {
       return !column.schema?.autocolumn
     })
     return normalCols.length > 0
   })
 
   return {
-    allColumns,
+    displayColumn,
+    columnLookupMap,
+    visibleColumns,
+    scrollableColumns,
     hasNonAutoColumn,
   }
 }
@@ -87,60 +86,57 @@ export const createActions = context => {
     await datasource.actions.saveSchemaMutations()
   }
 
+  // Checks if a column is readonly
+  const isReadonly = column => {
+    if (!column?.schema) {
+      return false
+    }
+    return (
+      column.schema.autocolumn ||
+      column.schema.disabled ||
+      column.schema.type === "formula" ||
+      column.schema.readonly
+    )
+  }
+
   return {
     columns: {
       ...columns,
       actions: {
         changeAllColumnWidths,
+        isReadonly,
       },
     },
   }
 }
 
 export const initialise = context => {
-  const {
-    definition,
-    columns,
-    stickyColumn,
-    allColumns,
-    enrichedSchema,
-    compact,
-  } = context
+  const { definition, columns, displayColumn, enrichedSchema } = context
 
   // Merge new schema fields with existing schema in order to preserve widths
   const processColumns = $enrichedSchema => {
     if (!$enrichedSchema) {
       columns.set([])
-      stickyColumn.set(null)
       return
     }
     const $definition = get(definition)
-    const $allColumns = get(allColumns)
-    const $stickyColumn = get(stickyColumn)
-    const $compact = get(compact)
+    const $columns = get(columns)
+    const $displayColumn = get(displayColumn)
 
     // Find primary display
     let primaryDisplay
-    const candidatePD = $definition.primaryDisplay || $stickyColumn?.name
+    const candidatePD = $definition.primaryDisplay || $displayColumn?.name
     if (candidatePD && $enrichedSchema[candidatePD]) {
       primaryDisplay = candidatePD
     }
 
-    // Get field list
-    let fields = []
-    Object.keys($enrichedSchema).forEach(field => {
-      if ($compact || field !== primaryDisplay) {
-        fields.push(field)
-      }
-    })
-
     // Update columns, removing extraneous columns and adding missing ones
     columns.set(
-      fields
+      Object.keys($enrichedSchema)
         .map(field => {
           const fieldSchema = $enrichedSchema[field]
-          const oldColumn = $allColumns?.find(x => x.name === field)
-          return {
+          const oldColumn = $columns?.find(col => col.name === field)
+          let column = {
             name: field,
             label: fieldSchema.displayName || field,
             schema: fieldSchema,
@@ -148,19 +144,25 @@ export const initialise = context => {
             visible: fieldSchema.visible ?? true,
             readonly: fieldSchema.readonly,
             order: fieldSchema.order ?? oldColumn?.order,
-            primaryDisplay: field === primaryDisplay,
+            conditions: fieldSchema.conditions,
           }
+          // Override a few properties for primary display
+          if (field === primaryDisplay) {
+            column.visible = true
+            column.order = 0
+            column.primaryDisplay = true
+          }
+          return column
         })
         .sort((a, b) => {
-          // If we don't have a pinned column then primary display will be in
-          // the normal columns list, and should be first
+          // Display column should always come first
           if (a.name === primaryDisplay) {
             return -1
           } else if (b.name === primaryDisplay) {
             return 1
           }
 
-          // Sort by order first
+          // Then sort by order
           const orderA = a.order
           const orderB = b.order
           if (orderA != null && orderB != null) {
@@ -180,29 +182,8 @@ export const initialise = context => {
           return autoColA ? 1 : -1
         })
     )
-
-    // Update sticky column
-    if ($compact || !primaryDisplay) {
-      stickyColumn.set(null)
-      return
-    }
-    const stickySchema = $enrichedSchema[primaryDisplay]
-    const oldStickyColumn = $allColumns?.find(x => x.name === primaryDisplay)
-    stickyColumn.set({
-      name: primaryDisplay,
-      label: stickySchema.displayName || primaryDisplay,
-      schema: stickySchema,
-      width: stickySchema.width || oldStickyColumn?.width || DefaultColumnWidth,
-      visible: true,
-      order: 0,
-      left: GutterWidth,
-      primaryDisplay: true,
-    })
   }
 
   // Process columns when schema changes
   enrichedSchema.subscribe(processColumns)
-
-  // Process columns when compact flag changes
-  compact.subscribe(() => processColumns(get(enrichedSchema)))
 }