@budibase/frontend-core 2.5.6-alpha.3 → 2.5.6-alpha.31

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

@@ -0,0 +1,206 @@
+import { derived, get, writable } from "svelte/store"
+import { cloneDeep } from "lodash/fp"
+import { GutterWidth, DefaultColumnWidth } 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)
+    },
+    []
+  )
+
+  return {
+    columns: {
+      ...columns,
+      subscribe: enrichedColumns.subscribe,
+    },
+    stickyColumn,
+    visibleColumns,
+  }
+}
+
+export const deriveStores = context => {
+  const { table, columns, stickyColumn, API, dispatch } = context
+
+  // Updates the tables primary display column
+  const changePrimaryDisplay = async column => {
+    return await saveTable({
+      ...get(table),
+      primaryDisplay: column,
+    })
+  }
+
+  // Persists column changes by saving metadata against table schema
+  const saveChanges = async () => {
+    const $columns = get(columns)
+    const $table = get(table)
+    const $stickyColumn = get(stickyColumn)
+    const newSchema = cloneDeep($table.schema)
+
+    // Build new updated table schema
+    Object.keys(newSchema).forEach(column => {
+      // Respect order specified by columns
+      const index = $columns.findIndex(x => x.name === column)
+      if (index !== -1) {
+        newSchema[column].order = index
+      } else {
+        delete newSchema[column].order
+      }
+
+      // Copy over metadata
+      if (column === $stickyColumn?.name) {
+        newSchema[column].visible = true
+        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
+      } else {
+        newSchema[column].visible = $columns[index]?.visible ?? true
+        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
+      }
+    })
+
+    await saveTable({ ...$table, schema: newSchema })
+  }
+
+  const saveTable = async newTable => {
+    // Update local state
+    table.set(newTable)
+
+    // Broadcast event so that we can keep sync with external state
+    // (e.g. data section which maintains a list of table definitions)
+    dispatch("updatetable", newTable)
+
+    // Update server
+    await API.saveTable(newTable)
+  }
+
+  return {
+    columns: {
+      ...columns,
+      actions: {
+        saveChanges,
+        saveTable,
+        changePrimaryDisplay,
+      },
+    },
+  }
+}
+
+export const initialise = context => {
+  const { table, columns, stickyColumn, schemaOverrides } = context
+
+  const schema = derived(
+    [table, schemaOverrides],
+    ([$table, $schemaOverrides]) => {
+      let newSchema = $table?.schema
+      if (!newSchema) {
+        return null
+      }
+      Object.keys($schemaOverrides || {}).forEach(field => {
+        if (newSchema[field]) {
+          newSchema[field] = {
+            ...newSchema[field],
+            ...$schemaOverrides[field],
+          }
+        }
+      })
+      return newSchema
+    }
+  )
+
+  // Merge new schema fields with existing schema in order to preserve widths
+  schema.subscribe($schema => {
+    if (!$schema) {
+      columns.set([])
+      stickyColumn.set(null)
+      return
+    }
+    const $table = get(table)
+
+    // Find primary display
+    let primaryDisplay
+    if ($table.primaryDisplay && $schema[$table.primaryDisplay]) {
+      primaryDisplay = $table.primaryDisplay
+    }
+
+    // Get field list
+    let fields = []
+    Object.keys($schema).forEach(field => {
+      if (field !== primaryDisplay) {
+        fields.push(field)
+      }
+    })
+
+    // Update columns, removing extraneous columns and adding missing ones
+    columns.set(
+      fields
+        .map(field => ({
+          name: field,
+          label: $schema[field].name || field,
+          schema: $schema[field],
+          width: $schema[field].width || DefaultColumnWidth,
+          visible: $schema[field].visible ?? true,
+          order: $schema[field].order,
+        }))
+        .sort((a, b) => {
+          // Sort by order first
+          const orderA = a.order
+          const orderB = b.order
+          if (orderA != null && orderB != null) {
+            return orderA < orderB ? -1 : 1
+          } else if (orderA != null) {
+            return -1
+          } else if (orderB != null) {
+            return 1
+          }
+
+          // Then sort by auto columns
+          const autoColA = a.schema?.autocolumn
+          const autoColB = b.schema?.autocolumn
+          if (autoColA === autoColB) {
+            return 0
+          }
+          return autoColA ? 1 : -1
+        })
+    )
+
+    // Update sticky column
+    if (!primaryDisplay) {
+      stickyColumn.set(null)
+      return
+    }
+    stickyColumn.set({
+      name: primaryDisplay,
+      label: $schema[primaryDisplay].name || primaryDisplay,
+      schema: $schema[primaryDisplay],
+      width: $schema[primaryDisplay].width || DefaultColumnWidth,
+      visible: true,
+      order: 0,
+      left: GutterWidth,
+    })
+  })
+}

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

@@ -0,0 +1,48 @@
+import * as Bounds from "./bounds"
+import * as Columns from "./columns"
+import * as Menu from "./menu"
+import * as Pagination from "./pagination"
+import * as Reorder from "./reorder"
+import * as Resize from "./resize"
+import * as Rows from "./rows"
+import * as Scroll from "./scroll"
+import * as UI from "./ui"
+import * as Users from "./users"
+import * as Validation from "./validation"
+import * as Viewport from "./viewport"
+import * as Clipboard from "./clipboard"
+
+const DependencyOrderedStores = [
+  Bounds,
+  Scroll,
+  Rows,
+  Columns,
+  UI,
+  Validation,
+  Resize,
+  Viewport,
+  Reorder,
+  Users,
+  Menu,
+  Pagination,
+  Clipboard,
+]
+
+export const attachStores = context => {
+  // Atomic store creation
+  for (let store of DependencyOrderedStores) {
+    context = { ...context, ...store.createStores?.(context) }
+  }
+
+  // Derived store creation
+  for (let store of DependencyOrderedStores) {
+    context = { ...context, ...store.deriveStores?.(context) }
+  }
+
+  // Initialise any store logic
+  for (let store of DependencyOrderedStores) {
+    store.initialise?.(context)
+  }
+
+  return context
+}

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

@@ -0,0 +1,49 @@
+import { writable, get } from "svelte/store"
+import { GutterWidth } from "../lib/constants"
+
+export const createStores = () => {
+  const menu = writable({
+    x: 0,
+    y: 0,
+    visible: false,
+    selectedRow: null,
+  })
+  return {
+    menu,
+  }
+}
+
+export const deriveStores = 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()
+    focusedCellId.set(cellId)
+    menu.set({
+      left:
+        e.clientX - $bounds.left + GutterWidth + ($stickyColumn?.width || 0),
+      top: e.clientY - $bounds.top + $rowHeight,
+      visible: true,
+    })
+  }
+
+  const close = () => {
+    menu.update(state => ({
+      ...state,
+      visible: false,
+    }))
+  }
+
+  return {
+    menu: {
+      ...menu,
+      actions: {
+        open,
+        close,
+      },
+    },
+  }
+}

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

@@ -0,0 +1,24 @@
+import { derived } from "svelte/store"
+
+export const initialise = context => {
+  const { scrolledRowCount, rows, visualRowCapacity } = context
+
+  // Derive how many rows we have in total
+  const rowCount = derived(rows, $rows => $rows.length, 0)
+
+  // Derive how many rows we have available to scroll
+  const remainingRows = derived(
+    [scrolledRowCount, rowCount, visualRowCapacity],
+    ([$scrolledRowCount, $rowCount, $visualRowCapacity]) => {
+      return Math.max(0, $rowCount - $scrolledRowCount - $visualRowCapacity)
+    },
+    100
+  )
+
+  // Fetch next page when fewer than 25 remaining rows to scroll
+  remainingRows.subscribe(remaining => {
+    if (remaining < 25) {
+      rows.actions.loadNextPage()
+    }
+  })
+}

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

@@ -0,0 +1,155 @@
+import { get, writable, derived } from "svelte/store"
+
+const reorderInitialState = {
+  sourceColumn: null,
+  targetColumn: null,
+  breakpoints: [],
+  initialMouseX: null,
+  scrollLeft: 0,
+  gridLeft: 0,
+}
+
+export const createStores = () => {
+  const reorder = writable(reorderInitialState)
+  const isReordering = derived(
+    reorder,
+    $reorder => !!$reorder.sourceColumn,
+    false
+  )
+  return {
+    reorder,
+    isReordering,
+  }
+}
+
+export const deriveStores = context => {
+  const { reorder, columns, visibleColumns, scroll, bounds, stickyColumn, ui } =
+    context
+
+  // Callback when dragging on a colum header and starting reordering
+  const startReordering = (column, e) => {
+    const $visibleColumns = get(visibleColumns)
+    const $bounds = get(bounds)
+    const $scroll = get(scroll)
+    const $stickyColumn = get(stickyColumn)
+    ui.actions.blur()
+
+    // Generate new breakpoints for the current columns
+    let breakpoints = $visibleColumns.map(col => ({
+      x: col.left + col.width,
+      column: col.name,
+    }))
+    if ($stickyColumn) {
+      breakpoints.unshift({
+        x: 0,
+        column: $stickyColumn.name,
+      })
+    }
+
+    // Update state
+    reorder.set({
+      sourceColumn: column,
+      targetColumn: null,
+      breakpoints,
+      initialMouseX: e.clientX,
+      scrollLeft: $scroll.left,
+      gridLeft: $bounds.left,
+    })
+
+    // Add listeners to handle mouse movement
+    document.addEventListener("mousemove", onReorderMouseMove)
+    document.addEventListener("mouseup", stopReordering)
+
+    // Trigger a move event immediately so ensure a candidate column is chosen
+    onReorderMouseMove(e)
+  }
+
+  // Callback when moving the mouse when reordering columns
+  const onReorderMouseMove = e => {
+    const $reorder = get(reorder)
+
+    // Compute the closest breakpoint to the current position
+    let targetColumn
+    let minDistance = Number.MAX_SAFE_INTEGER
+    const mouseX = e.clientX - $reorder.gridLeft + $reorder.scrollLeft
+    $reorder.breakpoints.forEach(point => {
+      const distance = Math.abs(point.x - mouseX)
+      if (distance < minDistance) {
+        minDistance = distance
+        targetColumn = point.column
+      }
+    })
+
+    if (targetColumn !== $reorder.targetColumn) {
+      reorder.update(state => ({
+        ...state,
+        targetColumn,
+      }))
+    }
+  }
+
+  // Callback when stopping reordering columns
+  const stopReordering = async () => {
+    // Swap position of columns
+    let { sourceColumn, targetColumn } = get(reorder)
+    moveColumn(sourceColumn, targetColumn)
+
+    // Reset state
+    reorder.set(reorderInitialState)
+
+    // Remove event handlers
+    document.removeEventListener("mousemove", onReorderMouseMove)
+    document.removeEventListener("mouseup", stopReordering)
+
+    // Save column changes
+    await columns.actions.saveChanges()
+  }
+
+  // Moves a column after another columns.
+  // An undefined target column will move the source to index 0.
+  const moveColumn = (sourceColumn, targetColumn) => {
+    let $columns = get(columns)
+    let sourceIdx = $columns.findIndex(x => x.name === sourceColumn)
+    let targetIdx = $columns.findIndex(x => x.name === targetColumn)
+    targetIdx++
+    columns.update(state => {
+      const removed = state.splice(sourceIdx, 1)
+      if (--targetIdx < sourceIdx) {
+        targetIdx++
+      }
+      state.splice(targetIdx, 0, removed[0])
+      return state.slice()
+    })
+  }
+
+  // Moves a column one place left (as appears visually)
+  const moveColumnLeft = async column => {
+    const $visibleColumns = get(visibleColumns)
+    const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
+    moveColumn(column, $visibleColumns[sourceIdx - 2]?.name)
+    await columns.actions.saveChanges()
+  }
+
+  // Moves a column one place right (as appears visually)
+  const moveColumnRight = async column => {
+    const $visibleColumns = get(visibleColumns)
+    const sourceIdx = $visibleColumns.findIndex(x => x.name === column)
+    if (sourceIdx === $visibleColumns.length - 1) {
+      return
+    }
+    moveColumn(column, $visibleColumns[sourceIdx + 1]?.name)
+    await columns.actions.saveChanges()
+  }
+
+  return {
+    reorder: {
+      ...reorder,
+      actions: {
+        startReordering,
+        stopReordering,
+        moveColumnLeft,
+        moveColumnRight,
+      },
+    },
+  }
+}

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

@@ -0,0 +1,124 @@
+import { writable, get, derived } from "svelte/store"
+import { MinColumnWidth, DefaultColumnWidth } from "../lib/constants"
+
+const initialState = {
+  initialMouseX: null,
+  initialWidth: null,
+  column: null,
+  columnIdx: null,
+  width: 0,
+  left: 0,
+}
+
+export const createStores = () => {
+  const resize = writable(initialState)
+  const isResizing = derived(resize, $resize => $resize.column != null, false)
+  return {
+    resize,
+    isResizing,
+  }
+}
+
+export const deriveStores = context => {
+  const { resize, columns, stickyColumn, ui } = context
+
+  // Starts resizing a certain column
+  const startResizing = (column, e) => {
+    // Prevent propagation to stop reordering triggering
+    e.stopPropagation()
+    ui.actions.blur()
+
+    // Find and cache index
+    let columnIdx = get(columns).findIndex(col => col.name === column.name)
+    if (columnIdx === -1) {
+      columnIdx = "sticky"
+    }
+
+    // Set initial store state
+    resize.set({
+      width: column.width,
+      left: column.left,
+      initialWidth: column.width,
+      initialMouseX: e.clientX,
+      column: column.name,
+      columnIdx,
+    })
+
+    // Add mouse event listeners to handle resizing
+    document.addEventListener("mousemove", onResizeMouseMove)
+    document.addEventListener("mouseup", stopResizing)
+  }
+
+  // Handler for moving the mouse to resize columns
+  const onResizeMouseMove = e => {
+    const { initialMouseX, initialWidth, width, columnIdx } = get(resize)
+    const dx = e.clientX - initialMouseX
+    const newWidth = Math.round(Math.max(MinColumnWidth, initialWidth + dx))
+
+    // Ignore small changes
+    if (Math.abs(width - newWidth) < 5) {
+      return
+    }
+
+    // Update column state
+    if (columnIdx === "sticky") {
+      stickyColumn.update(state => ({
+        ...state,
+        width: newWidth,
+      }))
+    } else {
+      columns.update(state => {
+        state[columnIdx].width = newWidth
+        return [...state]
+      })
+    }
+
+    // Update state
+    resize.update(state => ({
+      ...state,
+      width: newWidth,
+    }))
+  }
+
+  // Stop resizing any columns
+  const stopResizing = async () => {
+    // Reset state
+    const $resize = get(resize)
+    resize.set(initialState)
+    document.removeEventListener("mousemove", onResizeMouseMove)
+    document.removeEventListener("mouseup", stopResizing)
+
+    // Persist width if it changed
+    if ($resize.width !== $resize.initialWidth) {
+      await columns.actions.saveChanges()
+    }
+  }
+
+  // Resets a column size back to default
+  const resetSize = async column => {
+    const $stickyColumn = get(stickyColumn)
+    if (column.name === $stickyColumn?.name) {
+      stickyColumn.update(state => ({
+        ...state,
+        width: DefaultColumnWidth,
+      }))
+    } else {
+      columns.update(state => {
+        const columnIdx = state.findIndex(x => x.name === column.name)
+        state[columnIdx].width = DefaultColumnWidth
+        return [...state]
+      })
+    }
+    await columns.actions.saveChanges()
+  }
+
+  return {
+    resize: {
+      ...resize,
+      actions: {
+        startResizing,
+        resetSize,
+      },
+    },
+  }
+}