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

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

@@ -0,0 +1,91 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover } from "@budibase/bbui"
+  import { DefaultColumnWidth } from "../lib/constants"
+
+  const { stickyColumn, columns } = 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}
+  >
+    Width
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="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>

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

@@ -0,0 +1,66 @@
+<script>
+  import { Modal, ModalContent, Button, notifications } from "@budibase/bbui"
+  import { getContext, onMount } from "svelte"
+
+  const { selectedRows, rows, config, subscribe } = 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"}`)
+  }
+
+  onMount(() => subscribe("request-bulk-delete", () => modal?.show()))
+</script>
+
+{#if selectedRowCount}
+  <div class="delete-button" data-ignore-click-outside="true">
+    <Button
+      icon="Delete"
+      size="M"
+      on:click={modal.show}
+      disabled={!$config.allowEditRows}
+      cta
+    >
+      Delete {selectedRowCount} row{selectedRowCount === 1 ? "" : "s"}
+    </Button>
+  </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-Button:not(:disabled)) {
+    background-color: var(--spectrum-global-color-red-400);
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  .delete-button :global(.spectrum-Button:not(:disabled):hover) {
+    background-color: var(--spectrum-global-color-red-500);
+    border-color: var(--spectrum-global-color-red-500);
+  }
+</style>

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

@@ -0,0 +1,95 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover, Toggle } from "@budibase/bbui"
+
+  const { columns, stickyColumn } = 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}
+  >
+    Columns
+  </ActionButton>
+</div>
+
+<Popover bind:open {anchor} align="left">
+  <div class="content">
+    <div class="columns">
+      {#if $stickyColumn}
+        <Toggle disabled size="S" value={true} />
+        <span>{$stickyColumn.label}</span>
+      {/if}
+      {#each $columns as column}
+        <Toggle
+          size="S"
+          value={column.visible}
+          on:change={e => toggleVisibility(column, e.detail)}
+        />
+        <span>{column.label}</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="MoveUpDown"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+  >
+    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,129 @@
+<script>
+  import { getContext } from "svelte"
+  import { ActionButton, Popover, Select } from "@budibase/bbui"
+
+  const { sort, columns, stickyColumn } = getContext("grid")
+
+  let open = false
+  let anchor
+
+  $: columnOptions = getColumnOptions($stickyColumn, $columns)
+  $: checkValidSortColumn($sort.column, $stickyColumn, $columns)
+  $: orderOptions = getOrderOptions($sort.column, columnOptions)
+
+  const getColumnOptions = (stickyColumn, columns) => {
+    let options = []
+    if (stickyColumn) {
+      options.push({
+        label: stickyColumn.label || stickyColumn.name,
+        value: stickyColumn.name,
+        type: stickyColumn.schema?.type,
+      })
+    }
+    return [
+      ...options,
+      ...columns.map(col => ({
+        label: col.label || col.name,
+        value: col.name,
+        type: col.schema?.type,
+      })),
+    ]
+  }
+
+  const getOrderOptions = (column, columnOptions) => {
+    const type = columnOptions.find(col => col.value === column)?.type
+    return [
+      {
+        label: type === "number" ? "Low-high" : "A-Z",
+        value: "ascending",
+      },
+      {
+        label: type === "number" ? "High-low" : "Z-A",
+        value: "descending",
+      },
+    ]
+  }
+
+  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, columns) => {
+    if (!sortColumn) {
+      return
+    }
+    if (
+      sortColumn !== stickyColumn?.name &&
+      !columns.some(col => col.name === sortColumn)
+    ) {
+      if (stickyColumn) {
+        sort.update(state => ({
+          ...state,
+          column: stickyColumn.name,
+        }))
+      } else {
+        sort.update(state => ({
+          ...state,
+          column: columns[0]?.name,
+        }))
+      }
+    }
+  }
+</script>
+
+<div bind:this={anchor}>
+  <ActionButton
+    icon="SortOrderDown"
+    quiet
+    size="M"
+    on:click={() => (open = !open)}
+    selected={open}
+    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>