@budibase/frontend-core 2.5.9 → 2.5.10-alpha.1

package/src/components/grid/layout/NewRow.svelte

@@ -0,0 +1,334 @@
+<script>
+  import { getContext, onDestroy, onMount, tick } from "svelte"
+  import { Icon, Button } from "@budibase/bbui"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import DataCell from "../cells/DataCell.svelte"
+  import { fade } from "svelte/transition"
+  import { GutterWidth } from "../lib/constants"
+  import { NewRowID } from "../lib/constants"
+  import GutterCell from "../cells/GutterCell.svelte"
+  import KeyboardShortcut from "./KeyboardShortcut.svelte"
+
+  const {
+    hoveredRowId,
+    focusedCellId,
+    stickyColumn,
+    scroll,
+    dispatch,
+    rows,
+    focusedCellAPI,
+    tableId,
+    subscribe,
+    renderedRows,
+    renderedColumns,
+    rowHeight,
+    hasNextPage,
+    maxScrollTop,
+    rowVerticalInversionIndex,
+    columnHorizontalInversionIndex,
+  } = getContext("grid")
+
+  let visible = false
+  let isAdding = false
+  let newRow = {}
+  let offset = 0
+
+  $: firstColumn = $stickyColumn || $renderedColumns[0]
+  $: width = GutterWidth + ($stickyColumn?.width || 0)
+  $: $tableId, (visible = false)
+  $: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
+
+  const shouldInvertY = (offset, inversionIndex, rows) => {
+    if (offset === 0) {
+      return false
+    }
+    return rows.length >= inversionIndex
+  }
+
+  const addRow = async () => {
+    // Blur the active cell and tick to let final value updates propagate
+    isAdding = true
+    $focusedCellId = null
+    await tick()
+
+    // Create row
+    const newRowIndex = offset ? undefined : 0
+    const savedRow = await rows.actions.addRow(newRow, newRowIndex)
+    if (savedRow) {
+      // Reset state
+      clear()
+
+      // Select the first cell if possible
+      if (firstColumn) {
+        $focusedCellId = `${savedRow._id}-${firstColumn.name}`
+      }
+    }
+    isAdding = false
+  }
+
+  const clear = () => {
+    isAdding = false
+    visible = false
+    $focusedCellId = null
+    $hoveredRowId = null
+    document.removeEventListener("keydown", handleKeyPress)
+  }
+
+  const startAdding = async () => {
+    if (visible) {
+      return
+    }
+
+    // If we have a next page of data then we aren't truly at the bottom, so we
+    // render the add row component at the top
+    if ($hasNextPage) {
+      offset = 0
+    }
+
+    // If we don't have a next page then we're at the bottom and can scroll to
+    // the max available offset
+    else {
+      scroll.update(state => ({
+        ...state,
+        top: $maxScrollTop,
+      }))
+      offset = $renderedRows.length * $rowHeight - ($maxScrollTop % $rowHeight)
+      if ($renderedRows.length !== 0) {
+        offset -= 1
+      }
+    }
+
+    // Update state and select initial cell
+    newRow = {}
+    visible = true
+    $hoveredRowId = NewRowID
+    if (firstColumn) {
+      $focusedCellId = `${NewRowID}-${firstColumn.name}`
+    }
+
+    // Attach key listener
+    document.addEventListener("keydown", handleKeyPress)
+  }
+
+  const updateValue = (rowId, columnName, val) => {
+    newRow[columnName] = val
+  }
+
+  const addViaModal = () => {
+    clear()
+    dispatch("add-row")
+  }
+
+  const handleKeyPress = e => {
+    if (!visible) {
+      return
+    }
+    if (e.key === "Escape") {
+      // Only close the new row component if we aren't actively inside a cell
+      if (!$focusedCellAPI?.isActive()) {
+        e.preventDefault()
+        clear()
+      }
+    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      addRow()
+    }
+  }
+
+  onMount(() => subscribe("add-row-inline", startAdding))
+  onDestroy(() => {
+    document.removeEventListener("keydown", handleKeyPress)
+  })
+</script>
+
+<!-- Only show new row functionality if we have any columns -->
+{#if visible}
+  <div
+    class="container"
+    class:floating={offset > 0}
+    style="--offset:{offset}px; --sticky-width:{width}px;"
+  >
+    <div class="underlay sticky" transition:fade={{ duration: 130 }} />
+    <div class="underlay" transition:fade={{ duration: 130 }} />
+    <div class="sticky-column" transition:fade={{ duration: 130 }}>
+      <GutterCell on:expand={addViaModal} rowHovered>
+        <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
+        {#if isAdding}
+          <div in:fade={{ duration: 130 }} class="loading-overlay" />
+        {/if}
+      </GutterCell>
+      {#if $stickyColumn}
+        {@const cellId = `${NewRowID}-${$stickyColumn.name}`}
+        <DataCell
+          {cellId}
+          rowFocused
+          column={$stickyColumn}
+          row={newRow}
+          focused={$focusedCellId === cellId}
+          width={$stickyColumn.width}
+          {updateValue}
+          rowIdx={0}
+          {invertY}
+        >
+          {#if $stickyColumn?.schema?.autocolumn}
+            <div class="readonly-overlay">Can't edit auto column</div>
+          {/if}
+          {#if isAdding}
+            <div in:fade={{ duration: 130 }} class="loading-overlay" />
+          {/if}
+        </DataCell>
+      {/if}
+    </div>
+    <div class="normal-columns" transition:fade={{ duration: 130 }}>
+      <GridScrollWrapper scrollHorizontally wheelInteractive>
+        <div class="row">
+          {#each $renderedColumns as column, columnIdx}
+            {@const cellId = `new-${column.name}`}
+            {#key cellId}
+              <DataCell
+                {cellId}
+                {column}
+                {updateValue}
+                rowFocused
+                row={newRow}
+                focused={$focusedCellId === cellId}
+                width={column.width}
+                rowIdx={0}
+                invertX={columnIdx >= $columnHorizontalInversionIndex}
+                {invertY}
+              >
+                {#if column?.schema?.autocolumn}
+                  <div class="readonly-overlay">Can't edit auto column</div>
+                {/if}
+                {#if isAdding}
+                  <div in:fade={{ duration: 130 }} class="loading-overlay" />
+                {/if}
+              </DataCell>
+            {/key}
+          {/each}
+        </div>
+      </GridScrollWrapper>
+    </div>
+    <div class="buttons" transition:fade={{ duration: 130 }}>
+      <Button size="M" cta on:click={addRow} disabled={isAdding}>
+        <div class="button-with-keys">
+          Save
+          <KeyboardShortcut overlay keybind="Ctrl+Enter" />
+        </div>
+      </Button>
+      <Button size="M" secondary newStyles on:click={clear}>
+        <div class="button-with-keys">
+          Cancel
+          <KeyboardShortcut overlay keybind="Esc" />
+        </div>
+      </Button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .container {
+    position: absolute;
+    top: var(--default-row-height);
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .container :global(.cell) {
+    --cell-background: var(--spectrum-global-color-gray-75) !important;
+  }
+  .container.floating :global(.cell) {
+    height: calc(var(--row-height) + 1px);
+    border-top: var(--cell-border);
+  }
+
+  /* Underlay sits behind everything */
+  .underlay {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: var(--cell-background);
+    opacity: 0.8;
+  }
+  .underlay.sticky {
+    z-index: 2;
+    width: var(--sticky-width);
+  }
+
+  /* Floating buttons which sit on top of the underlay but below the sticky column */
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    pointer-events: all;
+    z-index: 3;
+    position: absolute;
+    top: calc(var(--row-height) + var(--offset) + 24px);
+    left: var(--gutter-width);
+  }
+  .button-with-keys {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .button-with-keys :global(> div) {
+    padding-top: 2px;
+  }
+
+  /* Sticky column styles */
+  .sticky-column {
+    display: flex;
+    z-index: 4;
+    position: relative;
+    align-self: flex-start;
+    flex: 0 0 var(--sticky-width);
+  }
+  .sticky-column :global(.cell:not(:last-child)) {
+    border-right: none;
+  }
+  .sticky-column,
+  .normal-columns {
+    margin-top: var(--offset);
+  }
+
+  /* Normal column styles */
+  .row {
+    width: 0;
+    display: flex;
+  }
+
+  /*  Readonly cell overlay */
+  .readonly-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: var(--row-height);
+    width: 100%;
+    padding: var(--cell-padding);
+    font-style: italic;
+    color: var(--spectrum-global-color-gray-600);
+    z-index: 1;
+    user-select: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /*  Overlay while row is being added */
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: var(--row-height);
+    width: 100%;
+    z-index: 1;
+    background: var(--spectrum-global-color-gray-400);
+    opacity: 0.25;
+  }
+</style>

package/src/components/grid/layout/RowCount.svelte

@@ -0,0 +1,9 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { rows } = getContext("grid")
+</script>
+
+<div>
+  {$rows.length} row{$rows.length === 1 ? "" : "s"}
+</div>

package/src/components/grid/layout/StickyColumn.svelte

@@ -0,0 +1,176 @@
+<script>
+  import { getContext } from "svelte"
+  import { Icon } from "@budibase/bbui"
+  import GridCell from "../cells/GridCell.svelte"
+  import DataCell from "../cells/DataCell.svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import HeaderCell from "../cells/HeaderCell.svelte"
+  import { GutterWidth, BlankRowID } from "../lib/constants"
+  import GutterCell from "../cells/GutterCell.svelte"
+  import KeyboardShortcut from "./KeyboardShortcut.svelte"
+
+  const {
+    rows,
+    selectedRows,
+    stickyColumn,
+    renderedColumns,
+    renderedRows,
+    focusedCellId,
+    hoveredRowId,
+    config,
+    selectedCellMap,
+    focusedRow,
+    scrollLeft,
+    dispatch,
+    contentLines,
+  } = getContext("grid")
+
+  $: rowCount = $rows.length
+  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: width = GutterWidth + ($stickyColumn?.width || 0)
+
+  const selectAll = () => {
+    const allSelected = selectedRowCount === rowCount
+    if (allSelected) {
+      $selectedRows = {}
+    } else {
+      let allRows = {}
+      $rows.forEach(row => {
+        allRows[row._id] = true
+      })
+      $selectedRows = allRows
+    }
+  }
+</script>
+
+<div
+  class="sticky-column"
+  style="flex: 0 0 {width}px"
+  class:scrolled={$scrollLeft > 0}
+>
+  <div class="header row">
+    <GutterCell
+      disableExpand
+      disableNumber
+      on:select={selectAll}
+      defaultHeight
+      rowSelected={selectedRowCount && selectedRowCount === rowCount}
+      disabled={!$renderedRows.length}
+    />
+    {#if $stickyColumn}
+      <HeaderCell column={$stickyColumn} orderable={false} idx="sticky" />
+    {/if}
+  </div>
+
+  <div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
+    <GridScrollWrapper scrollVertically wheelInteractive>
+      {#each $renderedRows as row, idx}
+        {@const rowSelected = !!$selectedRows[row._id]}
+        {@const rowHovered = $hoveredRowId === row._id}
+        {@const rowFocused = $focusedRow?._id === row._id}
+        {@const cellId = `${row._id}-${$stickyColumn?.name}`}
+        <div
+          class="row"
+          on:mouseenter={() => ($hoveredRowId = row._id)}
+          on:mouseleave={() => ($hoveredRowId = null)}
+        >
+          <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
+          {#if $stickyColumn}
+            <DataCell
+              {row}
+              {cellId}
+              {rowFocused}
+              selected={rowSelected}
+              highlighted={rowHovered || rowFocused}
+              rowIdx={idx}
+              focused={$focusedCellId === cellId}
+              selectedUser={$selectedCellMap[cellId]}
+              width={$stickyColumn.width}
+              column={$stickyColumn}
+              contentLines={$contentLines}
+            />
+          {/if}
+        </div>
+      {/each}
+      {#if $config.allowAddRows && ($renderedColumns.length || $stickyColumn)}
+        <div
+          class="row new"
+          on:mouseenter={() => ($hoveredRowId = BlankRowID)}
+          on:mouseleave={() => ($hoveredRowId = null)}
+          on:click={() => dispatch("add-row-inline")}
+        >
+          <GutterCell disableExpand rowHovered={$hoveredRowId === BlankRowID}>
+            <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
+          </GutterCell>
+          {#if $stickyColumn}
+            <GridCell
+              width={$stickyColumn.width}
+              highlighted={$hoveredRowId === BlankRowID}
+            >
+              <KeyboardShortcut padded keybind="Ctrl+Enter" />
+            </GridCell>
+          {/if}
+        </div>
+      {/if}
+    </GridScrollWrapper>
+  </div>
+</div>
+
+<style>
+  .sticky-column {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 2;
+    background: var(--cell-background);
+  }
+
+  /* Add right border */
+  .sticky-column:before {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 100%;
+    left: calc(100% - 1px);
+    top: 0;
+    border-left: var(--cell-border);
+  }
+
+  /* Add shadow when scrolled */
+  .sticky-column.scrolled:after {
+    position: absolute;
+    content: "";
+    width: 8px;
+    height: 100%;
+    left: 100%;
+    top: 0;
+    opacity: 1;
+    background: linear-gradient(to right, var(--drop-shadow), transparent);
+    z-index: -1;
+  }
+
+  /* Don't show borders between cells in the sticky column */
+  .sticky-column :global(.cell:not(:last-child)) {
+    border-right: none;
+  }
+
+  .header {
+    z-index: 1;
+  }
+  .header :global(.cell) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .row {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .content {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .row.new :global(*:hover) {
+    cursor: pointer;
+  }
+</style>

package/src/components/grid/layout/UserAvatars.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { getContext } from "svelte"
+  import Avatar from "./Avatar.svelte"
+
+  const { users } = getContext("grid")
+</script>
+
+<div class="users">
+  {#each $users as user}
+    <Avatar {user} />
+  {/each}
+</div>
+
+<style>
+  .users {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+</style>

package/src/components/grid/lib/constants.js

@@ -0,0 +1,14 @@
+export const Padding = 128
+export const MaxCellRenderHeight = 252
+export const MaxCellRenderWidthOverflow = 200
+export const ScrollBarSize = 8
+export const GutterWidth = 72
+export const DefaultColumnWidth = 200
+export const MinColumnWidth = 80
+export const SmallRowHeight = 36
+export const MediumRowHeight = 64
+export const LargeRowHeight = 92
+export const DefaultRowHeight = SmallRowHeight
+export const NewRowID = "new"
+export const BlankRowID = "blank"
+export const RowPageSize = 100

package/src/components/grid/lib/events.js

@@ -0,0 +1,29 @@
+import { createEventDispatcher } from "svelte"
+
+export const createEventManagers = () => {
+  const svelteDispatch = createEventDispatcher()
+  let subscribers = {}
+
+  // Dispatches an event, notifying subscribers and also emitting a normal
+  // svelte event
+  const dispatch = (event, payload) => {
+    svelteDispatch(event, payload)
+    const subs = subscribers[event] || []
+    for (let i = 0; i < subs.length; i++) {
+      subs[i](payload)
+    }
+  }
+
+  // Subscribes to events
+  const subscribe = (event, callback) => {
+    const subs = subscribers[event] || []
+    subscribers[event] = [...subs, callback]
+
+    // Return unsubscribe function
+    return () => {
+      subscribers[event] = subscribers[event].filter(cb => cb !== callback)
+    }
+  }
+
+  return { dispatch, subscribe }
+}

package/src/components/grid/lib/renderers.js

@@ -0,0 +1,29 @@
+import OptionsCell from "../cells/OptionsCell.svelte"
+import DateCell from "../cells/DateCell.svelte"
+import MultiSelectCell from "../cells/MultiSelectCell.svelte"
+import NumberCell from "../cells/NumberCell.svelte"
+import RelationshipCell from "../cells/RelationshipCell.svelte"
+import TextCell from "../cells/TextCell.svelte"
+import LongFormCell from "../cells/LongFormCell.svelte"
+import BooleanCell from "../cells/BooleanCell.svelte"
+import FormulaCell from "../cells/FormulaCell.svelte"
+import JSONCell from "../cells/JSONCell.svelte"
+import AttachmentCell from "../cells/AttachmentCell.svelte"
+
+const TypeComponentMap = {
+  text: TextCell,
+  options: OptionsCell,
+  datetime: DateCell,
+  barcodeqr: TextCell,
+  longform: LongFormCell,
+  array: MultiSelectCell,
+  number: NumberCell,
+  boolean: BooleanCell,
+  attachment: AttachmentCell,
+  link: RelationshipCell,
+  formula: FormulaCell,
+  json: JSONCell,
+}
+export const getCellRenderer = column => {
+  return TypeComponentMap[column?.schema?.type] || TextCell
+}

package/src/components/grid/lib/utils.js

@@ -0,0 +1,26 @@
+export const getColor = (idx, opacity = 0.3) => {
+  if (idx == null || idx === -1) {
+    return null
+  }
+  return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
+}
+
+const TypeIconMap = {
+  text: "Text",
+  options: "Dropdown",
+  datetime: "Date",
+  barcodeqr: "Camera",
+  longform: "TextAlignLeft",
+  array: "Dropdown",
+  number: "123",
+  boolean: "Boolean",
+  attachment: "AppleFiles",
+  link: "DataCorrelated",
+  formula: "Calculator",
+  json: "Brackets",
+}
+
+export const getColumnIcon = column => {
+  const type = column.schema.type
+  return TypeIconMap[type] || "Text"
+}

package/src/components/grid/lib/websocket.js

@@ -0,0 +1,63 @@
+import { get } from "svelte/store"
+import { io } from "socket.io-client"
+
+export const createWebsocket = context => {
+  const { rows, tableId, users, userId, focusedCellId } = context
+
+  // Determine connection info
+  const tls = location.protocol === "https:"
+  const proto = tls ? "wss:" : "ws:"
+  const host = location.hostname
+  const port = location.port || (tls ? 443 : 80)
+  const socket = io(`${proto}//${host}:${port}`, {
+    path: "/socket/grid",
+    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
+    reconnectionAttempts: 3,
+    // Delay reconnection attempt by 5 seconds
+    reconnectionDelay: 5000,
+    reconnectionDelayMax: 5000,
+    // Timeout after 4 seconds so we never stack requests
+    timeout: 4000,
+  })
+
+  const connectToTable = tableId => {
+    if (!socket.connected) {
+      return
+    }
+    // Identify which table we are editing
+    socket.emit("select-table", tableId, response => {
+      // handle initial connection info
+      users.set(response.users)
+      userId.set(response.id)
+    })
+  }
+
+  // Event handlers
+  socket.on("connect", () => {
+    connectToTable(get(tableId))
+  })
+  socket.on("row-update", data => {
+    if (data.id) {
+      rows.actions.refreshRow(data.id)
+    }
+  })
+  socket.on("user-update", user => {
+    users.actions.updateUser(user)
+  })
+  socket.on("user-disconnect", user => {
+    users.actions.removeUser(user)
+  })
+  socket.on("connect_error", err => {
+    console.log("Failed to connect to grid websocket:", err.message)
+  })
+
+  // Change websocket connection when table changes
+  tableId.subscribe(connectToTable)
+
+  // Notify selected cell changes
+  focusedCellId.subscribe($focusedCellId => {
+    socket.emit("select-cell", $focusedCellId)
+  })
+
+  return () => socket?.disconnect()
+}