@budibase/frontend-core 2.7.34-alpha.4 → 2.7.34-alpha.7

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

@@ -46,7 +46,7 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { table, columns, stickyColumn, API, dispatch } = context
+  const { table, columns, stickyColumn, API, dispatch, config } = context
 
   // Updates the tables primary display column
   const changePrimaryDisplay = async column => {
@@ -56,6 +56,23 @@ export const deriveStores = context => {
     })
   }
 
+  // Updates the width of all columns
+  const changeAllColumnWidths = async width => {
+    columns.update(state => {
+      return state.map(col => ({
+        ...col,
+        width,
+      }))
+    })
+    if (get(stickyColumn)) {
+      stickyColumn.update(state => ({
+        ...state,
+        width,
+      }))
+    }
+    await saveChanges()
+  }
+
   // Persists column changes by saving metadata against table schema
   const saveChanges = async () => {
     const $columns = get(columns)
@@ -91,7 +108,9 @@ export const deriveStores = context => {
     table.set(newTable)
 
     // Update server
-    await API.saveTable(newTable)
+    if (get(config).allowSchemaChanges) {
+      await API.saveTable(newTable)
+    }
 
     // Broadcast change to external state can be updated, as this change
     // will not be received by the builder websocket because we caused it ourselves
@@ -105,17 +124,19 @@ export const deriveStores = context => {
         saveChanges,
         saveTable,
         changePrimaryDisplay,
+        changeAllColumnWidths,
       },
     },
   }
 }
 
 export const initialise = context => {
-  const { table, columns, stickyColumn, schemaOverrides } = context
+  const { table, columns, stickyColumn, schemaOverrides, columnWhitelist } =
+    context
 
   const schema = derived(
-    [table, schemaOverrides],
-    ([$table, $schemaOverrides]) => {
+    [table, schemaOverrides, columnWhitelist],
+    ([$table, $schemaOverrides, $columnWhitelist]) => {
       if (!$table?.schema) {
         return null
       }
@@ -142,6 +163,16 @@ export const initialise = context => {
           }
         }
       })
+
+      // Apply whitelist if specified
+      if ($columnWhitelist?.length) {
+        Object.keys(newSchema).forEach(key => {
+          if (!$columnWhitelist.includes(key)) {
+            delete newSchema[key]
+          }
+        })
+      }
+
       return newSchema
     }
   )
@@ -209,7 +240,7 @@ export const initialise = context => {
     }
     stickyColumn.set({
       name: primaryDisplay,
-      label: $schema[primaryDisplay].name || primaryDisplay,
+      label: $schema[primaryDisplay].displayName || primaryDisplay,
       schema: $schema[primaryDisplay],
       width: $schema[primaryDisplay].width || DefaultColumnWidth,
       visible: true,

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

@@ -0,0 +1,27 @@
+import { writable } from "svelte/store"
+import { derivedMemo } from "../../../utils"
+
+export const createStores = context => {
+  const config = writable(context.props)
+  const getProp = prop => derivedMemo(config, $config => $config[prop])
+
+  // Derive and memoize some props so that we can react to them in isolation
+  const tableId = getProp("tableId")
+  const initialSortColumn = getProp("initialSortColumn")
+  const initialSortOrder = getProp("initialSortOrder")
+  const initialFilter = getProp("initialFilter")
+  const initialRowHeight = getProp("initialRowHeight")
+  const schemaOverrides = getProp("schemaOverrides")
+  const columnWhitelist = getProp("columnWhitelist")
+
+  return {
+    config,
+    tableId,
+    initialSortColumn,
+    initialSortOrder,
+    initialFilter,
+    initialRowHeight,
+    schemaOverrides,
+    columnWhitelist,
+  }
+}

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

@@ -0,0 +1,19 @@
+import { writable } from "svelte/store"
+
+export const createStores = context => {
+  const { props } = context
+
+  // Initialise to default props
+  const filter = writable(props.initialFilter)
+
+  return {
+    filter,
+  }
+}
+
+export const initialise = context => {
+  const { filter, initialFilter } = context
+
+  // Reset filter when initial filter prop changes
+  initialFilter.subscribe(filter.set)
+}

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

@@ -11,8 +11,14 @@ import * as Users from "./users"
 import * as Validation from "./validation"
 import * as Viewport from "./viewport"
 import * as Clipboard from "./clipboard"
+import * as Config from "./config"
+import * as Sort from "./sort"
+import * as Filter from "./filter"
 
 const DependencyOrderedStores = [
+  Config,
+  Sort,
+  Filter,
   Bounds,
   Scroll,
   Rows,

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

@@ -1,5 +1,4 @@
-import { writable, get } from "svelte/store"
-import { GutterWidth } from "../lib/constants"
+import { writable } from "svelte/store"
 
 export const createStores = () => {
   const menu = writable({
@@ -14,18 +13,25 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { menu, bounds, focusedCellId, stickyColumn, rowHeight } = context
+  const { menu, focusedCellId, rand } = context
 
   const open = (cellId, e) => {
-    const $bounds = get(bounds)
-    const $stickyColumn = get(stickyColumn)
-    const $rowHeight = get(rowHeight)
     e.preventDefault()
+
+    // Get DOM node for grid data wrapper to compute relative position to
+    const gridNode = document.getElementById(`grid-${rand}`)
+    const dataNode = gridNode?.getElementsByClassName("grid-data-outer")?.[0]
+    if (!dataNode) {
+      return
+    }
+
+    // Compute bounds of cell relative to outer data node
+    const targetBounds = e.target.getBoundingClientRect()
+    const dataBounds = dataNode.getBoundingClientRect()
     focusedCellId.set(cellId)
     menu.set({
-      left:
-        e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0),
-      top: e.clientY - $bounds.top + $rowHeight,
+      left: targetBounds.left - dataBounds.left + e.offsetX,
+      top: targetBounds.top - dataBounds.top + e.offsetY,
       visible: true,
     })
   }

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

@@ -4,18 +4,13 @@ import { notifications } from "@budibase/bbui"
 import { NewRowID, RowPageSize } from "../lib/constants"
 import { tick } from "svelte"
 
-const initialSortState = {
-  column: null,
-  order: "ascending",
-}
+const SuppressErrors = true
 
 export const createStores = () => {
   const rows = writable([])
   const table = writable(null)
-  const filter = writable([])
   const loading = writable(false)
   const loaded = writable(false)
-  const sort = writable(initialSortState)
   const rowChangeCache = writable({})
   const inProgressChanges = writable({})
   const hasNextPage = writable(false)
@@ -47,10 +42,8 @@ export const createStores = () => {
     rows,
     rowLookupMap,
     table,
-    filter,
     loaded,
     loading,
-    sort,
     rowChangeCache,
     inProgressChanges,
     hasNextPage,
@@ -98,15 +91,18 @@ export const deriveStores = context => {
   // Reset everything when table ID changes
   let unsubscribe = null
   let lastResetKey = null
-  tableId.subscribe($tableId => {
+  tableId.subscribe(async $tableId => {
     // Unsub from previous fetch if one exists
     unsubscribe?.()
     fetch.set(null)
     instanceLoaded.set(false)
     loading.set(true)
 
-    // Reset state
-    filter.set([])
+    // Tick to allow other reactive logic to update stores when table ID changes
+    // before proceeding. This allows us to wipe filters etc if needed.
+    await tick()
+    const $filter = get(filter)
+    const $sort = get(sort)
 
     // Create new fetch model
     const newFetch = fetchData({
@@ -116,9 +112,9 @@ export const deriveStores = context => {
         tableId: $tableId,
       },
       options: {
-        filter: [],
-        sortColumn: initialSortState.column,
-        sortOrder: initialSortState.order,
+        filter: $filter,
+        sortColumn: $sort.column,
+        sortOrder: $sort.order,
         limit: RowPageSize,
         paginate: true,
       },
@@ -224,7 +220,10 @@ export const deriveStores = context => {
   const addRow = async (row, idx, bubble = false) => {
     try {
       // Create row
-      const newRow = await API.saveRow({ ...row, tableId: get(tableId) })
+      const newRow = await API.saveRow(
+        { ...row, tableId: get(tableId) },
+        SuppressErrors
+      )
 
       // Update state
       if (idx != null) {
@@ -351,7 +350,10 @@ export const deriveStores = context => {
         ...state,
         [rowId]: true,
       }))
-      const saved = await API.saveRow({ ...row, ...get(rowChangeCache)[rowId] })
+      const saved = await API.saveRow(
+        { ...row, ...get(rowChangeCache)[rowId] },
+        SuppressErrors
+      )
 
       // Update state after a successful change
       if (saved?._id) {

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

@@ -1,6 +1,6 @@
 import { writable, derived, get } from "svelte/store"
 import { tick } from "svelte"
-import { Padding, GutterWidth } from "../lib/constants"
+import { Padding, GutterWidth, FocusedCellMinOffset } from "../lib/constants"
 
 export const createStores = () => {
   const scroll = writable({
@@ -138,14 +138,13 @@ export const initialise = context => {
     const $scroll = get(scroll)
     const $bounds = get(bounds)
     const $rowHeight = get(rowHeight)
-    const verticalOffset = 60
 
     // Ensure vertical position is viewable
     if ($focusedRow) {
       // Ensure row is not below bottom of screen
       const rowYPos = $focusedRow.__idx * $rowHeight
       const bottomCutoff =
-        $scroll.top + $bounds.height - $rowHeight - verticalOffset
+        $scroll.top + $bounds.height - $rowHeight - FocusedCellMinOffset
       let delta = rowYPos - bottomCutoff
       if (delta > 0) {
         scroll.update(state => ({
@@ -156,7 +155,7 @@ export const initialise = context => {
 
       // Ensure row is not above top of screen
       else {
-        const delta = $scroll.top - rowYPos + verticalOffset
+        const delta = $scroll.top - rowYPos + FocusedCellMinOffset
         if (delta > 0) {
           scroll.update(state => ({
             ...state,
@@ -171,13 +170,12 @@ export const initialise = context => {
     const $visibleColumns = get(visibleColumns)
     const columnName = $focusedCellId?.split("-")[1]
     const column = $visibleColumns.find(col => col.name === columnName)
-    const horizontalOffset = 50
     if (!column) {
       return
     }
 
     // Ensure column is not cutoff on left edge
-    let delta = $scroll.left - column.left + horizontalOffset
+    let delta = $scroll.left - column.left + FocusedCellMinOffset
     if (delta > 0) {
       scroll.update(state => ({
         ...state,
@@ -188,7 +186,7 @@ export const initialise = context => {
     // Ensure column is not cutoff on right edge
     else {
       const rightEdge = column.left + column.width
-      const rightBound = $bounds.width + $scroll.left - horizontalOffset
+      const rightBound = $bounds.width + $scroll.left - FocusedCellMinOffset
       delta = rightEdge - rightBound
       if (delta > 0) {
         scroll.update(state => ({

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

@@ -0,0 +1,27 @@
+import { writable } from "svelte/store"
+
+export const createStores = context => {
+  const { props } = context
+
+  // Initialise to default props
+  const sort = writable({
+    column: props.initialSortColumn,
+    order: props.initialSortOrder || "ascending",
+  })
+
+  return {
+    sort,
+  }
+}
+
+export const initialise = context => {
+  const { sort, initialSortColumn, initialSortOrder } = context
+
+  // Reset sort when initial sort props change
+  initialSortColumn.subscribe(newSortColumn => {
+    sort.update(state => ({ ...state, column: newSortColumn }))
+  })
+  initialSortOrder.subscribe(newSortOrder => {
+    sort.update(state => ({ ...state, order: newSortOrder }))
+  })
+}

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

@@ -8,13 +8,16 @@ import {
   NewRowID,
 } from "../lib/constants"
 
-export const createStores = () => {
+export const createStores = context => {
+  const { props } = context
   const focusedCellId = writable(null)
   const focusedCellAPI = writable(null)
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
-  const rowHeight = writable(DefaultRowHeight)
+  const rowHeight = writable(props.initialRowHeight || DefaultRowHeight)
   const previousFocusedRowId = writable(null)
+  const gridFocused = writable(false)
+  const isDragging = writable(false)
 
   // Derive the current focused row ID
   const focusedRowId = derived(
@@ -46,6 +49,8 @@ export const createStores = () => {
     previousFocusedRowId,
     hoveredRowId,
     rowHeight,
+    gridFocused,
+    isDragging,
     selectedRows: {
       ...selectedRows,
       actions: {
@@ -94,9 +99,9 @@ export const deriveStores = context => {
 
   // Derive the amount of content lines to show in cells depending on row height
   const contentLines = derived(rowHeight, $rowHeight => {
-    if ($rowHeight === LargeRowHeight) {
+    if ($rowHeight >= LargeRowHeight) {
       return 3
-    } else if ($rowHeight === MediumRowHeight) {
+    } else if ($rowHeight >= MediumRowHeight) {
       return 2
     }
     return 1
@@ -129,6 +134,7 @@ export const initialise = context => {
     hoveredRowId,
     table,
     rowHeight,
+    initialRowHeight,
   } = context
 
   // Ensure we clear invalid rows from state if they disappear
@@ -185,4 +191,13 @@ export const initialise = context => {
   table.subscribe($table => {
     rowHeight.set($table?.rowHeight || DefaultRowHeight)
   })
+
+  // Reset row height when initial row height prop changes
+  initialRowHeight.subscribe(height => {
+    if (height) {
+      rowHeight.set(height)
+    } else {
+      rowHeight.set(get(table)?.rowHeight || DefaultRowHeight)
+    }
+  })
 }

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

@@ -108,11 +108,22 @@ export const deriveStores = context => {
   // Determine the row index at which we should start vertically inverting cell
   // dropdowns
   const rowVerticalInversionIndex = derived(
-    [visualRowCapacity, rowHeight],
-    ([$visualRowCapacity, $rowHeight]) => {
-      return (
-        $visualRowCapacity - Math.ceil(MaxCellRenderHeight / $rowHeight) - 2
-      )
+    [height, rowHeight, scrollTop],
+    ([$height, $rowHeight, $scrollTop]) => {
+      const offset = $scrollTop % $rowHeight
+
+      // Compute the last row index with space to render popovers below it
+      const minBottom =
+        $height - ScrollBarSize * 3 - MaxCellRenderHeight + offset
+      const lastIdx = Math.floor(minBottom / $rowHeight)
+
+      // Compute the first row index with space to render popovers above it
+      const minTop = MaxCellRenderHeight + offset
+      const firstIdx = Math.ceil(minTop / $rowHeight)
+
+      // Use the greater of the two indices so that we prefer content below,
+      // unless there is room to render the entire popover above
+      return Math.max(lastIdx, firstIdx)
     }
   )
 
@@ -125,7 +136,7 @@ export const deriveStores = context => {
       let inversionIdx = $renderedColumns.length
       for (let i = $renderedColumns.length - 1; i >= 0; i--, inversionIdx--) {
         const rightEdge = $renderedColumns[i].left + $renderedColumns[i].width
-        if (rightEdge + MaxCellRenderWidthOverflow < cutoff) {
+        if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) {
           break
         }
       }

package/src/fetch/DataFetch.js

@@ -136,8 +136,10 @@ export default class DataFetch {
       this.options.sortOrder = "ascending"
     }
 
-    // If no sort column, use the primary display and fallback to first column
-    if (!this.options.sortColumn) {
+    // If no sort column, or an invalid sort column is provided, use the primary
+    // display and fallback to first column
+    const sortValid = this.options.sortColumn && schema[this.options.sortColumn]
+    if (!sortValid) {
       let newSortColumn
       if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
         newSortColumn = definition.primaryDisplay

package/src/utils/index.js

@@ -3,4 +3,5 @@ export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
 export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
+export { memo, derivedMemo } from "./memo"
 export { createWebsocket } from "./websocket"

package/src/utils/memo.js

@@ -0,0 +1,43 @@
+import { writable, get, derived } from "svelte/store"
+
+// A simple svelte store which deeply compares all changes and ensures that
+// subscribed children will only fire when a new value is actually set
+export const memo = initialValue => {
+  const store = writable(initialValue)
+
+  const tryUpdateValue = (newValue, currentValue) => {
+    // Sanity check for primitive equality
+    if (currentValue === newValue) {
+      return
+    }
+
+    // Otherwise deep compare via JSON stringify
+    const currentString = JSON.stringify(currentValue)
+    const newString = JSON.stringify(newValue)
+    if (currentString !== newString) {
+      store.set(newValue)
+    }
+  }
+
+  return {
+    subscribe: store.subscribe,
+    set: newValue => {
+      const currentValue = get(store)
+      tryUpdateValue(newValue, currentValue)
+    },
+    update: updateFn => {
+      const currentValue = get(store)
+      let mutableCurrentValue = JSON.parse(JSON.stringify(currentValue))
+      const newValue = updateFn(mutableCurrentValue)
+      tryUpdateValue(newValue, currentValue)
+    },
+  }
+}
+
+// Enriched version of svelte's derived store which returns a memo
+export const derivedMemo = (store, derivation) => {
+  const derivedStore = derived(store, derivation)
+  const memoStore = memo(get(derivedStore))
+  derivedStore.subscribe(memoStore.set)
+  return memoStore
+}

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

@@ -1,92 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover } from "@budibase/bbui"
-  import { DefaultColumnWidth } from "../lib/constants"
-
-  const { stickyColumn, columns, compact } = getContext("grid")
-  const smallSize = 120
-  const mediumSize = DefaultColumnWidth
-  const largeSize = DefaultColumnWidth * 1.5
-
-  let open = false
-  let anchor
-
-  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
-  $: allSmall = allCols.every(col => col.width === smallSize)
-  $: allMedium = allCols.every(col => col.width === mediumSize)
-  $: allLarge = allCols.every(col => col.width === largeSize)
-  $: custom = !allSmall && !allMedium && !allLarge
-  $: sizeOptions = [
-    {
-      label: "Small",
-      size: smallSize,
-      selected: allSmall,
-    },
-    {
-      label: "Medium",
-      size: mediumSize,
-      selected: allMedium,
-    },
-    {
-      label: "Large",
-      size: largeSize,
-      selected: allLarge,
-    },
-  ]
-
-  const changeColumnWidth = async width => {
-    columns.update(state => {
-      state.forEach(column => {
-        column.width = width
-      })
-      return state
-    })
-    if ($stickyColumn) {
-      stickyColumn.update(state => ({
-        ...state,
-        width,
-      }))
-    }
-    await columns.actions.saveChanges()
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="MoveLeftRight"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-    disabled={!allCols.length}
-    tooltip={$compact ? "Width" : null}
-  >
-    {$compact ? "" : "Width"}
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align={$compact ? "right" : "left"}>
-  <div class="content">
-    {#each sizeOptions as option}
-      <ActionButton
-        quiet
-        on:click={() => changeColumnWidth(option.size)}
-        selected={option.selected}
-      >
-        {option.label}
-      </ActionButton>
-    {/each}
-    {#if custom}
-      <ActionButton selected={custom} quiet>Custom</ActionButton>
-    {/if}
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>