MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update header cell popovers to use grid popover

This commit is contained in:
Andrew Kingston 2024-04-24 21:19:07 +01:00
parent b5eb60acd7
commit f45783f919
9 changed files with 86 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
View File

@ -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}

2
packages/frontend-core/src/components/grid/cells/DataCell.svelte
View File

@ -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>

1
packages/frontend-core/src/components/grid/cells/DateCell.svelte
View File

@ -11,7 +11,6 @@
export let readonly = false
export let api
export let invertX = false
export let gridID
let isOpen
let anchor

171
packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
View File

@ -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 {

1
packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
View File

@ -13,7 +13,6 @@
export let api
export let invertX
export let contentLines = 1
export let gridID
let isOpen = false
let focusedOptionIdx = null

4
packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
View File

@ -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

2
packages/frontend-core/src/components/grid/layout/GridRow.svelte
View File

@ -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}

5
packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
View File

@ -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"

8
packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
View File

@ -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"