Update header cell popovers to use grid popover

2024-07-05 22:40:39 +12:00 · 2024-04-24 21:19:07 +01:00 · 2024-04-24 21:19:07 +01:00 · f45783f919
parent b5eb60acd7
commit f45783f919
9 changed files with 86 additions and 110 deletions
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@ -11,7 +11,6 @@
  export let invertX = false
  export let schema
  export let maximum
-  export let gridID

  const { API, notifications } = getContext("grid")
  const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
@ -96,7 +95,6 @@
  <GridPopover
    open={isOpen}
    {anchor}
-    {gridID}
    {invertX}
    maxHeight={null}
    on:close={close}
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@ -22,7 +22,6 @@
  export let invertY = false
  export let contentLines = 1
  export let hidden = false
-  export let gridID

  const emptyError = writable(null)

@ -97,7 +96,6 @@
    {invertY}
    {invertX}
    {contentLines}
-    {gridID}
  />
  <slot />
 </GridCell>
--- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte
@ -11,7 +11,6 @@
  export let readonly = false
  export let api
  export let invertX = false
-  export let gridID

  let isOpen
  let anchor
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@ -1,20 +1,14 @@
 <script>
  import { getContext, onMount, tick } from "svelte"
  import { canBeDisplayColumn, canBeSortColumn } from "@budibase/shared-core"
-  import {
-    Icon,
-    Popover,
-    Menu,
-    MenuItem,
-    clickOutside,
-    Modal,
-  } from "@budibase/bbui"
+  import { Icon, Menu, MenuItem, Modal } from "@budibase/bbui"
  import GridCell from "./GridCell.svelte"
  import { getColumnIcon } from "../lib/utils"
  import MigrationModal from "../controls/MigrationModal.svelte"
  import { debounce } from "../../../utils/utils"
  import { FieldType, FormulaType } from "@budibase/types"
  import { TableNames } from "../../../constants"
+  import GridPopover from "../overlays/GridPopover.svelte"

  export let column
  export let idx
@ -24,7 +18,6 @@
    reorder,
    isReordering,
    isResizing,
-    gridID,
    sort,
    visibleColumns,
    dispatch,
@ -67,6 +60,11 @@
  $: searching = searchValue != null
  $: debouncedUpdateFilter(searchValue)

+  const close = () => {
+    open = false
+    editIsOpen = false
+  }
+
  const getSortingLabels = type => {
    switch (type) {
      case FieldType.NUMBER:
@ -310,88 +308,81 @@
  </GridCell>
 </div>

-<Popover
-  bind:open
-  bind:this={popover}
-  {anchor}
-  align="right"
-  offset={0}
-  popoverTarget={document.getElementById(gridID)}
-  customZindex={50}
->
-  {#if editIsOpen}
-    <div
-      use:clickOutside={() => {
-        editIsOpen = false
-      }}
-      class="content"
-    >
-      <slot />
-    </div>
-  {:else}
-    <Menu>
-      <MenuItem
-        icon="Edit"
-        on:click={editColumn}
-        disabled={!$config.canEditColumns || column.schema.disabled}
-      >
-        Edit column
-      </MenuItem>
-      <MenuItem
-        icon="Duplicate"
-        on:click={duplicateColumn}
-        disabled={!$config.canEditColumns}
-      >
-        Duplicate column
-      </MenuItem>
-      <MenuItem
-        icon="Label"
-        on:click={makeDisplayColumn}
-        disabled={idx === "sticky" || !canBeDisplayColumn(column.schema.type)}
-      >
-        Use as display column
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderUp"
-        on:click={sortAscending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "ascending")}
-      >
-        Sort {sortingLabels.ascending}
-      </MenuItem>
-      <MenuItem
-        icon="SortOrderDown"
-        on:click={sortDescending}
-        disabled={!canBeSortColumn(column.schema.type) ||
-          (column.name === $sort.column && $sort.order === "descending")}
-      >
-        Sort {sortingLabels.descending}
-      </MenuItem>
-      <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
-        Move left
-      </MenuItem>
-      <MenuItem
-        disabled={!canMoveRight}
-        icon="ChevronRight"
-        on:click={moveRight}
-      >
-        Move right
-      </MenuItem>
-      <MenuItem
-        disabled={idx === "sticky" || !$config.showControls}
-        icon="VisibilityOff"
-        on:click={hideColumn}
-      >
-        Hide column
-      </MenuItem>
-      {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
-        <MenuItem icon="User" on:click={openMigrationModal}>
-          Migrate to user column
+{#if open}
+  <GridPopover {anchor} align="right" on:close={close} maxHeight={null}>
+    {#if editIsOpen}
+      <div class="content">
+        <slot />
+      </div>
+    {:else}
+      <Menu>
+        <MenuItem
+          icon="Edit"
+          on:click={editColumn}
+          disabled={!$config.canEditColumns || column.schema.disabled}
+        >
+          Edit column
        </MenuItem>
-      {/if}
-    </Menu>
-  {/if}
-</Popover>
+        <MenuItem
+          icon="Duplicate"
+          on:click={duplicateColumn}
+          disabled={!$config.canEditColumns}
+        >
+          Duplicate column
+        </MenuItem>
+        <MenuItem
+          icon="Label"
+          on:click={makeDisplayColumn}
+          disabled={idx === "sticky" || !canBeDisplayColumn(column.schema.type)}
+        >
+          Use as display column
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderUp"
+          on:click={sortAscending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "ascending")}
+        >
+          Sort {sortingLabels.ascending}
+        </MenuItem>
+        <MenuItem
+          icon="SortOrderDown"
+          on:click={sortDescending}
+          disabled={!canBeSortColumn(column.schema.type) ||
+            (column.name === $sort.column && $sort.order === "descending")}
+        >
+          Sort {sortingLabels.descending}
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveLeft}
+          icon="ChevronLeft"
+          on:click={moveLeft}
+        >
+          Move left
+        </MenuItem>
+        <MenuItem
+          disabled={!canMoveRight}
+          icon="ChevronRight"
+          on:click={moveRight}
+        >
+          Move right
+        </MenuItem>
+        <MenuItem
+          disabled={idx === "sticky" || !$config.showControls}
+          icon="VisibilityOff"
+          on:click={hideColumn}
+        >
+          Hide column
+        </MenuItem>
+        {#if $config.canEditColumns && column.schema.type === "link" && column.schema.tableId === TableNames.USERS}
+          <MenuItem icon="User" on:click={openMigrationModal}>
+            Migrate to user column
+          </MenuItem>
+        {/if}
+      </Menu>
+    {/if}
+  </GridPopover>
+{/if}

 <style>
  .header-cell {
--- a/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
@ -13,7 +13,6 @@
  export let api
  export let invertX
  export let contentLines = 1
-  export let gridID

  let isOpen = false
  let focusedOptionIdx = null
--- a/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
@ -14,11 +14,9 @@
  export let schema
  export let onChange
  export let invertX = false
-  export let invertY = false
  export let contentLines = 1
  export let searchFunction = API.searchTable
  export let primaryDisplay
-  export let gridID

  const color = getColor(0)

@ -276,7 +274,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if isOpen}
-  <GridPopover open={isOpen} {anchor} {gridID} {invertX} on:close={close}>
+  <GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
    <div class="dropdown" on:wheel|stopPropagation>
      <div class="search">
        <Input
--- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
@ -20,7 +20,6 @@
    dispatch,
    rows,
    columnRenderMap,
-    gridID,
  } = getContext("grid")

  $: rowSelected = !!$selectedRows[row._id]
@ -46,7 +45,6 @@
      {row}
      {invertY}
      {rowFocused}
-      {gridID}
      invertX={columnIdx >= $columnHorizontalInversionIndex}
      highlighted={rowHovered || rowFocused || reorderSource === column.name}
      selected={rowSelected}
--- a/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
@ -12,6 +12,7 @@
  export let minWidth = PopoverMinWidth
  export let maxWidth = PopoverMaxWidth
  export let maxHeight = PopoverMaxHeight
+  export let align = "left"

  const { gridID } = getContext("grid")
  const dispatch = createEventDispatcher()
@ -36,9 +37,9 @@
 <Popover
  open
  {anchor}
-  align="left"
+  {align}
  portalTarget="#{gridID} .grid-popover-container"
-  offset={1}
+  offset={0}
 >
  <div
    class="grid-popover-contents"
--- a/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
@ -19,7 +19,6 @@
    focusedRowId,
    notifications,
    isDatasourcePlus,
-    gridID,
  } = getContext("grid")

  let anchor
@ -56,12 +55,7 @@

 {#if $menu.visible}
  {#key style}
-    <GridPopover
-      {anchor}
-      {gridID}
-      on:close={menu.actions.close}
-      maxHeight={null}
-    >
+    <GridPopover {anchor} on:close={menu.actions.close} maxHeight={null}>
      <Menu>
        <MenuItem
          icon="Copy"