@budibase/frontend-core 2.29.21 → 2.29.23

package/package.json

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

package/src/components/FilterBuilder.svelte

@@ -36,11 +36,7 @@
       ) &&
       !schemaFields.some(field => field.name === "_id")
     ) {
-      schemaFields = [
-        ...schemaFields,
-        { name: "_id", type: "string" },
-        { name: "_rev", type: "string" },
-      ]
+      schemaFields = [...schemaFields, { name: "_id", type: "string" }]
     }
   }
 

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

@@ -4,12 +4,21 @@
   import { getCellRenderer } from "../lib/renderers"
   import { derived, writable } from "svelte/store"
 
-  const { rows, focusedCellId, focusedCellAPI, menu, config, validation } =
-    getContext("grid")
+  const {
+    rows,
+    columns,
+    focusedCellId,
+    focusedCellAPI,
+    menu,
+    config,
+    validation,
+    selectedCells,
+    selectedCellCount,
+  } = getContext("grid")
 
   export let highlighted
-  export let selected
   export let rowFocused
+  export let rowSelected
   export let rowIdx
   export let topRow = false
   export let focused
@@ -20,29 +29,32 @@
   export let updateValue = rows.actions.updateValue
   export let contentLines = 1
   export let hidden = false
+  export let isSelectingCells = false
+  export let cellSelected = false
 
   const emptyError = writable(null)
 
   let api
 
-  // Get the error for this cell if the row is focused
+  // Get the error for this cell if the cell is focused or selected
   $: error = getErrorStore(rowFocused, cellId)
 
   // Determine if the cell is editable
   $: readonly =
-    column.schema.autocolumn ||
-    column.schema.disabled ||
-    column.schema.type === "formula" ||
-    (!$config.canEditRows && !row._isNewRow) ||
-    column.schema.readonly
+    columns.actions.isReadonly(column) ||
+    (!$config.canEditRows && !row._isNewRow)
 
-  // Register this cell API if the row is focused
+  // Register this cell API if this cell is focused
   $: {
     if (focused) {
       focusedCellAPI.set(cellAPI)
     }
   }
 
+  // Callbacks for cell selection
+  $: updateSelectionCallback = isSelectingCells ? updateSelection : null
+  $: stopSelectionCallback = isSelectingCells ? stopSelection : null
+
   const getErrorStore = (selected, cellId) => {
     if (!selected) {
       return emptyError
@@ -68,21 +80,60 @@
       })
     },
   }
+
+  const startSelection = e => {
+    if (e.button !== 0 || e.shiftKey) {
+      return
+    }
+    selectedCells.actions.startSelecting(cellId)
+  }
+
+  const updateSelection = e => {
+    if (e.buttons !== 1) {
+      selectedCells.actions.stopSelecting()
+      return
+    }
+    selectedCells.actions.updateTarget(cellId)
+  }
+
+  const stopSelection = () => {
+    selectedCells.actions.stopSelecting()
+  }
+
+  const handleClick = e => {
+    if (e.shiftKey && $focusedCellId) {
+      // If we have a focused cell, select the range from that cell to here
+      selectedCells.actions.selectRange($focusedCellId, cellId)
+    } else if (e.shiftKey && $selectedCellCount) {
+      // If we already have a selected range of cell, update it
+      selectedCells.actions.updateTarget(cellId)
+    } else {
+      // Otherwise just select this cell
+      focusedCellId.set(cellId)
+    }
+  }
 </script>
 
 <GridCell
   {highlighted}
-  {selected}
   {rowIdx}
   {topRow}
   {focused}
   {selectedUser}
   {readonly}
   {hidden}
+  selected={rowSelected || cellSelected}
   error={$error}
-  on:click={() => focusedCellId.set(cellId)}
   on:contextmenu={e => menu.actions.open(cellId, e)}
+  on:mousedown={startSelection}
+  on:mouseenter={updateSelectionCallback}
+  on:mouseup={stopSelectionCallback}
+  on:click={handleClick}
   width={column.width}
+  metadata={{
+    ...row.__metadata?.row,
+    ...row.__metadata?.cell[column.name],
+  }}
 >
   <svelte:component
     this={getCellRenderer(column)}

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

@@ -11,13 +11,20 @@
   export let center = false
   export let readonly = false
   export let hidden = false
+  export let metadata = null
 
-  $: style = getStyle(width, selectedUser)
+  $: style = getStyle(width, selectedUser, metadata)
 
-  const getStyle = (width, selectedUser) => {
+  const getStyle = (width, selectedUser, metadata) => {
     let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;`
     if (selectedUser) {
-      style += `--user-color:${selectedUser.color};`
+      style += `--user-color :${selectedUser.color};`
+    }
+    if (metadata?.backgroundColor) {
+      style += `--cell-background: ${metadata.backgroundColor};`
+    }
+    if (metadata?.textColor) {
+      style += `--cell-font-color: ${metadata.textColor};`
     }
     return style
   }
@@ -43,9 +50,10 @@
   on:mouseup
   on:click
   on:contextmenu
-  on:touchstart
+  on:touchstart|passive
   on:touchend
   on:touchcancel
+  on:mouseenter
   {style}
 >
   {#if error}
@@ -71,7 +79,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
-    color: var(--spectrum-global-color-gray-800);
+    color: var(--cell-font-color);
     font-size: var(--cell-font-size);
     gap: var(--cell-spacing);
     background: var(--cell-background);
@@ -93,9 +101,9 @@
   }
 
   /* Cell border */
-  .cell.focused:after,
-  .cell.error:after,
-  .cell.selected-other:not(.focused):after {
+  .cell.focused::after,
+  .cell.error::after,
+  .cell.selected-other:not(.focused)::after {
     content: " ";
     position: absolute;
     top: 0;
@@ -108,14 +116,30 @@
     box-sizing: border-box;
   }
 
+  /* Cell background overlay */
+  .cell.selected::before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    height: calc(100% + 1px);
+    width: calc(100% + 1px);
+    opacity: 0.16;
+    background: var(--spectrum-global-color-blue-400);
+    z-index: 2;
+    pointer-events: none;
+  }
+
   /* Cell border for cells with labels */
-  .cell.error:after {
+  .cell.error::after {
     border-radius: 0 2px 2px 2px;
   }
-  .cell.top.error:after {
+  .cell.top.error::after {
     border-radius: 2px 2px 2px 0;
   }
-  .cell.selected-other:not(.focused):after {
+  .cell.selected-other:not(.focused)::after {
     border-radius: 2px;
   }
 
@@ -150,14 +174,10 @@
   .cell.focused.readonly {
     --cell-color: var(--spectrum-global-color-gray-600);
   }
-
-  .cell.highlighted:not(.focused),
+  .cell.highlighted:not(.focused):not(.selected),
   .cell.focused.readonly {
     --cell-background: var(--cell-background-hover);
   }
-  .cell.selected:not(.focused) {
-    --cell-background: var(--spectrum-global-color-blue-100);
-  }
 
   /* Label for additional text */
   .label {

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

@@ -16,14 +16,22 @@
   const { config, dispatch, selectedRows } = getContext("grid")
   const svelteDispatch = createEventDispatcher()
 
-  $: selectionEnabled = $config.canSelectRows || $config.canDeleteRows
-
   const select = e => {
     e.stopPropagation()
     svelteDispatch("select")
     const id = row?._id
     if (id) {
-      selectedRows.actions.toggleRow(id)
+      // Bulk select with shift
+      if (e.shiftKey) {
+        // Prevent default if already selected, to prevent checkbox clearing
+        if (rowSelected) {
+          e.preventDefault()
+        } else {
+          selectedRows.actions.bulkSelectRows(id)
+        }
+      } else {
+        selectedRows.actions.toggleRow(id)
+      }
     }
   }
 
@@ -46,6 +54,7 @@
   selected={rowSelected}
   {defaultHeight}
   rowIdx={row?.__idx}
+  metadata={row?.__metadata?.row}
 >
   <div class="gutter">
     {#if $$slots.default}
@@ -54,16 +63,14 @@
       <div
         on:click={select}
         class="checkbox"
-        class:visible={selectionEnabled &&
-          (disableNumber || rowSelected || rowHovered || rowFocused)}
+        class:visible={disableNumber || rowSelected || rowHovered || rowFocused}
       >
         <Checkbox value={rowSelected} {disabled} />
       </div>
       {#if !disableNumber}
         <div
           class="number"
-          class:visible={!selectionEnabled ||
-            !(rowSelected || rowHovered || rowFocused)}
+          class:visible={!(rowSelected || rowHovered || rowFocused)}
         >
           {row.__idx + 1}
         </div>
@@ -109,7 +116,7 @@
     margin: 3px 0 0 0;
   }
   .number {
-    color: var(--spectrum-global-color-gray-500);
+    color: val(--cell-font-color, var(--spectrum-global-color-gray-500));
   }
   .checkbox.visible,
   .number.visible {

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

@@ -18,7 +18,7 @@
     isReordering,
     isResizing,
     sort,
-    visibleColumns,
+    scrollableColumns,
     dispatch,
     subscribe,
     config,
@@ -51,7 +51,7 @@
 
   $: sortedBy = column.name === $sort.column
   $: canMoveLeft = orderable && idx > 0
-  $: canMoveRight = orderable && idx < $visibleColumns.length - 1
+  $: canMoveRight = orderable && idx < $scrollableColumns.length - 1
   $: sortingLabels = getSortingLabels(column.schema?.type)
   $: searchable = isColumnSearchable(column)
   $: resetSearchValue(column.name)
@@ -270,7 +270,7 @@
     on:touchcancel={onMouseUp}
     on:contextmenu={onContextMenu}
     width={column.width}
-    left={column.left}
+    left={column.__left}
     defaultHeight
     center
   >

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

@@ -7,7 +7,7 @@
 
   const { API, cache } = getContext("grid")
 
-  export let value
+  export let value = []
   export let api
   export let readonly
   export let focused
@@ -30,9 +30,10 @@
   let container
   let anchor
 
+  $: fieldValue = parseValue(value)
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
   $: editable = focused && !readonly
-  $: lookupMap = buildLookupMap(value, isOpen)
+  $: lookupMap = buildLookupMap(fieldValue, isOpen)
   $: debouncedSearch(searchString)
   $: {
     if (!focused && isOpen) {
@@ -40,6 +41,13 @@
     }
   }
 
+  const parseValue = value => {
+    if (Array.isArray(value) && value.every(x => x?._id)) {
+      return value
+    }
+    return []
+  }
+
   // Builds a lookup map to quickly check which rows are selected
   const buildLookupMap = (value, isOpen) => {
     let map = {}
@@ -177,13 +185,13 @@
 
   // Toggles whether a row is included in the relationship or not
   const toggleRow = async row => {
-    if (value?.some(x => x._id === row._id)) {
+    if (fieldValue?.some(x => x._id === row._id)) {
       // If the row is already included, remove it and update the candidate
       // row to be the same position if possible
       if (oneRowOnly) {
         await onChange([])
       } else {
-        const newValue = value.filter(x => x._id !== row._id)
+        const newValue = fieldValue.filter(x => x._id !== row._id)
         if (!newValue.length) {
           candidateIndex = null
         } else {
@@ -196,7 +204,7 @@
       if (oneRowOnly) {
         await onChange([row])
       } else {
-        await onChange(sortRows([...(value || []), row]))
+        await onChange(sortRows([...(fieldValue || []), row]))
       }
       candidateIndex = null
     }
@@ -238,7 +246,7 @@
       class:wrap={editable || contentLines > 1}
       on:wheel={e => (focused ? e.stopPropagation() : null)}
     >
-      {#each value || [] as relationship}
+      {#each fieldValue || [] as relationship}
         {#if relationship[primaryDisplay] || relationship.primaryDisplay}
           <div class="badge">
             <span>
@@ -263,9 +271,9 @@
         </div>
       {/if}
     </div>
-    {#if !hideCounter && value?.length}
+    {#if !hideCounter && fieldValue?.length}
       <div class="count">
-        {value?.length || 0}
+        {fieldValue?.length || 0}
       </div>
     {/if}
   </div>

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

@@ -1,35 +1,120 @@
 <script>
-  import { Modal, ModalContent } from "@budibase/bbui"
+  import { Modal, ModalContent, ProgressBar } from "@budibase/bbui"
   import { getContext, onMount } from "svelte"
+  import { parseCellID } from "../lib/utils"
+  import { sleep } from "../../../utils/utils"
 
-  const { selectedRows, rows, subscribe, notifications } = getContext("grid")
+  const {
+    selectedRows,
+    rows,
+    subscribe,
+    notifications,
+    menu,
+    selectedCellCount,
+    selectedRowCount,
+    selectedCells,
+    rowLookupMap,
+    config,
+  } = getContext("grid")
+  const duration = 260
 
-  let modal
+  let rowsModal
+  let cellsModal
+  let processing = false
+  let progressPercentage = 0
+  let promptQuantity = 0
 
-  $: selectedRowCount = Object.values($selectedRows).length
-  $: rowsToDelete = Object.entries($selectedRows)
-    .map(entry => $rows.find(x => x._id === entry[0]))
+  $: rowsToDelete = Object.keys($selectedRows)
+    .map(rowId => $rowLookupMap[rowId])
     .filter(x => x != null)
 
-  // Deletion callback when confirmed
-  const performDeletion = async () => {
+  const handleBulkDeleteRequest = () => {
+    progressPercentage = 0
+    menu.actions.close()
+    if ($selectedRowCount && $config.canDeleteRows) {
+      if ($selectedRowCount === 1) {
+        bulkDeleteRows()
+      } else {
+        promptQuantity = $selectedRowCount
+        rowsModal?.show()
+      }
+    } else if ($selectedCellCount && $config.canEditRows) {
+      promptQuantity = $selectedCellCount
+      cellsModal?.show()
+    }
+  }
+
+  const bulkDeleteRows = async () => {
+    processing = true
     const count = rowsToDelete.length
     await rows.actions.deleteRows(rowsToDelete)
+    // This is a real bulk delete endpoint so we don't need progress.
+    // We just animate it uo to 100 when we're done for consistency with other
+    // prompts.
+    progressPercentage = 100
+    await sleep(duration)
     $notifications.success(`Deleted ${count} row${count === 1 ? "" : "s"}`)
+    processing = false
+  }
+
+  const bulkDeleteCells = async () => {
+    processing = true
+    let changeMap = {}
+    for (let row of $selectedCells) {
+      for (let cellId of row) {
+        const { rowId, field } = parseCellID(cellId)
+        if (!changeMap[rowId]) {
+          changeMap[rowId] = {}
+        }
+        changeMap[rowId][field] = null
+      }
+    }
+    await rows.actions.bulkUpdate(changeMap, progress => {
+      progressPercentage = progress * 100
+    })
+    await sleep(duration)
+    processing = false
   }
 
-  onMount(() => subscribe("request-bulk-delete", () => modal?.show()))
+  onMount(() => subscribe("request-bulk-delete", handleBulkDeleteRequest))
 </script>
 
-<Modal bind:this={modal}>
+<Modal bind:this={rowsModal}>
   <ModalContent
     title="Delete rows"
     confirmText="Continue"
     cancelText="Cancel"
-    onConfirm={performDeletion}
+    onConfirm={bulkDeleteRows}
+    size="M"
+  >
+    Are you sure you want to delete {promptQuantity} rows?
+    {#if processing}
+      <ProgressBar
+        size="L"
+        value={progressPercentage}
+        {duration}
+        width="100%"
+      />
+    {/if}
+  </ModalContent>
+</Modal>
+
+<Modal bind:this={cellsModal}>
+  <ModalContent
+    title="Delete cells"
+    confirmText="Continue"
+    cancelText="Cancel"
+    onConfirm={bulkDeleteCells}
     size="M"
   >
-    Are you sure you want to delete {selectedRowCount}
-    row{selectedRowCount === 1 ? "" : "s"}?
+    Are you sure you want to delete {promptQuantity} cells?
+    {#if processing}
+      <ProgressBar
+        size="L"
+        value={progressPercentage}
+        {duration}
+        width="100%"
+      />
+    {/if}
   </ModalContent>
 </Modal>

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

@@ -0,0 +1,79 @@
+<script>
+  import { Modal, ModalContent, ProgressBar } from "@budibase/bbui"
+  import { getContext, onMount } from "svelte"
+  import { getCellID } from "../lib/utils"
+  import { sleep } from "../../../utils/utils"
+
+  const {
+    selectedRows,
+    rows,
+    subscribe,
+    selectedRowCount,
+    visibleColumns,
+    selectedCells,
+    rowLookupMap,
+  } = getContext("grid")
+  const duration = 260
+
+  let modal
+  let progressPercentage = 0
+  let processing = false
+  let promptQuantity = 0
+
+  // Deletion callback when confirmed
+  const performDuplication = async () => {
+    progressPercentage = 0
+    processing = true
+
+    // duplicate rows
+    const rowsToDuplicate = Object.keys($selectedRows).map(id => {
+      return $rowLookupMap[id]
+    })
+    const newRows = await rows.actions.bulkDuplicate(
+      rowsToDuplicate,
+      progress => {
+        progressPercentage = progress * 100
+      }
+    )
+    await sleep(duration)
+
+    // Select new cells to highlight them
+    if (newRows.length) {
+      const firstRow = newRows[0]
+      const lastRow = newRows[newRows.length - 1]
+      const firstCol = $visibleColumns[0]
+      const lastCol = $visibleColumns[$visibleColumns.length - 1]
+      const startCellId = getCellID(firstRow._id, firstCol.name)
+      const endCellId = getCellID(lastRow._id, lastCol.name)
+      selectedCells.actions.selectRange(startCellId, endCellId)
+    }
+    processing = false
+  }
+
+  const handleBulkDuplicateRequest = () => {
+    promptQuantity = $selectedRowCount
+    modal?.show()
+  }
+
+  onMount(() => subscribe("request-bulk-duplicate", handleBulkDuplicateRequest))
+</script>
+
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Duplicate rows"
+    confirmText="Continue"
+    cancelText="Cancel"
+    onConfirm={performDuplication}
+    size="M"
+  >
+    Are you sure you want to duplicate {promptQuantity} rows?
+    {#if processing}
+      <ProgressBar
+        size="L"
+        value={progressPercentage}
+        {duration}
+        width="100%"
+      />
+    {/if}
+  </ModalContent>
+</Modal>