@budibase/frontend-core 2.7.36-alpha.1 → 2.7.36

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

@@ -46,7 +46,7 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { table, columns, stickyColumn, API, dispatch, config } = context
+  const { table, columns, stickyColumn, API, dispatch } = context
 
   // Updates the tables primary display column
   const changePrimaryDisplay = async column => {
@@ -56,23 +56,6 @@ 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)
@@ -108,9 +91,7 @@ export const deriveStores = context => {
     table.set(newTable)
 
     // Update server
-    if (get(config).allowSchemaChanges) {
-      await API.saveTable(newTable)
-    }
+    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
@@ -124,19 +105,17 @@ export const deriveStores = context => {
         saveChanges,
         saveTable,
         changePrimaryDisplay,
-        changeAllColumnWidths,
       },
     },
   }
 }
 
 export const initialise = context => {
-  const { table, columns, stickyColumn, schemaOverrides, columnWhitelist } =
-    context
+  const { table, columns, stickyColumn, schemaOverrides } = context
 
   const schema = derived(
-    [table, schemaOverrides, columnWhitelist],
-    ([$table, $schemaOverrides, $columnWhitelist]) => {
+    [table, schemaOverrides],
+    ([$table, $schemaOverrides]) => {
       if (!$table?.schema) {
         return null
       }
@@ -163,16 +142,6 @@ 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
     }
   )
@@ -240,7 +209,7 @@ export const initialise = context => {
     }
     stickyColumn.set({
       name: primaryDisplay,
-      label: $schema[primaryDisplay].displayName || primaryDisplay,
+      label: $schema[primaryDisplay].name || primaryDisplay,
       schema: $schema[primaryDisplay],
       width: $schema[primaryDisplay].width || DefaultColumnWidth,
       visible: true,

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

@@ -11,14 +11,8 @@ 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,4 +1,5 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
+import { GutterWidth } from "../lib/constants"
 
 export const createStores = () => {
   const menu = writable({
@@ -13,25 +14,18 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { menu, focusedCellId, rand } = context
+  const { menu, bounds, focusedCellId, stickyColumn, rowHeight } = 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: targetBounds.left - dataBounds.left + e.offsetX,
-      top: targetBounds.top - dataBounds.top + e.offsetY,
+      left:
+        e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0),
+      top: e.clientY - $bounds.top + $rowHeight,
       visible: true,
     })
   }

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

@@ -4,13 +4,18 @@ import { notifications } from "@budibase/bbui"
 import { NewRowID, RowPageSize } from "../lib/constants"
 import { tick } from "svelte"
 
-const SuppressErrors = true
+const initialSortState = {
+  column: null,
+  order: "ascending",
+}
 
 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)
@@ -42,8 +47,10 @@ export const createStores = () => {
     rows,
     rowLookupMap,
     table,
+    filter,
     loaded,
     loading,
+    sort,
     rowChangeCache,
     inProgressChanges,
     hasNextPage,
@@ -91,18 +98,15 @@ export const deriveStores = context => {
   // Reset everything when table ID changes
   let unsubscribe = null
   let lastResetKey = null
-  tableId.subscribe(async $tableId => {
+  tableId.subscribe($tableId => {
     // Unsub from previous fetch if one exists
     unsubscribe?.()
     fetch.set(null)
     instanceLoaded.set(false)
     loading.set(true)
 
-    // 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)
+    // Reset state
+    filter.set([])
 
     // Create new fetch model
     const newFetch = fetchData({
@@ -112,9 +116,9 @@ export const deriveStores = context => {
         tableId: $tableId,
       },
       options: {
-        filter: $filter,
-        sortColumn: $sort.column,
-        sortOrder: $sort.order,
+        filter: [],
+        sortColumn: initialSortState.column,
+        sortOrder: initialSortState.order,
         limit: RowPageSize,
         paginate: true,
       },
@@ -220,10 +224,7 @@ export const deriveStores = context => {
   const addRow = async (row, idx, bubble = false) => {
     try {
       // Create row
-      const newRow = await API.saveRow(
-        { ...row, tableId: get(tableId) },
-        SuppressErrors
-      )
+      const newRow = await API.saveRow({ ...row, tableId: get(tableId) })
 
       // Update state
       if (idx != null) {
@@ -350,10 +351,7 @@ export const deriveStores = context => {
         ...state,
         [rowId]: true,
       }))
-      const saved = await API.saveRow(
-        { ...row, ...get(rowChangeCache)[rowId] },
-        SuppressErrors
-      )
+      const saved = await API.saveRow({ ...row, ...get(rowChangeCache)[rowId] })
 
       // 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, FocusedCellMinOffset } from "../lib/constants"
+import { Padding, GutterWidth } from "../lib/constants"
 
 export const createStores = () => {
   const scroll = writable({
@@ -138,13 +138,14 @@ 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 - FocusedCellMinOffset
+        $scroll.top + $bounds.height - $rowHeight - verticalOffset
       let delta = rowYPos - bottomCutoff
       if (delta > 0) {
         scroll.update(state => ({
@@ -155,7 +156,7 @@ export const initialise = context => {
 
       // Ensure row is not above top of screen
       else {
-        const delta = $scroll.top - rowYPos + FocusedCellMinOffset
+        const delta = $scroll.top - rowYPos + verticalOffset
         if (delta > 0) {
           scroll.update(state => ({
             ...state,
@@ -170,12 +171,13 @@ 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 + FocusedCellMinOffset
+    let delta = $scroll.left - column.left + horizontalOffset
     if (delta > 0) {
       scroll.update(state => ({
         ...state,
@@ -186,7 +188,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 - FocusedCellMinOffset
+      const rightBound = $bounds.width + $scroll.left - horizontalOffset
       delta = rightEdge - rightBound
       if (delta > 0) {
         scroll.update(state => ({

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

@@ -8,16 +8,13 @@ import {
   NewRowID,
 } from "../lib/constants"
 
-export const createStores = context => {
-  const { props } = context
+export const createStores = () => {
   const focusedCellId = writable(null)
   const focusedCellAPI = writable(null)
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
-  const rowHeight = writable(props.initialRowHeight || DefaultRowHeight)
+  const rowHeight = writable(DefaultRowHeight)
   const previousFocusedRowId = writable(null)
-  const gridFocused = writable(false)
-  const isDragging = writable(false)
 
   // Derive the current focused row ID
   const focusedRowId = derived(
@@ -49,8 +46,6 @@ export const createStores = context => {
     previousFocusedRowId,
     hoveredRowId,
     rowHeight,
-    gridFocused,
-    isDragging,
     selectedRows: {
       ...selectedRows,
       actions: {
@@ -99,9 +94,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
@@ -134,7 +129,6 @@ export const initialise = context => {
     hoveredRowId,
     table,
     rowHeight,
-    initialRowHeight,
   } = context
 
   // Ensure we clear invalid rows from state if they disappear
@@ -191,13 +185,4 @@ 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,22 +108,11 @@ export const deriveStores = context => {
   // Determine the row index at which we should start vertically inverting cell
   // dropdowns
   const rowVerticalInversionIndex = derived(
-    [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)
+    [visualRowCapacity, rowHeight],
+    ([$visualRowCapacity, $rowHeight]) => {
+      return (
+        $visualRowCapacity - Math.ceil(MaxCellRenderHeight / $rowHeight) - 2
+      )
     }
   )
 
@@ -136,7 +125,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,10 +136,8 @@ export default class DataFetch {
       this.options.sortOrder = "ascending"
     }
 
-    // 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) {
+    // If no sort column, use the primary display and fallback to first column
+    if (!this.options.sortColumn) {
       let newSortColumn
       if (definition?.primaryDisplay && schema[definition.primaryDisplay]) {
         newSortColumn = definition.primaryDisplay

package/src/utils/index.js

@@ -3,5 +3,4 @@ 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/components/grid/controls/SizeButton.svelte

@@ -1,135 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  import { ActionButton, Popover, Label } from "@budibase/bbui"
-  import {
-    DefaultColumnWidth,
-    LargeRowHeight,
-    MediumRowHeight,
-    SmallRowHeight,
-  } from "../lib/constants"
-
-  const { stickyColumn, columns, rowHeight, table } = getContext("grid")
-
-  // Some constants for column width options
-  const smallColSize = 120
-  const mediumColSize = DefaultColumnWidth
-  const largeColSize = DefaultColumnWidth * 1.5
-
-  // Row height sizes
-  const rowSizeOptions = [
-    {
-      label: "Small",
-      size: SmallRowHeight,
-    },
-    {
-      label: "Medium",
-      size: MediumRowHeight,
-    },
-    {
-      label: "Large",
-      size: LargeRowHeight,
-    },
-  ]
-
-  let open = false
-  let anchor
-
-  // Column width sizes
-  $: allCols = $columns.concat($stickyColumn ? [$stickyColumn] : [])
-  $: allSmall = allCols.every(col => col.width === smallColSize)
-  $: allMedium = allCols.every(col => col.width === mediumColSize)
-  $: allLarge = allCols.every(col => col.width === largeColSize)
-  $: custom = !allSmall && !allMedium && !allLarge
-  $: columnSizeOptions = [
-    {
-      label: "Small",
-      size: smallColSize,
-      selected: allSmall,
-    },
-    {
-      label: "Medium",
-      size: mediumColSize,
-      selected: allMedium,
-    },
-    {
-      label: "Large",
-      size: largeColSize,
-      selected: allLarge,
-    },
-  ]
-
-  const changeRowHeight = height => {
-    columns.actions.saveTable({
-      ...$table,
-      rowHeight: height,
-    })
-  }
-</script>
-
-<div bind:this={anchor}>
-  <ActionButton
-    icon="MoveUpDown"
-    quiet
-    size="M"
-    on:click={() => (open = !open)}
-    selected={open}
-    disabled={!allCols.length}
-  >
-    Size
-  </ActionButton>
-</div>
-
-<Popover bind:open {anchor} align="left">
-  <div class="content">
-    <div class="size">
-      <Label>Row height</Label>
-      <div class="options">
-        {#each rowSizeOptions as option}
-          <ActionButton
-            quiet
-            selected={$rowHeight === option.size}
-            on:click={() => changeRowHeight(option.size)}
-          >
-            {option.label}
-          </ActionButton>
-        {/each}
-      </div>
-    </div>
-    <div class="size">
-      <Label>Column width</Label>
-      <div class="options">
-        {#each columnSizeOptions as option}
-          <ActionButton
-            quiet
-            on:click={() => columns.actions.changeAllColumnWidths(option.size)}
-            selected={option.selected}
-          >
-            {option.label}
-          </ActionButton>
-        {/each}
-        {#if custom}
-          <ActionButton selected={custom} quiet>Custom</ActionButton>
-        {/if}
-      </div>
-    </div>
-  </div>
-</Popover>
-
-<style>
-  .content {
-    padding: 12px;
-  }
-  .size {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .size:first-child {
-    margin-bottom: 16px;
-  }
-  .options {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-</style>

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

@@ -1,27 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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/sort.js

@@ -1,27 +0,0 @@
-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/utils/memo.js

@@ -1,43 +0,0 @@
-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
-}