@budibase/frontend-core 2.5.6-alpha.1 → 2.5.6-alpha.11

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

@@ -0,0 +1,72 @@
+<script>
+  import {
+    Modal,
+    ModalContent,
+    ActionButton,
+    notifications,
+  } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  const { selectedRows, rows, config } = getContext("grid")
+
+  let modal
+
+  $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
+  $: rowsToDelete = Object.entries($selectedRows)
+    .map(entry => {
+      if (entry[1] === true) {
+        return $rows.find(x => x._id === entry[0])
+      } else {
+        return null
+      }
+    })
+    .filter(x => x != null)
+
+  // Deletion callback when confirmed
+  const performDeletion = async () => {
+    const count = rowsToDelete.length
+    await rows.actions.deleteRows(rowsToDelete)
+    notifications.success(`Deleted ${count} row${count === 1 ? "" : "s"}`)
+  }
+</script>
+
+{#if selectedRowCount}
+  <div class="delete-button" data-ignore-click-outside="true">
+    <ActionButton
+      icon="Delete"
+      size="S"
+      on:click={modal.show}
+      disabled={!$config.allowEditRows}
+    >
+      Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
+    </ActionButton>
+  </div>
+{/if}
+
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Delete rows"
+    confirmText="Continue"
+    cancelText="Cancel"
+    onConfirm={performDeletion}
+    size="M"
+  >
+    Are you sure you want to delete {selectedRowCount}
+    row{selectedRowCount === 1 ? "" : "s"}?
+  </ModalContent>
+</Modal>
+
+<style>
+  .delete-button :global(.spectrum-ActionButton:not(:disabled) *) {
+    color: var(--spectrum-global-color-red-400);
+  }
+  .delete-button :global(.spectrum-ActionButton:not(:disabled)) {
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  /*.delete-button.disabled :global(.spectrum-ActionButton *) {*/
+  /*  color: var(--spectrum-global-color-gray-600);*/
+  /*}*/
+  /*.delete-button.disabled :global(.spectrum-ActionButton) {*/
+  /*  border-color: var(--spectrum-global-color-gray-400);*/
+  /*}*/
+</style>

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

@@ -0,0 +1,91 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover, Toggle } from "@budibase/bbui"
+
+  const { columns } = getContext("grid")
+
+  let open = false
+  let anchor
+
+  $: anyHidden = $columns.some(col => !col.visible)
+
+  const toggleVisibility = (column, visible) => {
+    columns.update(state => {
+      const index = state.findIndex(col => col.name === column.name)
+      state[index].visible = visible
+      return state.slice()
+    })
+    columns.actions.saveChanges()
+  }
+
+  const showAll = () => {
+    columns.update(state => {
+      return state.map(col => ({
+        ...col,
+        visible: true,
+      }))
+    })
+    columns.actions.saveChanges()
+  }
+
+  const hideAll = () => {
+    columns.update(state => {
+      return state.map(col => ({
+        ...col,
+        visible: false,
+      }))
+    })
+    columns.actions.saveChanges()
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="VisibilityOff"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open || anyHidden}
+    disabled={!$columns.length}
+  >
+    Hide columns
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    <div class="columns">
+      {#each $columns as column}
+        <Toggle
+          size="S"
+          value={column.visible}
+          on:change={e => toggleVisibility(column, e.detail)}
+        />
+        <span>{column.name}</span>
+      {/each}
+    </div>
+    <div class="buttons">
+      <ActionButton on:click={showAll}>Show all</ActionButton>
+      <ActionButton on:click={hideAll}>Hide all</ActionButton>
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+  .columns {
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr;
+  }
+</style>

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

@@ -0,0 +1,70 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover } from "@budibase/bbui"
+  import {
+    LargeRowHeight,
+    MediumRowHeight,
+    SmallRowHeight,
+  } from "../lib/constants"
+
+  const { rowHeight, columns, table } = getContext("grid")
+  const sizeOptions = [
+    {
+      label: "Small",
+      size: SmallRowHeight,
+    },
+    {
+      label: "Medium",
+      size: MediumRowHeight,
+    },
+    {
+      label: "Large",
+      size: LargeRowHeight,
+    },
+  ]
+
+  let open = false
+  let anchor
+
+  const changeRowHeight = height => {
+    columns.actions.saveTable({
+      ...$table,
+      rowHeight: height,
+    })
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="LineHeight"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+  >
+    Row height
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    {#each sizeOptions as option}
+      <ActionButton
+        quiet
+        selected={$rowHeight === option.size}
+        on:click={() => changeRowHeight(option.size)}
+      >
+        {option.label}
+      </ActionButton>
+    {/each}
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+</style>

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

@@ -0,0 +1,107 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover, Select } from "@budibase/bbui"
+
+  const { sort, visibleColumns, stickyColumn } = getContext("grid")
+  const orderOptions = [
+    { label: "A-Z", value: "ascending" },
+    { label: "Z-A", value: "descending" },
+  ]
+
+  let open = false
+  let anchor
+
+  $: columnOptions = getColumnOptions($stickyColumn, $visibleColumns)
+  $: checkValidSortColumn($sort.column, $stickyColumn, $visibleColumns)
+
+  const getColumnOptions = (stickyColumn, columns) => {
+    let options = []
+    if (stickyColumn) {
+      options.push(stickyColumn.name)
+    }
+    return [...options, ...columns.map(col => col.name)]
+  }
+
+  const updateSortColumn = e => {
+    sort.update(state => ({
+      ...state,
+      column: e.detail,
+    }))
+  }
+
+  const updateSortOrder = e => {
+    sort.update(state => ({
+      ...state,
+      order: e.detail,
+    }))
+  }
+
+  // Ensure we never have a sort column selected that is not visible
+  const checkValidSortColumn = (sortColumn, stickyColumn, visibleColumns) => {
+    if (!sortColumn) {
+      return
+    }
+    if (
+      sortColumn !== stickyColumn?.name &&
+      !visibleColumns.some(col => col.name === sortColumn)
+    ) {
+      if (stickyColumn) {
+        sort.update(state => ({
+          ...state,
+          column: stickyColumn.name,
+        }))
+      } else {
+        sort.update(state => ({
+          ...state,
+          column: visibleColumns[0]?.name,
+        }))
+      }
+    }
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="SortOrderDown"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open || $sort.column}
+    disabled={!columnOptions.length}
+  >
+    Sort
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    <Select
+      placeholder={null}
+      value={$sort.column}
+      options={columnOptions}
+      autoWidth
+      on:change={updateSortColumn}
+      label="Column"
+    />
+    <Select
+      placeholder={null}
+      value={$sort.order}
+      options={orderOptions}
+      autoWidth
+      on:change={updateSortOrder}
+      label="Order"
+    />
+  </div>
+</Popover>
+
+<style>
+  .content {
+    padding: 6px 12px 12px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .content :global(.spectrum-Picker) {
+    width: 140px;
+  }
+</style>

package/src/components/grid/index.js

@@ -0,0 +1 @@
+export { default as Grid } from "./layout/Grid.svelte"

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

@@ -0,0 +1,24 @@
+<script>
+  export let user
+</script>
+
+<div class="user" style="background:{user.color};" title={user.email}>
+  {user.email[0]}
+</div>
+
+<style>
+  div {
+    width: 24px;
+    height: 24px;
+    display: grid;
+    place-items: center;
+    color: white;
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+  div:hover {
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,250 @@
+<script>
+  import { setContext } from "svelte"
+  import { writable } from "svelte/store"
+  import { fade } from "svelte/transition"
+  import { clickOutside, ProgressCircle } from "@budibase/bbui"
+  import { createEventManagers } from "../lib/events"
+  import { createAPIClient } from "../../../api"
+  import { attachStores } from "../stores"
+  import DeleteButton from "../controls/DeleteButton.svelte"
+  import BetaButton from "../controls/BetaButton.svelte"
+  import GridBody from "./GridBody.svelte"
+  import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
+  import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
+  import HeaderRow from "./HeaderRow.svelte"
+  import ScrollOverlay from "../overlays/ScrollOverlay.svelte"
+  import MenuOverlay from "../overlays/MenuOverlay.svelte"
+  import StickyColumn from "./StickyColumn.svelte"
+  import UserAvatars from "./UserAvatars.svelte"
+  import KeyboardManager from "../overlays/KeyboardManager.svelte"
+  import SortButton from "../controls/SortButton.svelte"
+  import AddColumnButton from "../controls/AddColumnButton.svelte"
+  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
+  import AddRowButton from "../controls/AddRowButton.svelte"
+  import RowHeightButton from "../controls/RowHeightButton.svelte"
+  import {
+    MaxCellRenderHeight,
+    MaxCellRenderWidthOverflow,
+    GutterWidth,
+    DefaultRowHeight,
+  } from "../lib/constants"
+
+  export let API = null
+  export let tableId = null
+  export let schemaOverrides = null
+  export let allowAddRows = true
+  export let allowAddColumns = true
+  export let allowEditColumns = true
+  export let allowExpandRows = true
+  export let allowEditRows = true
+  export let allowDeleteRows = true
+
+  // Unique identifier for DOM nodes inside this instance
+  const rand = Math.random()
+
+  // State stores
+  const tableIdStore = writable(tableId)
+  const schemaOverridesStore = writable(schemaOverrides)
+  const config = writable({
+    allowAddRows,
+    allowAddColumns,
+    allowEditColumns,
+    allowExpandRows,
+    allowEditRows,
+    allowDeleteRows,
+  })
+
+  // Build up context
+  let context = {
+    API: API || createAPIClient(),
+    rand,
+    config,
+    tableId: tableIdStore,
+    schemaOverrides: schemaOverridesStore,
+  }
+  context = { ...context, ...createEventManagers() }
+  context = attachStores(context)
+
+  // Reference some stores for local use
+  const {
+    isResizing,
+    isReordering,
+    ui,
+    loaded,
+    loading,
+    rowHeight,
+    contentLines,
+  } = context
+
+  // Keep stores up to date
+  $: tableIdStore.set(tableId)
+  $: schemaOverridesStore.set(schemaOverrides)
+  $: config.set({
+    allowAddRows,
+    allowAddColumns,
+    allowEditColumns,
+    allowExpandRows,
+    allowEditRows,
+    allowDeleteRows,
+  })
+
+  // Set context for children to consume
+  setContext("grid", context)
+
+  // Expose ability to retrieve context externally for external control
+  export const getContext = () => context
+
+  // Initialise websocket for multi-user
+  // onMount(() => createWebsocket(context))
+</script>
+
+<div
+  class="grid"
+  id="grid-{rand}"
+  class:is-resizing={$isResizing}
+  class:is-reordering={$isReordering}
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
+>
+  <div class="controls">
+    <div class="controls-left">
+      <AddRowButton />
+      <AddColumnButton />
+      <slot name="controls" />
+      <RowHeightButton />
+      <HideColumnsButton />
+      <SortButton />
+    </div>
+    <div class="controls-right">
+      <DeleteButton />
+      <UserAvatars />
+    </div>
+  </div>
+  {#if $loaded}
+    <div class="grid-data-outer" use:clickOutside={ui.actions.blur}>
+      <div class="grid-data-inner">
+        <StickyColumn />
+        <div class="grid-data-content">
+          <HeaderRow />
+          <GridBody />
+        </div>
+        <div class="overlays">
+          <ResizeOverlay />
+          <ReorderOverlay />
+          <BetaButton />
+          <ScrollOverlay />
+          <MenuOverlay />
+        </div>
+      </div>
+    </div>
+  {/if}
+  {#if $loading}
+    <div in:fade|local={{ duration: 130 }} class="grid-loading">
+      <ProgressCircle />
+    </div>
+  {/if}
+  <KeyboardManager />
+</div>
+
+<style>
+  .grid {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    overflow: hidden;
+    background: var(--cell-background);
+
+    /* Variables */
+    --cell-background: var(--spectrum-global-color-gray-50);
+    --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --cell-padding: 8px;
+    --cell-spacing: 4px;
+    --cell-border: 1px solid var(--spectrum-global-color-gray-200);
+    --cell-font-size: 14px;
+    --controls-height: 50px;
+  }
+  .grid,
+  .grid :global(*) {
+    box-sizing: border-box;
+  }
+  .grid.is-resizing :global(*) {
+    cursor: col-resize !important;
+  }
+  .grid.is-reordering :global(*) {
+    cursor: grabbing !important;
+  }
+
+  .grid-data-outer,
+  .grid-data-inner {
+    flex: 1 1 auto;
+    display: flex;
+    justify-items: flex-start;
+    align-items: stretch;
+    overflow: hidden;
+  }
+  .grid-data-outer {
+    height: 0;
+    flex-direction: column;
+  }
+  .grid-data-inner {
+    flex-direction: row;
+    position: relative;
+  }
+  .grid-data-content {
+    flex: 1 1 auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Controls */
+  .controls {
+    height: var(--controls-height);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid var(--spectrum-global-color-gray-200);
+    padding: var(--cell-padding);
+    gap: var(--cell-spacing);
+    background: var(--background);
+  }
+  .controls-left,
+  .controls-right {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--cell-spacing);
+  }
+  .controls-right {
+    gap: 12px;
+  }
+
+  /* Overlays */
+  .overlays {
+    z-index: 10;
+  }
+
+  /* Loading */
+  .grid-loading {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    z-index: 10;
+  }
+  .grid-loading:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    opacity: 0.6;
+  }
+</style>

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

@@ -0,0 +1,38 @@
+<script>
+  import { getContext, onMount } from "svelte"
+  import GridScrollWrapper from "./GridScrollWrapper.svelte"
+  import GridRow from "./GridRow.svelte"
+
+  const { bounds, renderedRows, rowVerticalInversionIndex } = getContext("grid")
+
+  let body
+
+  onMount(() => {
+    // Observe and record the height of the body
+    const observer = new ResizeObserver(() => {
+      bounds.set(body.getBoundingClientRect())
+    })
+    observer.observe(body)
+    return () => {
+      observer.disconnect()
+    }
+  })
+</script>
+
+<div bind:this={body} class="grid-body">
+  <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
+    {#each $renderedRows as row, idx}
+      <GridRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
+    {/each}
+  </GridScrollWrapper>
+</div>
+
+<style>
+  .grid-body {
+    display: block;
+    position: relative;
+    cursor: default;
+    overflow: hidden;
+    flex: 1 1 auto;
+  }
+</style>

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

@@ -0,0 +1,57 @@
+<script>
+  import { getContext } from "svelte"
+  import DataCell from "../cells/DataCell.svelte"
+
+  export let row
+  export let idx
+  export let invertY = false
+
+  const {
+    focusedCellId,
+    reorder,
+    selectedRows,
+    renderedColumns,
+    hoveredRowId,
+    selectedCellMap,
+    focusedRow,
+    columnHorizontalInversionIndex,
+  } = getContext("grid")
+
+  $: rowSelected = !!$selectedRows[row._id]
+  $: rowHovered = $hoveredRowId === row._id
+  $: rowFocused = $focusedRow?._id === row._id
+  $: reorderSource = $reorder.sourceColumn
+</script>
+
+<div
+  class="row"
+  on:focus
+  on:mouseenter={() => ($hoveredRowId = row._id)}
+  on:mouseleave={() => ($hoveredRowId = null)}
+>
+  {#each $renderedColumns as column, columnIdx (column.name)}
+    {@const cellId = `${row._id}-${column.name}`}
+    <DataCell
+      {cellId}
+      {column}
+      {row}
+      {invertY}
+      {rowFocused}
+      invertX={columnIdx >= $columnHorizontalInversionIndex}
+      highlighted={rowHovered || rowFocused || reorderSource === column.name}
+      selected={rowSelected}
+      rowIdx={idx}
+      focused={$focusedCellId === cellId}
+      selectedUser={$selectedCellMap[cellId]}
+      width={column.width}
+    />
+  {/each}
+</div>
+
+<style>
+  .row {
+    width: 0;
+    display: flex;
+    height: var(--row-height);
+  }
+</style>